refs #18774 [fid_bbi] redesign results list

for details see issue/18774

Known issues:
* Some lightbox popups are not yet fully styled.
* The histogram range select for publishing year is not included.
* SCSS needs minor cleanup.
* Format icon mappings are incomplete.

themes/fid_bbi/format-icon-mappings.json

+{
+  "_TODO": "Add missing icon mappings",
+  "Atlas": "",
+  "Book": "book",
+  "BookComponentPart": "book",
+  "Braille": "",
+  "BRDisc": "disc",
+  "CDROM": "software",
+  "Chart": "",
+  "ChipCartridge": "software",
+  "Collage": "",
+  "DiscCartridge": "software",
+  "Drawing": "",
+  "eBook": "book-online",
+  "Electronic": "",
+  "Filmstrip": "video",
+  "FlashCard": "",
+  "FloppyDisk": "software",
+  "Globe": "",
+  "Journal": "periodical",
+  "Kit": "",
+  "Manuscript": "",
+  "Map": "",
+  "Microfilm": "video",
+  "MotionPicture": "video",
+  "MusicalScore": "audio",
+  "MusicRecording": "audio",
+  "Newspaper": "periodical",
+  "Painting": "",
+  "Photonegative": "",
+  "Photo": "",
+  "PhysicalObject": "",
+  "Print": "",
+  "SensorImage": "",
+  "SerialComponentPart": "article",
+  "Serial": "periodical",
+  "Slide": "",
+  "Software": "software",
+  "SoundCassette": "audio",
+  "SoundDisc": "audio",
+  "SoundRecording": "audio",
+  "TapeCartridge": "software",
+  "TapeCassette": "software",
+  "TapeReel": "software",
+  "Transparency": "",
+  "Unknown": "",
+  "VideoCartridge": "video",
+  "VideoCassette": "video",
+  "VideoDisc": "video",
+  "VideoReel": "video",
+  "Video": "video"
+}

themes/fid_bbi/js/theme.js

