SearchKit - Tidy up table headers

diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
index 19d432c73561a5249228fbdd5f1a9177cc90c356..d9df2cda7595e05e7458019ee77b6775ae981354 100644 (file)
--- a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
@@ -12,8 +12,8 @@
         <th ng-class="{'crm-search-result-select': $ctrl.settings.actions}" ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTaskHeader.html'" ng-if=":: $ctrl.hasExtraFirstColumn()">
         </th>
         <th ng-repeat="col in $ctrl.settings.columns" ng-click="$ctrl.setSort(col, $event)" class="{{:: $ctrl.isSortable(col) ? 'crm-sortable-col' : ''}}" title="{{:: $ctrl.isSortable(col) ? ts('Click to sort results (shift-click to sort by multiple).') : '' }}">
-          <i ng-if=":: $ctrl.isSortable(col)" class="crm-i {{ $ctrl.getSort(col) }}"></i>
-          <span>{{:: col.label }}</span>
+          <i ng-if=":: $ctrl.isSortable(col)" class="crm-i crm-search-table-column-sort-icon {{ $ctrl.getSort(col) }}"></i>
+          <span class="crm-search-display-table-column-label">{{:: col.label }}</span>
         </th>
       </tr>
     </thead>

diff --git a/ext/search_kit/css/crmSearchDisplayTable.css b/ext/search_kit/css/crmSearchDisplayTable.css
index 331e8bebb16d49b7e22952df70e48144e65531f8..9ac158c2bb910d712796c64a1d66eb90f68dd0c6 100644 (file)
--- a/ext/search_kit/css/crmSearchDisplayTable.css
+++ b/ext/search_kit/css/crmSearchDisplayTable.css
@@ -1,5 +1,20 @@
 /* SearchKit table display styling */
 
+#bootstrap-theme .crm-search-display-table > table.table > thead > tr > th {
+  position: relative;
+}
+
+#bootstrap-theme .crm-search-display-table > table.table > thead > tr > th i.crm-search-table-column-sort-icon {
+  position: absolute;
+  left: 2px;
+  bottom: 10px;
+}
+
+#bootstrap-theme .crm-search-display-table > table.table > thead > tr > th i.crm-search-table-column-sort-icon + .crm-search-display-table-column-label {
+  margin-left: 4px;
+  display: inline-block;
+}
+
 #bootstrap-theme .crm-search-display-table > table.table > thead > tr > th.crm-search-result-select {
   padding-left: 0;
   padding-right: 0;