Fix and unify record toolbar entries.

- Remove invalid role from <li>. - Add proper classes for icon links so that the text-decoration rule for '.action-toolbar .icon-link__label' works and provides consistency with bulk actions toolbar. - Ensure that cart buttons use same classes as other buttons in record toolbar. - Ensure that <a> of cart buttons are immediate children of <li> to apply correct styling. - Remove useless styles.
EreMaijala · Feb 13, 2025 · 31ec925 · 31ec925
1 parent bef2866
commit 31ec925
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 78 deletions.
diff --git a/themes/bootstrap5/css/compiled.css b/themes/bootstrap5/css/compiled.css
diff --git a/themes/bootstrap5/scss/bootstrap.scss b/themes/bootstrap5/scss/bootstrap.scss
@@ -376,19 +376,6 @@ footer {
   }
 }
 
-.nav .btn-bookbag-toggle { float: left; }
-.nav .btn-bookbag-toggle a {
-  display: block;
-  padding: $nav-link-padding;
-  text-decoration: none;
-  &:hover,
-  &:focus {
-    @extend .btn-outline-secondary;
-    text-decoration: none;
-    background-color: $nav-link-hover-bg;
-  }
-}
-
 /* ------ Devtools ------ */
 .translation-output {
   width: 100%;

diff --git a/themes/bootstrap5/scss/components/record.scss b/themes/bootstrap5/scss/components/record.scss
@@ -69,21 +69,6 @@
 .record .format:last-child::after { content: ""; }
 .record-previews { margin-top: .5rem; }
 
-/* ------ Nav ------ */
-.record-nav.nav { margin-bottom: 1rem; }
-.record-nav > li,
-.btn-bookbag-toggle { width: 100%; }
-.record-nav > li > a { padding: .5rem; }
-.record-nav > li > a,
-.btn-bookbag-toggle { text-align: center; }
-@media(min-width: 768px) {
-  .record-nav > li,
-  .btn-bookbag-toggle { width: auto; }
-  .record-nav > li > a { padding: $nav-link-padding; }
-  .record-nav > li > a,
-  .btn-bookbag-toggle { text-align: left; }
-}
-
 /* ------ Comments ------ */
 .comment-label,
 .comment-name { font-style: italic; }

diff --git a/themes/bootstrap5/scss/components/search.scss b/themes/bootstrap5/scss/components/search.scss
@@ -315,16 +315,13 @@ header .container.navbar { margin-bottom: 0; }
   }
 }
 
-.btn-bookbag-toggle,
 .result-links a {
   line-height: 1.5;
 }
 
 .result-links .alert { margin: 0; }
 .result-formats { margin-bottom: .5rem; }
 
-.btn-bookbag-toggle form { display: inline; }
-
 .savedLists {
   @extend .alert;
   @extend .alert-info;
@@ -653,8 +650,6 @@ body.rtl {
 }
 
 .toolbar-btn,
-.record-nav .cart-add,
-.record-nav .cart-remove,
 .reset-filters-btn,
 .clear-selection {
   border: 0;
@@ -669,8 +664,6 @@ body.rtl {
 }
 
 .toolbar-btn,
-.record-nav .cart-add,
-.record-nav .cart-remove,
 .reset-filters-btn {
   @extend .icon-link;
   gap: 0.25rem;

diff --git a/themes/bootstrap5/templates/RecordDriver/DefaultRecord/toolbar.phtml b/themes/bootstrap5/templates/RecordDriver/DefaultRecord/toolbar.phtml
@@ -7,45 +7,55 @@
 <nav class="record-nav" aria-label="<?=$this->transEscAttr('ajaxview_label_tools'); ?>">
   <ul class="action-toolbar">
     <?php if (count($this->driver->getCitationFormats()) > 0): ?>
-      <li role="none">
-        <a class="cite-record toolbar-btn" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Cite'))?>" rel="nofollow">
-          <?=$this->icon('cite') ?>
-          <?=$this->transEsc('Cite this')?>
+      <li>
+        <a class="cite-record toolbar-btn icon-link" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Cite'))?>" rel="nofollow">
+          <?=$this->icon('cite', 'icon-link__icon') ?>
+          <span class="icon-link__label">
+            <?=$this->transEsc('Cite this')?>
+          </span>
         </a>
       </li>
     <?php endif; ?>
 
     <?php if ($this->accountCapabilities()->getSmsSetting() !== 'disabled'): ?>
-      <li role="none">
-        <a class="sms-record toolbar-btn" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'SMS'))?>" rel="nofollow">
-          <?=$this->icon('send-sms') ?>
-          <?=$this->transEsc('Text this')?>
+      <li>
+        <a class="sms-record toolbar-btn icon-link" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'SMS'))?>" rel="nofollow">
+          <?=$this->icon('send-sms', 'icon-link__icon') ?>
+          <span class="icon-link__label">
+            <?=$this->transEsc('Text this')?>
+          </span>
         </a>
       </li>
     <?php endif; ?>
 
     <?php if ($this->accountCapabilities()->isEmailActionAvailable()): ?>
