refs #15408 [fid_bbi] styling result list

* tidies up scss
* reinstates offcanvas toggler
* modifies offcanvas toggler top margin for better looks
* modifies search tools anchor appearance on XS for better looks
* aligns search/results.phtml with current finc version

fid_bbi/alpha/config/vufind/config.ini

@@ -26,6 +26,8 @@ debug           = false
 
 [Site]
 url = "https://alpha.finc.info/vufind2/fid_bbi"
+showBookBag = true
+offcanvas=true
 
 [Database]
 database = "mysql://vufind_fidbbi:i3lIPQTBmbSGmzipQHjOPrzmUfUuiDiA@localhost/vufind_fidbbi"

themes/fid_bbi/scss/compiled.scss

@@ -20,6 +20,12 @@ body {
   background-color: initial;
 }
 
+// Avoid ugly wrapping in table headers
+.description-tab > table th {
+  min-width: 13rem;
+}
+
+
 // Helper Classes
 .flex-column {
   display: flex;
@@ -265,15 +271,6 @@ input.searchFormKeepFilters {
   }
 }
 
-// Content
-.searchtools {
-  display: block;
-  margin: 0 0 1em;
-}
-
-.result:nth-of-type(2n) {
-  background-color: $brand-primary-light;
-}
 
 // MyResearch / Account
 //// Make tables align better
@@ -283,6 +280,11 @@ input.searchFormKeepFilters {
   }
 }
 
