refs #19547 [fid_bbi] cart design

* update design of cart (book bag)
* make small icon buttons narrower
** This is already the case for the results and record action buttons and would also be required for the German cart buttons to fit into one row, so make it global.

themes/fid_bbi/scss/blocks/cart.scss

+.cart-controls {
+  display: inline-flex;
+  flex-wrap: wrap;
+  margin: g(-.25) g(-.25) g(1 - .25);
+
+  > * {
+    margin: g(.25);
+  }
+}
+
+.cart-item {
+  display: flex;
+}

themes/fid_bbi/scss/blocks/modal.scss

@@ -61,6 +61,11 @@
     text-align: left;
   }
 
+  h1.sr-only:first-child + h2 {
+    @include heading(2);
+    margin-top: 0;
+  }
+
   h1 ~ h2 {
     @include heading(3);
   }

themes/fid_bbi/scss/compiled.scss

@@ -28,6 +28,7 @@
 @import 'blocks/box';
 @import 'blocks/browse';
 @import 'blocks/button';
+@import 'blocks/cart';
 @import 'blocks/container';
 @import 'blocks/dropdown-menu';
 @import 'blocks/dbis';

themes/fid_bbi/scss/mixins/button.scss

@@ -67,7 +67,7 @@
   .icon {
     color: #fff;
     float: left;
-    margin: 0 g() 0 (g(-.5) + 1px);
+    margin: 0 g(.75) 0 (g(-.5) + 1px);
 
     @if ($size == big) {
       margin: 0 g(1.5) 0 (g(-.5) + 1px);

themes/fid_bbi/templates/cart/cart.phtml

+<!-- fid_bbi: cart - cart -->
+<?php
+/**
+ * Copied from themes/finc/templates/cart/cart.phtml
+ * Changes for FID BBI:
+ * - Clean up HTML
+ * - Add icons
+ * - Remove "empty" button
+ *
+ * @author Tobias Schäfer <ts@aspectis.net>
+ */
+?>
+
+<?php
+$this->headTitle($this->translate('Book Bag'));
+?>
+
+<h1><?=$this->translate('Book Bag') ?></h1>
+
+<?=$this->flashmessages()?>
+
+<form
+  class="cart"
+  action="<?=$this->url('cart-processor')?>"
+  method="post"
+  name="cartForm"
+  data-lightbox-onsubmit="cartFormHandler"
+>
+  <input type="hidden" id="dropdown_value">
+
+  <?php if (!$this->cart()->isEmpty()): ?>
+    <div class="cart-controls">
+      <?php if ($this->userlist()->getMode() !== 'disabled'): ?>
+        <button type="submit" class="button -icon -small" name="saveCart" value="1">
+          <?=$this->icon('save')?>
+          <?=$this->translate('Save')?>
+        </button>
+      <?php endif; ?>
+
+      <button type="submit" class="button -icon -small" name="email" value="1">
+        <?=$this->icon('mail')?>
+        <?=$this->translate('Email')?>
+      </button>
+
+      <?php $exportOptions = $this->export()->getActiveFormats('bulk'); ?>
+      <?php if (count($exportOptions) > 0): ?>
+        <button type="submit" class="button -icon -small" name="export" value="1">
+          <?=$this->icon('download')?>
+          <?=$this->translate('Export')?>
+        </button>
+      <?php endif; ?>
+
+      <button type="submit" class="button -icon -small dropdown-toggle" name="print" value="1">
+        <?=$this->icon('printer')?>
+        <?=$this->translate('Print')?>
+      </button>
+
+      <div class="btn-group" id="cartDelete">
+        <button type="submit" name="delete" class="button -icon -small dropdown-toggle" data-toggle="dropdown" id="cart-delete-label" value="1">
+          <?=$this->icon('trash')?>
+          <?=$this->translate('Delete')?>
+        </button>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="cart-delete-label">
+          <li>
+            <a
+              href="javascript:;"
+              id="cart-confirm-delete"
+              onClick="submitFormWithButton(this, 'delete')"
+              title="<?=$this->translate('confirm_delete')?>"
+            >
+              <?=$this->translate('confirm_dialog_yes')?>
+            </a>
+          </li>
+          <li>
+            <a href="javascript:;">
+              <?=$this->translate('confirm_dialog_no')?>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <?php
+      // TODO: Empty button commented out; it would lead to a second button
+      // column, and since the same result can be achieved by clicking
+      // "Select page" and then "Delete", it is not really needed.
+
+      /*
+      <div class="btn-group">
+        <button type="submit" class="button -small dropdown-toggle" name="empty" data-toggle="dropdown" id="cart-empty-label" value="1">
+          <!-- TODO: Icon? -->
+          <?=$this->translate('Empty Book Bag')?>
+        </button>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="cart-empty-label">
+          <li>
+            <a
+              href="javascript:;"
+              id="cart-confirm-empty"
+              onClick="submitFormWithButton(this, 'empty')"
+              title="<?=$this->translate('bookbag_confirm_empty')?>"
+            >
+              <?=$this->translate('confirm_dialog_yes')?>
+            </a>
+          </li>
+          <li>
+            <a href="javascript:;" onClick="$('.fa.fa-spinner').remove()">
+              <?=$this->translate('confirm_dialog_no')?>
+            </a>
+          </li>
+        </ul>
+      </div>
+      */
+      ?>
+    </div>
+  <?php endif; ?>
+
+  <p>
+    <input id="cart-select-all" type="checkbox" name="selectAll" class="checkbox-select-all">
+    <label for="cart-select-all"><?=$this->translate('select_page')?></label>
+  </p>
+
+  <hr>
+
+  <?=$this->render('cart/contents.phtml')?>
+</form>
+
+<?php
+  $script = <<<JS
+  function submitFormWithButton(link, name) {
+    $('#dropdown_value').attr('name', name).val(1);
+    $(link).closest('form').submit();
+  }
+JS;
+?>
+<?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, $script, 'SET') ?>
+<!-- fid_bbi: cart - cart - END -->

themes/fid_bbi/templates/cart/contents.phtml

+<!-- fid_bbi: cart - contents -->
+<?php
+/**
+ * Copied from themes/finc/templates/cart/contents.phtml
+ * Changes for FID BBI:
+ * - Remove nested labels
+ * - Add classes for styling
+ *
+ * @author Tobias Schäfer <ts@aspectis.net>
+ */
+?>
+
+<?php $records = $this->cart()->getRecordDetails(); ?>
+<?php if (!empty($records)): ?>
+  <ul class="unstyled-list">
+    <?php foreach ($records as $i => $record): ?>
+      <li class="cart-item">
+        <?=$this->record($record)->getCheckbox('cart')?>
+        <?php $describedById = $record->getSourceIdentifier() . '|' . $record->getUniqueId(); ?>
+        <div>
+          <a
+            id="<?=$describedById?>"
+            title="<?=$this->translate('View Record')?>"
+            href="<?=$this->recordLink()->getUrl($record)?>"
+            data-lightbox-ignore
+          >
+            <?=$this->escapeHtml($record->getBreadcrumb())?>
+            <?php
+            // finc-specific: Collect citation data:
+            $helper = $this->citation($record);
+            $recordtype = $record->getRecordType();
+            ?>
+            <?php if ($recordtype == 'ai'): ?>
+              <?=$helper->getCitation('APAAI')?>
+            <?php else: ?>
+              <?=$helper->getCitation('APA')?>
+            <?php endif; ?>
+          </a>
+        </div>
+      </li>
+    <?php endforeach; ?>
+  </ul>
+<?php else: ?>
+  <p class="alert alert-info"><?=$this->translate('bookbag_is_empty')?>.</p>
+<?php endif; ?>
+<!-- fid_bbi: cart - contents - END -->