SearchKit - Update tab styling

civicrm · Dec 18, 2023 · 8105b04 · 8105b04
1 parent 57ce904
commit 8105b04
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 31 deletions.
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html
@@ -1,3 +1,3 @@
-<fieldset class="crm-search-select-fields">
+<div class="crm-search-select-fields">
   <crm-search-admin-fields></crm-search-admin-fields>
-</fieldset>
+</div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html
@@ -1,9 +1,7 @@
-<fieldset>
-  <div class="form-inline">
-    <label for="crm-search-main-entity">{{:: ts('Search for') }}</label>
-    <input id="crm-search-main-entity" class="form-control huge collapsible-optgroups" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: mainEntitySelect}" ng-disabled="$ctrl.savedSearch.id">
-  </div>
-</fieldset>
+<div class="form-inline">
+  <label for="crm-search-main-entity">{{:: ts('Search for') }}</label>
+  <input id="crm-search-main-entity" class="form-control huge collapsible-optgroups" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: mainEntitySelect}" ng-disabled="$ctrl.savedSearch.id">
+</div>
 <div ng-if=":: $ctrl.paramExists('join')" class="crm-search-joins">
   <fieldset ng-repeat="join in $ctrl.savedSearch.api_params.join" class="crm-search-join">
     <div class="form-inline">

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html
@@ -1,12 +1,10 @@
-  <fieldset>
-    <div>
-      <strong>API:</strong>
-    </div>
-    <pre>{{ $ctrl.debug.apiParams }}</pre>
-    <pre ng-if="$ctrl.debug.timeIndex">{{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}</pre>
-    <div ng-if="$ctrl.perm.viewDebugOutput">
-      <strong>SQL:</strong>
-      <pre ng-if="!$ctrl.debug.sql">{{:: ts('Run search to view SQL') }}</pre>
-      <pre ng-repeat="query in $ctrl.debug.sql">{{ query }}</pre>
-    </div>
-  </fieldset>
+<div>
+  <strong>API:</strong>
+</div>
+<pre>{{ $ctrl.debug.apiParams }}</pre>
+<pre ng-if="$ctrl.debug.timeIndex">{{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}</pre>
+<div ng-if="$ctrl.perm.viewDebugOutput">
+  <strong>SQL:</strong>
+  <pre ng-if="!$ctrl.debug.sql">{{:: ts('Run search to view SQL') }}</pre>
+  <pre ng-repeat="query in $ctrl.debug.sql">{{ query }}</pre>
+</div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html
@@ -1,6 +1,4 @@
-<fieldset>
-  <textarea class="form-control" placeholder="{{:: ts('Description (shown above default display)') }}" ng-model="$ctrl.savedSearch.description"></textarea>
-</fieldset>
+<textarea class="form-control" placeholder="{{:: ts('Description (shown above default display)') }}" ng-model="$ctrl.savedSearch.description"></textarea>
 <div class="form-group">
   <label class="sr-only" for="expires_date">{{:: ts('Search Expiry Date') }}</label>
   <div class="input-group">

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
@@ -12,7 +12,7 @@ <h1 crm-page-title>{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}</h1>
   </div>
 
   <form>
-    <div class="crm-flex-box">
+    <div class="crm-flex-box crm-search-admin-outer">
       <div class="crm-flex-1">
         <input id="crm-saved-search-label" class="form-control" ng-model="$ctrl.savedSearch.label" type="text" required placeholder="{{:: ts('Untitled Search') }}" ng-model-options="$ctrl.debounceMode">
       </div>
@@ -90,15 +90,15 @@ <h1 crm-page-title>{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}</h1>
       </div>
     </div>
 
-    <div class="crm-flex-box">
+    <div class="crm-flex-box crm-search-admin-outer">
       <nav class="crm-search-admin-main-tabs">
         <ul class="nav nav-pills nav-stacked" role="tablist" aria-orientation="vertical" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
       </nav>
-      <div class="crm-flex-4">
-        <div ng-if="!$ctrl.selectedDisplay()">
+      <div class="crm-flex-4 panel panel-default">
+        <div ng-if="!$ctrl.selectedDisplay()" class="panel-body">
           <div ng-include="'~/crmSearchAdmin/crmSearch-' + controls.tab + '.html'" class="crm-search-admin-relative"></div>
         </div>
-        <div ng-if="$ctrl.selectedDisplay()">
+        <div ng-if="$ctrl.selectedDisplay()" class="panel-body">
           <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
             <crm-search-admin-display class="crm-search-admin-relative" display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
           </div>

diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
@@ -7,12 +7,16 @@
   top: 0;
 }
 
+#bootstrap-theme #crm-saved-search-label {
+  width: calc(100% - 1rem);
+}
+
 #bootstrap-theme .crm-search-admin-search-listing-buttons {
   min-width: 66px;
 }
 
-#bootstrap-theme.crm-search .crm-search-admin-main-tabs {
-  margin: 10px 20px 20px 0;
+#bootstrap-theme.crm-search .crm-search-admin-outer {
+  margin-bottom: 20px;
 }
 
 #bootstrap-theme.crm-search .help-block.bg-warning {
@@ -46,10 +50,26 @@
   cursor: default;
 }
 
+#bootstrap-theme.crm-search ul.nav-stacked li.active {
+  border-right: 2px solid white;
+  width: calc(100% + 2px);
+}
+#bootstrap-theme.crm-search ul.nav-stacked li.active a {
+  background-color: inherit;
+  color: inherit;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border: 1px solid lightgrey;
+  border-right: 0 none;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+}
+
 #bootstrap-theme.crm-search ul.nav-stacked li[role=separator] {
-  height: 8px;
+  height: 12px;
   border-top: 1px solid lightgrey;
   margin-top: 8px;
+  margin-left: 15px;
+  margin-right: 30px;
 }
 
 #bootstrap-theme.crm-search ul.nav-stacked li a[disabled] {