From 4561c0ab42a9efbcc7a5dec413e36149b192fd06 Mon Sep 17 00:00:00 2001
From: Aspectis <tobias@aspectis.net>
Date: Tue, 13 Apr 2021 00:41:09 +0200
Subject: [PATCH] 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 | 13 ++
themes/fid_bbi/scss/blocks/modal.scss | 5 +
themes/fid_bbi/scss/compiled.scss | 1 +
themes/fid_bbi/scss/mixins/button.scss | 2 +-
themes/fid_bbi/templates/cart/cart.phtml | 135 +++++++++++++++++++
themes/fid_bbi/templates/cart/contents.phtml | 46 +++++++
6 files changed, 201 insertions(+), 1 deletion(-)
create mode 100644 themes/fid_bbi/scss/blocks/cart.scss
create mode 100644 themes/fid_bbi/templates/cart/cart.phtml
create mode 100644 themes/fid_bbi/templates/cart/contents.phtml
diff --git a/themes/fid_bbi/scss/blocks/cart.scss b/themes/fid_bbi/scss/blocks/cart.scss
new file mode 100644
index 00000000000..c4a4baa1fe1
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/cart.scss
@@ -0,0 +1,13 @@
+.cart-controls {
+ display: inline-flex;
+ flex-wrap: wrap;
+ margin: g(-.25) g(-.25) g(1 - .25);
+
+ > * {
+ margin: g(.25);
+ }
+}
+
+.cart-item {
+ display: flex;
+}
diff --git a/themes/fid_bbi/scss/blocks/modal.scss b/themes/fid_bbi/scss/blocks/modal.scss
index d202d95d3e5..b788999bbdf 100644
--- a/themes/fid_bbi/scss/blocks/modal.scss
+++ b/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);
}
diff --git a/themes/fid_bbi/scss/compiled.scss b/themes/fid_bbi/scss/compiled.scss
index bf5e23728cd..d8357eaa187 100644
--- a/themes/fid_bbi/scss/compiled.scss
+++ b/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';
diff --git a/themes/fid_bbi/scss/mixins/button.scss b/themes/fid_bbi/scss/mixins/button.scss
index 0a6d092fa2a..28d2b2251c1 100644
--- a/themes/fid_bbi/scss/mixins/button.scss
+++ b/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);
diff --git a/themes/fid_bbi/templates/cart/cart.phtml b/themes/fid_bbi/templates/cart/cart.phtml
new file mode 100644
index 00000000000..7c45b349dd6
--- /dev/null
+++ b/themes/fid_bbi/templates/cart/cart.phtml
@@ -0,0 +1,135 @@
+<!-- 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 -->
diff --git a/themes/fid_bbi/templates/cart/contents.phtml b/themes/fid_bbi/templates/cart/contents.phtml
new file mode 100644
index 00000000000..4fd150a1f81
--- /dev/null
+++ b/themes/fid_bbi/templates/cart/contents.phtml
@@ -0,0 +1,46 @@
+<!-- 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 -->
--
GitLab