+'use strict'
+
+// NOTE: Required packages/scripts:
+// css-element-queries/src/ResizeSensor
+// slim-select
+// sticky-sidebar
+
+const theme = {
+  rowTemplate: null,
+  scrollPos: 0,
+  init() {
+    theme.initSelects()
+
+    // Sticky sidebar
+    // NOTE: Requires ResizeSensor for automatic resizing
+    const sidebar = document.querySelector('#sidebar')
+    if (sidebar) {
+      // eslint-disable-next-line no-new
+      new StickySidebar('#sidebar', {
+        topSpacing: 28,
+        bottomSpacing: 28,
+        containerSelector: '#sidebar-container',
+        innerWrapperSelector: '#sidebar-inner',
+        minWidth: 1024, // NOTE: Must match the `$bp4` breakpoint + 1px as set in `scss/util/settings.scss`.
+      })
+    }
+
+    theme.updateScrolled()
+    window.addEventListener('scroll', theme.updateScrolled)
+
+    // Handle aria-based toggles
+    window.addEventListener('click', (event) => {
+      const button = event.target.closest('a, button')
+      if (!button) {
+        return
+      }
+
+      const targetId = button.getAttribute('aria-controls')
+      if (!targetId) {
+        return
+      }
+
+      const role = button.getAttribute('role')
+      const ariaExpanded = button.getAttribute('aria-expanded')
+
+      if (role === 'tab') {
+        selectTab(targetId)
+      } else if (ariaExpanded !== null) {
+        button.setAttribute('aria-expanded', ariaExpanded === 'false')
+        const targetElement = document.getElementById(targetId)
+        if (ariaExpanded === 'false') {
+          targetElement.removeAttribute('hidden')
+        } else {
+          targetElement.setAttribute('hidden', '')
+        }
+      } else {
+        theme.toggleSidebar(targetId)
+      }
+    })
+  },
+  initSelects(parentNode = document) {
+    const selects = parentNode.querySelectorAll('select')
+
+    for (let i = 0; i < selects.length; i++) {
+      const select = selects[i]
+      const isMultiSelect = select.hasAttribute('multiple')
+
+      if (!isMultiSelect && select.childElementCount < 6) {
+        continue
+      }
+
+      // eslint-disable-next-line no-new
+      new SlimSelect({
+        select,
+        closeOnSelect: !isMultiSelect,
+        placeholder: 'Auswahl',
+        searchText: 'Nichts gefunden',
+        searchPlaceholder: 'Filter',
+        searchFocus: true,
+        searchHighlight: true,
+        deselectLabel: '&times;',
+        hideSelectedOption: isMultiSelect,
+      })
+    }
+  },
+  scrollToTop() {
+    const duration = .25
+    const element = document.documentElement.scrollTop ? document.documentElement : document.body
+    const scrollTop = element.scrollTop
+
+    if (scrollTop < 0) {
+      return false
+    }
+
+    let currentTime = 0
+
+    const animationFrame = (() => {
+      return window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        function (callback) { window.setTimeout(callback, 1000 / 60) }
+    })()
+
+    function easeInOutSine(pos) {
+      return (-0.5 * (Math.cos(Math.PI * pos) - 1))
+    }
+
+    // Animation loop
+    function tick() {
+      currentTime += 1 / 60
+      const p = currentTime / duration
+      const t = easeInOutSine(p)
+
+      // NOTE: scrollTo() does not work in IE
+      if (p < 1) {
+        animationFrame(tick)
+        element.scrollTop = scrollTop + ((0 - scrollTop) * t)
+      } else {
+        element.scrollTop = 0
+      }
+    }
+
+    tick()
+
+    return false
+  },
+  selectTab(id) {
+    const tabsContainer = event.target.closest('.tabs')
+    const buttons = tabsContainer.querySelectorAll('.tabs_button')
+    const tabs = tabsContainer.querySelectorAll('.tabs_item')
+
+    for (let i = 0; i < buttons.length; ++i) {
+      buttons[i].classList.remove('-current')
+      buttons[i].setAttribute('aria-selected', false)
+    }
+
+    for (let i = 0; i < tabs.length; ++i) {
+      tabs[i].setAttribute('hidden', '')
+    }
+
+    event.target.closest('button').setAttribute('aria-selected', true)
+    document.getElementById(id).removeAttribute('hidden')
+  },
+  toggleFacets() {
+    event.target.parentElement.classList.toggle('-collapsed')
+  },
+  toggleSidebar(id) {
+    const sidebar = document.getElementById(id)
+    if (!sidebar.classList.contains('-open')) {
+      // Focus input when sidebar is halfway visible
+      const input = sidebar.querySelector('[data-focus-off-canvas]')
+      if (input) {
+        setTimeout(() => { input.select() }, 125)
+      }
+
+      theme.scroll.lock()
+    } else {
+      theme.scroll.unlock()
+    }
+
+    sidebar.classList.toggle('-open')
+
+    // TODO: aria-expanded should be set, but multiple buttons may be affected
+  },
+  // Toggling "scrolled" for to-top button
+  updateScrolled() {
+    if (document.documentElement.scrollTop > 84 || document.body.scrollTop > 84) {
+      document.body.classList.add('-scrolled')
+    } else {
+      document.body.classList.remove('-scrolled')
+    }
+  },
+  scroll: {
+    lock() {
+      theme.scrollPos = document.documentElement.scrollTop || document.body.scrollTop
+      document.body.style.top = `-${theme.scrollPos}px`
+      document.body.style.marginBottom = `-${theme.scrollPos}px`
+      document.body.style.height = `calc(100vh + ${theme.scrollPos}px)`
+      document.body.style.overflow = 'hidden'
+      document.body.style.position = 'relative'
+    },
+    unlock() {
+      document.body.style = ''
+
+      setTimeout(() => {
+        document.documentElement.scrollTop = document.body.scrollTop = theme.scrollPos
+      })
+    },
+  },
+}
+
+window.addEventListener('load', theme.init)
+
+// Make `theme` globally available
+window.theme = theme

themes/fid_bbi/languages/de.ini

+%%count%% results = %%count%% Ergebnisse
+Active Filters = Aktive Filter
+Add filter: = Filter hinzufügen:
+Add filter: NOT %%text%% = Filter hinzufügen: NICHT %%text%%
+Add to Book Bag = Zur Merkliste hinzufügen
+Add to favorites = Zu Favoriten hinzufügen
+Back = Zurück
 BBI Blog = BBI-Blog
+Book Bag = Merkliste
+Close = Schließen
 Close functions & filters = Funktionen & Filter schließen
 FAQs = Häufige Fragen
 Find = Suchen
 For Subject Specialists = Für Fachreferate
+From the year = Vom Jahr
+Functions & Filters = Funktionen & Filter
+History = Verlauf
 New Publications = Neuerscheinungen
 Open navigation = Navigation öffnen
 Open search = Suche öffnen