-      <li role="none">
-        <a class="mail-record toolbar-btn" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Email'))?>" rel="nofollow">
-          <?=$this->icon('send-email') ?>
-          <?=$this->transEsc('Email this')?>
+      <li>
+        <a class="mail-record toolbar-btn icon-link" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Email'))?>" rel="nofollow">
+          <?=$this->icon('send-email', 'icon-link__icon') ?>
+          <span class="icon-link__label">
+            <?=$this->transEsc('Email this')?>
+          </span>
         </a>
       </li>
     <?php endif; ?>
 
     <li>
-      <a class="print-record toolbar-btn" href="<?=$this->url()->addQueryParameters(['print' => true])?>" rel="nofollow">
-        <?=$this->icon('print') ?>
-        <?=$this->transEsc('Print')?>
+      <a class="print-record toolbar-btn icon-link" href="<?=$this->url()->addQueryParameters(['print' => true])?>" rel="nofollow">
+        <?=$this->icon('print', 'icon-link__icon') ?>
+        <span class="icon-link__label">
+          <?=$this->transEsc('Print')?>
+        </span>
       </a>
     </li>
 
     <?php $exportFormats = $this->export()->getFormatsForRecord($this->driver); ?>
     <?php if (count($exportFormats) > 0): ?>
-      <li role="none" class="dropdown">
-        <a class="export-toggle toolbar-btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Export', [], '', ['excludeSearchId' => true]))?>" rel="nofollow" aria-expanded="false" aria-controls="export-options">
-          <?=$this->icon('export') ?>
-          <?=$this->transEsc('Export Record') ?>
+      <li class="dropdown">
+        <a class="export-toggle toolbar-btn dropdown-toggle icon-link" data-bs-toggle="dropdown" aria-haspopup="true" href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Export', [], '', ['excludeSearchId' => true]))?>" rel="nofollow" aria-expanded="false" aria-controls="export-options">
+          <?=$this->icon('export', 'icon-link__icon') ?>
+          <span class="icon-link__label">
+            <?=$this->transEsc('Export Record') ?>
+          </span>
         </a>
         <ul class="dropdown-menu" id="export-options" role="menu">
           <?php foreach ($exportFormats as $exportFormat): ?>
@@ -60,37 +70,41 @@
     <?php endif; ?>
 
     <?php if ($this->userlist()->getMode() !== 'disabled'): ?>
-      <li role="none">
+      <li>
         <?php if ($this->permission()->allowDisplay('feature.Favorites')): ?>
-          <a class="save-record toolbar-btn" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Save'))?>" rel="nofollow">
-            <?=$this->icon('user-favorites') ?>
-            <?=$this->transEsc('Add to favorites')?>
+          <a class="save-record toolbar-btn icon-link" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Save'))?>" rel="nofollow">
+            <?=$this->icon('user-favorites', 'icon-link__icon') ?>
+            <span class="icon-link__label">
+              <?=$this->transEsc('Add to favorites')?>
+            </span>
           </a>
         <?php elseif ($block = $this->permission()->getAlternateContent('feature.Favorites')): ?>
           <?=$block ?>
         <?php endif; ?>
       </li>
     <?php endif; ?>
     <?php if (!empty($addThis)): ?>