+// RESULT LIST
+//// Offcanvas toggler
+.search-filter-toggle {
+  margin-top: 0;
+}
 
 // Footer
 footer {
@@ -304,9 +306,19 @@ footer {
   padding: 5px;
 }
 
-// result-list
-@media screen and (max-width: $screen-sm-max) {
-  .searchtools {
+//// Search tools
+.searchtools {
+  display: block;
+  margin: 0 0 1em;
+
+  @media screen and (max-width: $screen-xs-max) {
+    a {
+      border: 0;
+      padding: 5px 3px;
+    }
+  }
+
+  @media screen and (max-width: $screen-sm-max) {
     strong {
       clear: both;
       display: block;
@@ -319,7 +331,12 @@ footer {
   }
 }
 
-// result body
+//// Result list stripes
+.result:nth-of-type(2n) {
+  background-color: $brand-primary-light;
+}
+
+//// result body width
 .result-body {
   width: 90%;
 
@@ -328,7 +345,7 @@ footer {
   }
 }
 
-// result links
+//// result links width
 .result-links {
   width: 10%;
 
@@ -343,8 +360,17 @@ footer {
 }
 
 
-// Avoid ugly wrapping in table headers
-.description-tab > table th {
-  min-width: 13rem;
-}
+// FOOTER
+footer {
+  background: $brand-primary;
+  color: $white;
+
+  a {
+    color: $white;
 
+    &:hover,
+    &:focus {
+      color: $brand-primary-light;
+    }
+  }
+}
\ No newline at end of file

themes/fid_bbi/templates/search/results.phtml

@@ -55,8 +55,10 @@ $this->headScript()->appendFile("check_save_statuses.js");
 $recordTotal = $this->results->getResultTotal();
 ?>
 
-<div class="<?=$this->layoutClass('mainbody')?>">
-  <?php if ($recordTotal > 0): ?>
+<?php /* finc: we need search-results-col to pull content to full width, also used in print styles! - CK */ ?>
+<div class="<?=$this->layoutClass('mainbody')?> search-results-col">
+  <?php if (($recordTotal = $this->results->getResultTotal()) > 0): // only display these at very top if we have results ?>
+    <?php /* fid_bbi: Searchtools to be shown at the top - CK */ ?>
     <div class="searchtools hidden-print">
       <strong><?=$this->transEsc('Search Tools')?>:</strong>
       <a href="<?=$this->results->getUrlQuery()->setViewParam('rss')?>"><i class="fa fa-rss" aria-hidden="true"></i> <?=$this->transEsc('Get RSS Feed')?></a>
@@ -68,35 +70,52 @@ $recordTotal = $this->results->getResultTotal();
         <span class="hidden-sm hidden-xs">&mdash;</span>
         <?php if (is_numeric($this->results->getSearchId())): ?>
           <?php if ($this->results->isSavedSearch()): ?>
-            <a href="<?=$this->url('myresearch-savesearch')?>?delete=<?=urlencode($this->results->getSearchId())?>"><i class="fa fa-remove" aria-hidden="true"></i> <?=$this->transEsc('save_search_remove')?></a>
+            <a href="<?=$this->url('myresearch-savesearch')?>?delete=<?=urlencode($this->results->getSearchId())?>"><i class="fa fa-remove"
+                                                                                                                       aria-hidden="true"></i> <?=$this->transEsc('save_search_remove')?></a>
           <?php else: ?>
             <a href="<?=$this->url('myresearch-savesearch')?>?save=<?=urlencode($this->results->getSearchId())?>"><i class="fa fa-save" aria-hidden="true"></i> <?=$this->transEsc('save_search')?></a>
           <?php endif; ?>
         <?php endif; ?>
       <?php endif; ?>
     </div>
+    <?php /* fid_bbi: Searchtools to be shown at the top - END */ ?>
   <?php endif; ?>
   <?php if ($recordTotal > 0): // only display these at very top if we have results ?>
-    <?php foreach ($this->results->getRecommendations('top') as $current): ?>
-      <?=$this->recommend($current)?>
+    <?php foreach ($this->results->getRecommendations('top') as $index => $current): ?>
+      <?=$this->recommend($current, 'top', $index)?>
     <?php endforeach; ?>
   <?php endif; ?>
   <?=$this->flashmessages()?>
   <?php /* finc: remove 'hidden' below to show search-stats; we also hide the entire bar on xs + sm - CK */ ?>
-  <nav class="search-header hidden-xs hidden-sm hidden-print">
+  <nav class="search-header hidden-print">
     <div class="search-stats">
+      <?php /* finc: use spans for easier to show/hide choices - CK */ ?>
       <?php if ($recordTotal > 0): ?>
+        <span class="hit-stats hidden-xs hidden-sm">
         <?=$this->context()->renderInContext('search/controls/showing.phtml', ['lookfor' => $lookfor, 'recordTotal' => $recordTotal])?>
+        </span>
+        <span class="offcanvas-toogler">
+          <button class="search-filter-toggle btn btn-primary visible-xs" href="#search-sidebar" data-toggle="offcanvas" title="<?=$this->transEsc('sidebar_expand')?>">
+          <?=$this->transEsc('Refine Results')?>
+          </button>
+        </span>
       <?php else: ?>
         <h2><?=$this->transEsc('nohit_heading')?></h2>
       <?php endif; ?>
     </div>
 
     <?php if ($recordTotal > 0): ?>
+      <?php /* finc: use spans for easier to show/hide choices - CK */ ?>
       <div class="search-controls">
+        <span class="limit">
         <?=$this->render('search/controls/limit.phtml')?>
+        </span>
+        <span class="sort right">
         <?=$this->render('search/controls/sort.phtml')?>
+        </span>
+        <span class="view">
         <?=$this->render('search/controls/view.phtml')?>
+        </span>
       </div>
     <?php endif; ?>
   </nav>
@@ -114,12 +133,12 @@ $recordTotal = $this->results->getResultTotal();
     <?php if (isset($this->parseError)): ?>
       <p class="alert alert-danger"><?=$this->transEsc('nohit_parse_error')?></p>
     <?php endif; ?>
-    <?php foreach (($top = $this->results->getRecommendations('top')) as $current): ?>
-      <?=$this->recommend($current)?>
+    <?php foreach (($top = $this->results->getRecommendations('top')) as $index => $current): ?>
+      <?=$this->recommend($current, 'top', $index)?>
     <?php endforeach; ?>
-    <?php foreach ($this->results->getRecommendations('noresults') as $current): ?>
+    <?php foreach ($this->results->getRecommendations('noresults') as $index => $current): ?>
       <?php if (!in_array($current, $top)): ?>
-        <?=$this->recommend($current)?>
+        <?=$this->recommend($current, 'noresults', $index)?>
       <?php endif; ?>
     <?php endforeach; ?>
   <?php else: ?>
@@ -134,9 +153,9 @@ $recordTotal = $this->results->getResultTotal();
 <?php /* End Main Listing */ ?>
 
 <?php /* Narrow Search Options */ ?>
-<div class="<?=$this->layoutClass('sidebar')?>">
-  <?php foreach ($this->results->getRecommendations('side') as $current): ?>
-    <?=$this->recommend($current)?>
+<div class="<?=$this->layoutClass('sidebar')?>" id="search-sidebar">
+  <?php foreach ($this->results->getRecommendations('side') as $index => $current): ?>
+    <?=$this->recommend($current, 'side', $index)?>
   <?php endforeach; ?>
 </div>
 <?php /* End Narrow Search Options */ ?>