+Page %%current%% of %%total%% = Seite %%current%% von %%total%%
 Recent Blog Posts = Neueste Blog-Einträge
+Remove all filters = Alle Filter entfernen
 Scroll to top = Nach oben scrollen
+Search: %%lookfor%% = Suche: %%lookfor%%
+Show all = Alle anzeigen
+Show functions & filters = Funktionen & Filter anzeigen
+Show less = Weniger anzeigen
+Sorted by = Sortiert nach
 Team = Team
+the year = zum Jahr
 This field is required = Pflichtfeld
+to = bis
 
 home_about_1 = <p class="-columns">Der Fachinformationsdienst Buch-, Bibliotheks- und Informations­wissen­schaft (FID BBI) stellt Spezial­literatur und forschungs­relevante Informa­tionen für Forschende der drei Diszi­plinen zur Verfügung. Das Herz­stück bildet das umfangreiche Recherche­werkzeug in dem Forschende, Lehrende und Studie­rende in über 3 Millionen Daten­sätzen gezielt recher­chieren können. Der Daten­pool speist sich aus über 30 Daten­quellen, die regel­mäßig aktuali­siert und ergänzt werden.</p>
 home_about_2 = <h2>Anregungen und Feedback</h2><p>Der FID BBI richtet sich an den Bedarfen der Forschenden aus. Vermissen Sie eine Datenquelle, können Sie einen bestimmten Titel nicht finden oder suchen Sie ausführlichere Informationen zum FID BBI, <a href="%%feedback_url%%">kontaktieren Sie uns</a> oder <a href="%%blog_url%%">besuchen Sie unser Blog</a>.</p>

themes/fid_bbi/scss/base/common.scss

@@ -203,6 +203,7 @@ p {
     @media #{$bp3} {
       column-gap: g(2);
       columns: 2;
+      max-width: none;
     }
   }
 
@@ -254,7 +255,7 @@ ul {
 
   li {
     &::before {
-      background: $color-a;
+      background: currentColor;
       content: '';
       height: g(.25);
       margin: round($line-height / 2 - g(.25) / 2) 0 0 g(-.75);
@@ -268,3 +269,7 @@ video {
   height: auto;
   max-width: 100%;
 }
+
+.hidden {
+  display: none !important;
+}

themes/fid_bbi/scss/base/form.scss

@@ -37,6 +37,7 @@ fieldset {
 
 form {
   @include paragraph;
+  max-width: none;
 
   &:last-child {
     margin-bottom: 0;

themes/fid_bbi/scss/blocks/alert.scss

@@ -2,15 +2,11 @@
   @include button-icon-bg;
   background: $shade-weak;
   font-weight: 500;
-  margin: 0 0 g();
+  margin: 0 auto g();
   padding: g(.5) g();
   padding-left: g(2.75);
   position: relative;
 
-  &::before {
-    width: g(2.25);
-  }
-
   &.-success {
     color: $text-muted-color;
   }
@@ -27,6 +23,10 @@
     color: $text-color;
   }
 
+  &::before {
+    width: g(2.25);
+  }
+
   > .icon {
     margin-left: g(-2.25);
   }

themes/fid_bbi/scss/blocks/form.scss

@@ -37,10 +37,9 @@
 .form_row {
   @include paragraph;
   align-items: flex-start;
-
-  @media #{$bp3} {
-    display: flex;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between; // TODO: Test this on all forms
 
   &:last-child {
     margin-bottom: 0;
@@ -73,7 +72,8 @@
   > [type=text],
   > [type=url],
   > select,
-  > textarea {
+  > textarea,
+  > .form-control {
     margin: 0;
     width: 100%;
 
@@ -97,6 +97,11 @@
       }
     }
   }
+
+  // "Back" link on some forms
+  > .btn-link {
+    margin: g(.5) g(.5) g(.5) 0;
+  }
 }
 
 .form_label {
@@ -134,3 +139,8 @@
     width: 100%;
   }
 }
+
+// TODO: Move?
+.help-block {
+  margin-top: g(.5);
+}

themes/fid_bbi/scss/blocks/main.scss

@@ -5,14 +5,14 @@
   padding: 0 g();
 }
 
-.main_text {
-  margin: 0 auto;
-  max-width: $line-width;
-}
-
 .main_wrap {
   margin: 0 auto;
   max-width: 100%;
   position: relative;
   width: $max-width;
+
+  // For elements like `<div>* required</div>`
+  > div:not([class]) {
+    @include paragraph;
+  }
 }

themes/fid_bbi/scss/blocks/modal.scss

@@ -42,7 +42,7 @@
   overflow: auto;
   transform: translateY(g(-1));
   transition: transform $td;
-  width: $line-width + g(2);
+  width: $line-width;
 
   // TODO: Merge classes
   .modal.in &,

themes/fid_bbi/scss/blocks/pagination.scss

+.pagination {
+  @include paragraph;
+  align-items: center;
+  display: flex;
+  font-weight: 500;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .results_header + & {
+    margin-top: g(-.25); // align with sidebar buttons
+  }
+
+  @media #{$bp5} {
+    margin-left: g(4);
+  }
+}
+
+.pagination_control {
+  &:last-child {
+    text-align: right;
+  }
+}
+
+.pagination_link {
+  @include button-small;
+  display: inline-block;
+  padding: (g(.25) - 2px);
+
+  @include hover {
+    box-shadow: none;
+  }
+}
+
+.pagination_link-label {
+  @include sr-only;
+}
+
+.pagination_page {
+  flex: 1;
+  margin: 0 g(.5);
+  text-align: center;
+}

themes/fid_bbi/scss/blocks/result.scss

 .result {
   display: flex;
+  margin-bottom: g();
   position: relative;
 
   a {
     position: relative;
   }
-
-  & + & {
-    margin-top: g();
-  }
 }
 
 .result_actions {
-  margin-left: g();
+  margin: g(-.25) g(.25) g(-.25) g(.25 + 1);
 
   a {
     display: block;
-    margin: g(-.25);
+    margin: g(.25) g(-.25) g(-.25);
     padding: g(.25);
 
-    + a {
-      margin-top: g(.25);
-    }
-
     @include hover {
       background: $button-hover-bg;
       box-shadow: none;
     }
-
-    // Some tooltips contain 2 messages, show only the 1st one by default
-    .tooltip span + span {
-      display: none;
-    }
   }
 
+  // TODO
+  a.cart-remove,
   a.-selected {
     .icon {
       animation: beat $td 1;
@@ -56,14 +46,6 @@
         fill: currentColor;
       }
     }
-
-    .tooltip span {
-      display: none;
-
-      + span {
-        display: block;
-      }
-    }
   }
 }
 

themes/fid_bbi/scss/blocks/results.scss

@@ -28,6 +28,10 @@
   }
 }
 