-      <li role="none">
-        <a class="addThis addthis_button" href="https://www.addthis.com/bookmark.php?v=250&amp;pub=<?=urlencode($addThis)?>">
-          <?=$this->icon('addthis-bookmark') ?>
-          <?=$this->transEsc('Bookmark')?>
+      <li>
+        <a class="addThis addthis_button icon-link" href="https://www.addthis.com/bookmark.php?v=250&amp;pub=<?=urlencode($addThis)?>">
+          <?=$this->icon('addthis-bookmark', 'icon-link__icon') ?>
+          <span class="icon-link__label">
+            <?=$this->transEsc('Bookmark')?>
+          </span>
         </a>
       </li>
     <?php endif; ?>
 
     <?php if ($this->cart()->isActive()): ?>
-      <li>
-        <?=$this->render('record/cart-buttons.phtml', ['id' => $this->driver->getUniqueId(), 'source' => $this->driver->getSourceIdentifier()]); ?>
-      </li>
+      <?=$this->render('record/cart-buttons.phtml', ['id' => $this->driver->getUniqueId(), 'source' => $this->driver->getSourceIdentifier(), 'inToolbar' => true]); ?>
     <?php endif; ?>
 
     <?php if ($this->config()->get('config')->Record->permanent_link ?? true): ?>
-      <li role="none">
-        <a class="permalink-record toolbar-btn" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Permalink'))?>" rel="nofollow">
-          <?=$this->icon('external-link') ?>
-          <?=$this->transEsc('permanent_link')?>
+      <li>
+        <a class="permalink-record toolbar-btn icon-link" data-lightbox href="<?=$this->escapeHtmlAttr($this->recordLinker()->getActionUrl($this->driver, 'Permalink'))?>" rel="nofollow">
+          <?=$this->icon('external-link', 'icon-link__icon') ?>
+          <span class="icon-link__label">
+            <?=$this->transEsc('permanent_link')?>
+          </span>
         </a>
       </li>
     <?php endif ?>

diff --git a/themes/bootstrap5/templates/record/cart-buttons.phtml b/themes/bootstrap5/templates/record/cart-buttons.phtml
@@ -1,14 +1,17 @@
 <?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 href="#" class="cart-add result-link icon-link hidden<?php if (!$cart->contains($cartId)): ?> correct<?php endif ?>">
+  <?php
+    $cartId = $this->source . '|' . $this->id;
+    $btnType = $this->inToolbar ? 'toolbar-btn' : 'btn-result';
+  ?>
+  <<?=$this->inToolbar ? 'li' : 'span'?> class="btn-bookbag-toggle" data-cart-id="<?=$this->escapeHtmlAttr($this->id)?>" data-cart-source="<?=$this->escapeHtmlAttr($this->source)?>">
+    <a href="#" class="cart-add <?=$btnType?> icon-link hidden<?php if (!$cart->contains($cartId)): ?> correct<?php endif ?>">
       <?=$this->icon('cart-add', 'icon-link__icon') ?>
       <span class="icon-link__label"><?=$this->transEsc('Add to Book Bag') ?></span>
     </a>
-    <a href="#" class="cart-remove result-link icon-link hidden<?php if ($cart->contains($cartId)): ?> correct<?php endif ?>">
+    <a href="#" class="cart-remove <?=$btnType?> icon-link hidden<?php if ($cart->contains($cartId)): ?> correct<?php endif ?>">
       <?=$this->icon('cart-remove', 'icon-link__icon') ?>
       <span class="icon-link__label"><?=$this->transEsc('Remove from Book Bag') ?></span>
     </a>
-  </span>
+  </<?=$this->inToolbar ? 'li' : 'span'?>>
 <?php endif; ?>
diff --git a/themes/local_theme_example/css/compiled.css b/themes/local_theme_example/css/compiled.css
diff --git a/themes/sandal5/css/compiled.css b/themes/sandal5/css/compiled.css
diff --git a/themes/sandal5/scss/sandal.scss b/themes/sandal5/scss/sandal.scss
@@ -173,7 +173,6 @@ a:hover .login-dropdown-caret {
 .record-nav {
   display: table;
   margin-left: auto;
-  margin-top: 1rem;
   margin-right: auto;
 }
 .info-col h3 {