refs #15418 [fid_bbi] styling result list

* switches on bookbag
* unhides saved in favorites block in result list
* moves collection info for defaultRecord below data and items block, right-alogned
* changes icon size for bookbag to correspond to favorites
* removes fa-2x as this leads to wrong display in detail view
* adds css rule for large size in result list
* adds mixin to make items sr-only rather than hide them
* applies mixin to cart labels in result list
* relabels E-Mail this in cart tools to be same as E-mail this in Search tools
* changes cart icon in header
* resets check_saved_statuses for testing
* changes padding in Saved in Favorites box
* reinstates 'hidden' to savedLists

fid_bbi/alpha/config/vufind/config.ini

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

fid_bbi/config/vufind/config.ini

@@ -40,6 +40,7 @@ title = "FID Buch-, Bibliotheks- und Informationswissenschaft"
 hideHoldingsTabWhenEmpty = true
 ;sidebarOnLeft = false
 offcanvas = true
+showBookBag = true
 
 [Http]
 ; Pfad zu SSL-Zertifikaten in der docker-VM (global für CentOS konfiguriert)

fid_bbi/languages/de.ini

@@ -297,7 +297,7 @@ Electronic Resource (Remote Access) = "Elektronische Ressource im Fernzugriff"
 Electronic Resources = Online-Ressourcen
 Electronic Serial = "Elektronische Zeitschrift"
 Electronic Thesis = "Elektronische Hochschulschrift"
-Email = "E-Mail"
+Email = "Versenden"
 Email Address = "E-Mail-Adresse"
 Email Record = "E-Mail-Eintrag"
 Email address is invalid = "Die E-Mail-Adresse ist ungültig"

fid_bbi/languages/en.ini

@@ -68,7 +68,7 @@ Edition = Edition
 Electronic = "Electronic Resource"
 Electronic Resources = "Electronic Resources"
 Electronicjournal = "Electronic Journal"
-Email = E-Mail
+Email = E-Mail this
 Email Address = "E-Mail Address"
 Email Record = "E-Mail Record"
 Email address is invalid = "E-mail address is invalid"

themes/fid_bbi/js/check_save_statuses.js

@@ -7,6 +7,7 @@ function displaySaveStatus(itemLists, $item) {
     var html = '<ul>' + itemLists.map(function convertToLi(l) {
       return '<li><a href="' + l.list_url + '">' + htmlEncode(l.list_title) + '</a></li>';
     }).join('') + '</ul>';
+    // favorites icon toggle - GG
     var id = $item.find('.hiddenId').val();
     $item.find('#fav-icon'+id).removeClass('fa-star-o').addClass('fa-star');
     $item.find('.savedLists').addClass('loaded');
@@ -86,9 +87,9 @@ function saveQueueAjax(obj, el) {
   saveStatusEls[obj.source + '|' + obj.id] = el;
   saveStatusTimer = setTimeout(runSaveAjaxForQueue, saveStatusDelay);
   el.addClass('js-save-pending');
-  /*el.find('.savedLists')
+  el.find('.savedLists')
     .removeClass('loaded hidden')
-    .append('<span class="js-load">' + VuFind.translate('loading') + '...</span>');*/
+    .append('<span class="js-load">' + VuFind.translate('loading') + '...</span>');
   el.find('.savedLists ul').remove();
 }
 

themes/fid_bbi/scss/_customMixins.scss

+// use to show items to screen readers only // FIXME: Remove, when #15438 has been merged
+@mixin sr-only {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: auto;
+}
\ No newline at end of file

themes/fid_bbi/scss/compiled.scss

@@ -271,8 +271,50 @@ input.searchFormKeepFilters {
   }
 }
 
+// Content
+// SEARCH TOOLS
+.searchtools {
+  display: block;
+  margin: 0 0 1em;
+}
+
+.result:nth-of-type(2n) {
+  background-color: $brand-primary-light;
+}
+
+// RESULT LIST
+.result-links {
+  // move favorites and other icons to the right
+  text-align: right;
+}
+
+//// Saved in Favorites Block
+.savedLists {
+  padding: 5px;
+  text-align: left;
+}
+
+//// Bookbag Icons
+.cart-link-icon.fa {
+  margin-right: 0;
+
+  // Make same size as favs in result list
+  .template-name-results & {
+    font-size: 2em;
+  }
+}
+
+//// Bookbag Labels - hide in result list
+.template-name-results .cart-link-label {
+  @include sr-only;
+}
+
+//// Collection Info (in new location)
+.collection-details {
+  text-align: right;
+}
 