+.results_count {
+  margin: g(.25);
+}
+
 .results_footer {
   margin-top: g(1.5);
   overflow: hidden;
@@ -59,24 +63,14 @@
 }
 
 .results_header {
+  align-items: baseline;
   display: flex;
-  flex-direction: column-reverse;
   flex-wrap: wrap;
   font-weight: 500;
-  justify-content: center;
-  margin: 0 0 g(1);
-  max-width: calc(100vw - #{g(2)});
-  text-align: center;
-
-  @media #{$bp3} {
-    flex-direction: column;
-    justify-content: space-between;
-    margin: g(-.25) g(-.25) g(-.25 + 1);
-    text-align: left;
-  }
+  justify-content: space-between;
+  margin: g(-.25) g(-.25) g(-.25 + 1);
 
   @media #{$bp5} {
-    justify-content: flex-start;
     margin-left: g(-.25 + 4);
   }
 }
@@ -90,11 +84,55 @@
   }
 }
 
+.results_pagination {
+  margin: g(.25);
+  width: 100%;
+}
+
+.results_sidebar-toggle {
+  background: $link-color;
+  border: 0;
+  bottom: 0;
+  color: #fff;
+  font-family: text-font, sans-serif;
+  font-size: $font-size-small;
+  font-weight: bold;
+  padding: g(.25) g(.5);
+  position: fixed;
+  right: 0;
+  transform: skew(-$skew);
+  transform-origin: bottom right;
+  z-index: 1;
+
+  @media #{$bp4} {
+    display: none;
+  }
+
+  @include hover {
+    background: $link-hover-color;
+    color: #fff;
+  }
+
+  > * {
+    display: inline-block;
+    transform: skew($skew);
+  }
+
+  .layout.-no-scroll & {
+    display: none;
+  }
+}
+
 .results_sort {
-  max-width: 100%;
+  margin: g(.25);
+  width: 100%;
+
+  @media #{$bp1} {
+    width: auto;
+  }
 
   @media #{$bp3} {
-    margin: g(.25);
+    text-align: right;
   }
 
   label {
@@ -102,12 +140,18 @@
   }
 
   select {
-    display: block;
     margin: 0 auto;
+    vertical-align: middle;
+    width: 100%;
+
+    @media #{$bp1} {
+      width: auto;
+    }
 
     @media #{$bp3} {
       display: inline-block;
       margin: 0 0 0 .3em;
+      width: auto;
     }
   }
 }

themes/fid_bbi/scss/blocks/search.scss

 .search {
   color: #fff;
   margin: 0 auto;
-  max-width: $line-width;
+  max-width: $line-width - g(2);
 
   @media #{$bp5} {
     max-width: none;
@@ -36,6 +36,10 @@
   @media #{$bp3} {
     display: none;
   }
+
+  h2 {
+    color: $heading-color;
+  }
 }
 
 .search_input {

themes/fid_bbi/scss/blocks/sidebar.scss

 .sidebar {
   @include off-canvas;
-  flex: 0 0 g(12);
-  margin: 0 g();
-  max-width: g(12);
   padding-left: g();
   padding-right: g();
   will-change: min-height; // For sticky sidebar
 
   @media #{$bp4} {
     @include on-canvas;
+    flex: 0 0 g(12);
+    margin: 0 g();
+    max-width: g(12);
     padding-left: 0;
     padding-right: 0;
   }
@@ -28,37 +28,3 @@
   transform: translate3d(0, 0, 0); // For sticky sidebar
   will-change: position, transform; // For sticky sidebar
 }
-
-.sidebar_toggle {
-  background: $link-color;
-  border: 0;
-  bottom: 0;
-  color: #fff;
-  font-family: text-font, sans-serif;
-  font-size: $font-size-small;
-  font-weight: bold;
-  padding: g(.25) g(.5);
-  position: fixed;
-  right: 0;
-  transform: skew(-$skew);
-  transform-origin: bottom right;
-  z-index: 1;
-
-  @media #{$bp4} {
-    display: none;
-  }
-
-  @include hover {
-    background: $link-hover-color;
-    color: #fff;
-  }
-
-  > * {
-    display: inline-block;
-    transform: skew($skew);
-  }
-
-  .layout.-no-scroll & {
-    display: none;
-  }
-}

themes/fid_bbi/scss/blocks/tagline.scss

@@ -3,6 +3,7 @@
   color: $color-a;
   font: #{round($font-size-special * $ratio)}/#{$line-height * 1.5} display-font, sans-serif;
   margin: g(1.75) auto g(2);
+  max-width: none;
   position: relative;
   text-align: center;
 

themes/fid_bbi/scss/compiled.scss

@@ -38,6 +38,7 @@
 @import 'blocks/main';
 @import 'blocks/modal';
 @import 'blocks/nav';
+@import 'blocks/pagination';
 @import 'blocks/posts';
 @import 'blocks/post';
 @import 'blocks/record';

themes/fid_bbi/scss/mixins/button.scss

@@ -66,6 +66,7 @@
     }
 
     @if ($position == right) {
+      float: right;
       margin: 0 g(-.5) 0 g(.75);
 
       @if ($size == big) {

themes/fid_bbi/scss/mixins/paragraph.scss

 @mixin paragraph {
-  margin: 0 0 g();
+  margin: 0 auto g();
+  max-width: g(30);
 
   &:last-child {
     margin-bottom: 0;

themes/fid_bbi/scss/plugins/slim-select.scss

@@ -3,6 +3,24 @@
 .ss-main {
   color: $text-color;
 
+  .ss-single-selected {
+    height: g(2);
+
+    .ss-arrow {
+      margin: 0 11px 0 1px; // same position as SVG arrow in normal selects
+      order: -1;
+
+      span {
+        border-color: $text-color;
+      }
+    }
+
+    .placeholder {
+      font-weight: 500;
+    }
+  }
+
+  .ss-single-selected,
   .ss-multi-selected {
     background: mix(#000, #fff, 5);
     border: 2px solid;

themes/fid_bbi/scss/util/settings.scss

@@ -25,7 +25,7 @@ $font-size: 18.666666px; // $grid / 1.5
 $font-size-small: 16px;
 $font-size-special: 23px; // Match small text in logo
 $line-height: g();
-$line-width: g(28);
+$line-width: g(30);
 $max-width: g(48);
 
 // Breakpoints (mobile first)