-// MyResearch / Account
+// MyRESEARCH / Account
 //// Make tables align better
 .template-name-profile {
   .mainbody tr:first-of-type th {

themes/fid_bbi/templates/RecordDriver/DefaultRecord/result-list.phtml

@@ -148,15 +148,15 @@ $i = 0;
             <div class="left"><?=$formats[0]?></div>
           <?php endif; ?>
 
-          <?php
+        <?php /* fid_bbi: Collection info moved from here to record-links section below - CK */ ?>
+          <?php /*
           $collection = $this->driver->tryMethod('getMegaCollection');
           if (!empty($collection)): ?>
             <div class="right"><?=$collection[0]?></div>
-          <?php endif; ?>
+          <?php endif; */?>
       </div>
     </div>
     <div class="result-links hidden-print">
-
       <?php if ($this->cart()->isActiveInSearch() && $this->params->getOptions()->supportsCart() && $this->cart()->isActive()): ?>
         <?=$this->render('record/cart-buttons.phtml', ['id' => $this->driver->getUniqueId(), 'source' => $this->driver->getSourceIdentifier()]);?><br/>
       <?php endif; ?>
@@ -180,7 +180,7 @@ $i = 0;
       <?php $trees = $this->driver->tryMethod('getHierarchyTrees');
       if (!empty($trees)): ?>
         <?php foreach ($trees as $hierarchyID => $hierarchyTitle): ?>
-          <div class="hierarchyTreeLink">
+          <div class="hierarchyTreeLink hidden">
             <input type="hidden" value="<?=$this->escapeHtmlAttr($hierarchyID)?>" class="hiddenHierarchyId"/>
             <a class="hierarchyTreeLinkText result-link-label" data-lightbox href="<?=$this->recordLink()->getTabUrl($this->driver, 'HierarchyTree')?>?hierarchy=<?=urlencode($hierarchyID)?>#tabnav" title="<?=$this->transEsc('hierarchy_tree')?>" data-lightbox-href="<?=$this->recordLink()->getTabUrl($this->driver, 'AjaxTab')?>?hierarchy=<?=urlencode($hierarchyID)?>" data-lightbox-post="tab=hierarchytree">
               <i class="result-link-icon fa fa-fw fa-sitemap fa-2x" aria-hidden="true"></i>
@@ -192,6 +192,15 @@ $i = 0;
 
       <?=$this->driver->supportsCoinsOpenUrl() ? '<span class="Z3988" title="' . $this->escapeHtmlAttr($this->driver->getCoinsOpenUrl()) . '"></span>' : ''?>
     </div>
+    <?php /* fid_bbi: Collection info moved here - CK */ ?>
+    <div class="collection-details">
+      <?php
+      $collection = $this->driver->tryMethod('getMegaCollection');
+      if (!empty($collection)): ?>
+        <?=$collection[0]?>
+      <?php endif; ?>
+    </div>
+    <?php /* fid_bbi: Collection info moved here - END */ ?>
   </div>
   <?php if ($thumbnail && $thumbnailAlignment == 'right'): ?>
     <?=$thumbnail?>

themes/fid_bbi/templates/header.phtml

@@ -36,7 +36,7 @@
           if ($cart->isActive()): ?>
             <li id="cartSummary">
               <a id="cartItems" class="btn" data-lightbox title="<?=$this->transEsc('View Book Bag')?>" href="<?=$this->url('cart-home')?>">
-                <i class="fa fa-clipboard" aria-hidden="true"></i> <strong><?=count($cart->getItems())?></strong> <span class="cart-label"><?=$this->transEsc('items')?></span>
+                <i class="fa fa-thumb-tack" aria-hidden="true"></i> <strong><?=count($cart->getItems())?></strong> <span class="cart-label"><?=$this->transEsc('items')?></span>
                 <span class="hidden-sm full<?=!$cart->isFull() ? ' hidden' : ''?>">(<?=$this->transEsc('bookbag_full')?>)</span>
               </a>
             </li>

themes/fid_bbi/templates/record/cart-buttons.phtml

+<!-- fid_bbi: record - cart-buttons -->
+<?php $cart = $this->cart(); ?>
+<?php if ($cart->isActive()): ?>
+
+    <?php $cartId = $this->source . '|' . $this->id; ?>
+    <span class="btn-bookbag-toggle" data-cart-id="<?=$this->escapeHtmlAttr($this->id)?>" data-cart-source="<?=$this->escapeHtmlAttr($this->source)?>">
+    <a class="cart-add hidden<?php if (!$cart->contains($cartId)): ?> correct<?php endif ?>">
+      <i class="cart-link-icon fa fa-plus" aria-hidden="true" title="<?=$this->transEsc('Add to Book Bag')?>"></i><span class="cart-link-label"><?=$this->transEsc('Add to Book Bag')?></span>
+    </a>
+    <a class="cart-remove hidden<?php if ($cart->contains($cartId)): ?> correct<?php endif ?>">
+      <i class="cart-link-icon fa fa-minus-circle" aria-hidden="true" title="<?=$this->transEsc('Remove from Book Bag')?>"></i> <span class="cart-link-label"><?=$this->transEsc('Remove from Book Bag')?></span>
+    </a>
+    <noscript>
+      <form method="post" name="addForm" action="<?=$this->url('cart-processor')?>">
+        <input type="hidden" name="ids[]" value="<?=$this->escapeHtmlAttr($cartId)?>"/>
+        <?php if ($cart->contains($cartId)): ?>
+          <input class="btn btn-default" type="submit" name="delete" value="<?=$this->transEsc('Remove from Book Bag')?>"/>
+        <?php else: ?>
+          <input class="btn btn-default" type="submit" name="add" value="<?=$this->transEsc('Add to Book Bag')?>"/>
+        <?php endif; ?>
+      </form>
+    </noscript>
+  </span>
+<?php endif; ?>
+<!-- fid_bbi: record - cart-buttons END -->