Subpage Navigation via Buttons (#170)

* feat: add switch-view button * feat: remove dropdowns from navbar * feat: add zenodo link to data page * feat: add switch-view button to list * style: format code * feat: remove single year dropdown * feat: add switch-view button to timeline-edtf * feat: add switch-view button to cloud * feat: improve search box styling * style: format code * feat: implement consistent btn-group layout * feat: improve hyperlinking * Revert "feat: update navbar elements" This reverts commit 9d939e094ef654cc9507a7b098f7488581bd4fd5. * feat: restructure data.html * feat: improve css styling * fix: make btn-group work on small screens * Update reset button event handling Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: update heading and translation * feat: align btn-group-toggle styling * feat: improve btn-group CSS * feat: add view toggle for small screens * feat: update translations * fix: improve localization * style: run prettier * fix: fix typo * fix: improve resize handling * fix: remove duplicate line --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Moritz Mähr <maehr@users.noreply.github.com>
Stadt-Geschichte-Basel · Nov 6, 2024 · 6fd1525 · 6fd1525
1 parent a62bf3a
commit 6fd1525
Show file tree

Hide file tree

Showing 13 changed files with 486 additions and 130 deletions.
diff --git a/_data/config-nav.csv b/_data/config-nav.csv
@@ -1,13 +1,6 @@
 display_name,stub,dropdown_parent,external_link
-Sammlung,,,
-Durchsuchen,/browse.html,Sammlung,
-Themen,/subjects.html,Sammlung,
-Zeitachse,/timeline.html,Sammlung,
-Epochen,/eras.html,Sammlung,
+Sammlung,/browse.html,,
 Bibliografie,https://www.zotero.org/groups/5004193/stadt.geschichte.basel/library,,true
-Daten,,,
-Metadaten,/data.html,Daten,
-Datenarchiv,https://zenodo.org/communities/stadt-geschichte-basel/,Daten,true
-Quellcode,https://github.com/Stadt-Geschichte-Basel/,Daten,true
+Daten,/data.html,,
 Portal,https://stadtgeschichtebasel.ch/,,true
 Über,/about.html,,
diff --git a/_data/translations.yml b/_data/translations.yml
@@ -426,6 +426,22 @@ _includes:
         de: "Element anzeigen"
     modal-hash-js.html:
     table-js.html:
+      download:
+        en: "Download"
+        es: "Descargar"
+        de: "Herunterladen"
+      filtered_metadata_excel:
+        en: "Filtered Metadata (Excel)"
+        es: "Metadatos Filtrados (Excel)"
+        de: "Gefilterte Metadaten (Excel)"
+      filtered_metadata_csv:
+        en: "Filtered Metadata (CSV)"
+        es: "Metadatos Filtrados (CSV)"
+        de: "Gefilterte Metadaten (CSV)"
+      more_exports:
+        en: "More Exports"
+        es: "Más Exportaciones"
+        de: "Weitere Exporte"
     timeline-js.html:
   collection-banner.html:
     featured-items:
@@ -607,6 +623,37 @@ _layouts:
       en: "Loading"
       es: "Cargando"
       de: "Laden"
+    objects:
+      en: "Objects"
+      de: "Objekte"
+    timeline:
+      en: "Timeline"
+      es: "Línea de tiempo"
+      de: "Zeitachse"
+    subjects:
+      en: "Subjects"
+      es: "Temas"
+      de: "Themen"
+    eras:
+      en: "Eras"
+      es: "Épocas"
+      de: "Epochen"
+    view-objects:
+      en: "Show object view"
+      de: "Zeige Objektansicht"
+    view-timeline:
+      en: "Show objects on timeline"
+      de: "Zeige Objekte auf einer Zeitachse"
+    view-subjects:
+      en: "Show list of subjects"
+      de: "Zeige Liste mit Schlagwörtern"
+    view-eras:
+      en: "Show list of eras"
+      de: "Zeige Liste der Epochen"
+    switch-view:
+      en: "Switch view"
+      es: "Cambiar Vista"
+      de: "Ansicht wechseln"
   cloud.html:
   data.html:
     link:

diff --git a/_includes/js/switch-view-js.html b/_includes/js/switch-view-js.html
@@ -0,0 +1,38 @@
+<script>
+  const switchView = document.getElementById('switch-view');
+  const buttons = Array.from(switchView ? switchView.children : []);
+
+  function toggleButtonView() {
+    if (!switchView) return;
+
+    switchView.classList.add('btn-group-vertical');
+    switchView.classList.remove('btn-group');
+
+    // Hide last button (toggle) from vertical display
+    buttons.forEach((button, index) => {
+      button.style.display = index === buttons.length - 1 ? 'none' : 'block';
+    });
+  }
+
+  // Resizing with debounce
+  const debounce = (fn, delay) => {
+    let timeoutId;
+    return (...args) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn(...args), delay);
+    };
+  };
+
+  const handleResize = () => {
+    if (!switchView) return;
+
+    if (window.innerWidth > 576) {
+      switchView.classList.add('btn-group', 'btn-group-toggle', 'd-flex');
+      switchView.classList.remove('btn-group-vertical');
+
+      buttons.forEach((button) => (button.style.display = ''));
+    }
+  };
+
+  window.addEventListener('resize', debounce(handleResize, 250));
+</script>
diff --git a/_includes/js/table-js.html b/_includes/js/table-js.html
@@ -1,5 +1,17 @@
 {% assign fcount = site.data['config-table'] | size %}
 {% assign lang = site.lang %}
+{% assign download_dropdown = site.data.translations._includes.js['table-js.html'].download[site.lang]
+  | default: 'Download'
+%}
+{% assign excel_export = site.data.translations._includes.js['table-js.html'].filtered_metadata_excel[site.lang]
+  | default: 'Filtered Metadata (Excel)'
+%}
+{% assign csv_export = site.data.translations._includes.js['table-js.html'].filtered_metadata_csv[site.lang]
+  | default: 'Filtered Metadata (CSV)'
+%}
+{% assign more_exports = site.data.translations._includes.js['table-js.html'].more_exports[site.lang]
+  | default: 'More Exports'
+%}
 {% include data-download-modal.html show_button=false %}
 <!-- load DataTables with jquery bundled -->
 <script
@@ -23,28 +35,27 @@
           "paging": true,
           "lengthMenu": [[ 25, 50, 100, -1], [ 25, 50, 100, "∞"]],
           // add download features
-          dom: 'B<"row mt-2"<"col-md-6"l><"col-md-6"f>>t<"row"<"col-md-6"i><"col-md-6"p>>',
+          dom: 'B<"d-flex justify-content-between align-items-center flex-nowrap mt-2"<"pagination-controls"l><"search-box"f>>t<"row"<"col-md-6"i><"col-md-6"p>>',
           buttons: [
               {
                   extend: 'collection',
-                  text: 'Tabelle exportieren',
+                  text: '{{ download_dropdown }}',
                   className: 'btn btn-outline-primary',
                   buttons: [
-
                       {
-                          text: 'Gefilterte Metadaten (Excel)',
+                          text: '{{ excel_export }}',
                           extend: 'excelHtml5',
                           className: 'btn btn-outline-primary'
                       },
                       {
-                          text: 'Gefilterte Metadaten (CSV)',
+                          text: '{{ csv_export }}',
                           extend: 'csvHtml5',
                           className: 'btn btn-outline-primary'
                       }
                   ]
               },
               {
-                  text: 'Sammlungsmetadaten',
+                  text: '{{ more_exports }}',
                   action: function ( e, dt, node, config ) {
                           $('#dataModal').modal('show');
                       },

diff --git a/_layouts/browse.html b/_layouts/browse.html
@@ -5,73 +5,96 @@
 ---
 {{ content }}
 
-<div class="row mb-3 justify-content-center">
-  <div class="col-md-8 text-center">
-    <form role="search" id="lunrSearch" onsubmit="submitFilter(); return false;">
-      <div class="input-group input-group-lg">
-        <input
-          type="text"
-          class="form-control"
-          id="filterTextBox"
-          placeholder="{{ site.data.translations['_layouts']['browse.html']['filter'][site.lang] | default: 'Filter' }} ..."
-          aria-label="{{ site.data.translations['_layouts']['browse.html']['search'][site.lang] | default: 'Search' }}"
+<div class="container-fluid px-0">
+  <div class="row align-items-center">
+    <div class="col-12 col-md-auto text-center text-md-center mb-2 mb-lg-0">
+      <div
+        id="switch-view"
+        class="btn-group btn-group-toggle d-flex justify-content-center"
+        data-toggle="buttons"
+        role="group"
+      >
+        <a
+          href="{{ '/browse.html' | relative_url }}"
+          class="btn btn-primary btn-lg active"
+          aria-pressed="true"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-objects[site.lang] | default: 'Show object view' }}"
         >
-        <button
-          class="btn btn-secondary"
-          type="submit"
-          title="{{ site.data.translations['_layouts']['browse.html']['filter-items'][site.lang] | default: 'Filter items' }}"
-          id="filterButton"
+          {{ site.data.translations._layouts['browse.html'].objects[site.lang] | default: 'Objects' }}
+        </a>
+        <a
+          href="{{ '/timeline.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-timeline[site.lang] | default: 'Show objects on timeline' }}"
         >
-          {{ site.data.translations._layouts['browse.html'].search[site.lang] | default: 'Search' }}
-        </button>
+          {{ site.data.translations._layouts['browse.html'].timeline[site.lang] | default: 'Timeline' }}
+        </a>
+        <a
+          href="{{ '/subjects.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-subjects[site.lang] | default: 'Show list of subjects' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].subjects[site.lang] | default: 'Subjects' }}
+        </a>
+        <a
+          href="{{ '/eras.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-eras[site.lang] | default: 'Show list of eras' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
+        </a>
         <button
-          class="btn btn-outline-secondary text-dark filter"
-          onclick="resetFilter(); return false;"
-          data-filter=""
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"
+          onclick="toggleButtonView()"
         >
-          {{ site.data.translations._layouts['browse.html'].reset[site.lang] | default: 'Reset' }}
+          {{ site.data.translations._layouts['browse.html']['switch-view'][site.lang] | default: 'Switch View' }}
         </button>
       </div>
-    </form>
-    <div class="h2" id="numberOf"></div>
+    </div>
+
+    <div class="col align-self-end">
+      <form class="d-flex" role="search" id="lunrSearch" onsubmit="event.preventDefault(); submitFilter();">
+        <div class="input-group input-group-lg flex-nowrap">
+          <input
+            type="text"
+            class="form-control flex-nowrap"
+            id="filterTextBox"
+            placeholder="{{ site.data.translations['_layouts']['browse.html']['filter'][site.lang] | default: 'Filter' }} ..."
+            aria-label="{{ site.data.translations['_layouts']['browse.html']['search'][site.lang] | default: 'Search' }}"
+          >
+          <button
+            class="btn btn-secondary"
+            type="submit"
+            title="{{ site.data.translations['_layouts']['browse.html']['filter-items'][site.lang] | default: 'Filter items' }}"
+            id="filterButton"
+          >
+            {{ site.data.translations._layouts['browse.html'].search[site.lang] | default: 'Search' }}
+          </button>
+          <button
+            class="btn btn-outline-secondary text-dark filter d-none d-sm-flex"
+            type="reset"
+            onclick="event.preventDefault(); resetFilter();"
+            data-filter=""
+          >
+            {{ site.data.translations._layouts['browse.html'].reset[site.lang] | default: 'Reset' }}
+          </button>
+        </div>
+      </form>
+    </div>
   </div>
-  <div class="col-md-2">
-    <div class="dropdown">
-      <button
-        class="btn btn-outline-primary mt-1 dropdown-toggle"
-        type="button"
-        id="browseSortButton"
-        data-bs-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
+
+  {% include js/switch-view-js.html %}
+
+  <div class="h2 mt-2 text-center" id="numberOf"></div>
+
+  <div id="loadingIcon" class="text-center">
+    <div class="spinner-border text-dark" role="status">
+      <span class="visually-hidden">
+        {{- site.data.translations._layouts['browse.html'].loading[site.lang] | default: 'Loading' }}...</span
       >
-        {{ site.data.translations._layouts['browse.html']['sort-by'][site.lang] | default: 'Sort by' }}
-        <span id="sortFilter">
-          {{- site.data.translations._layouts['browse.html'].random[site.lang] | default: 'Random' -}}
-        </span>
-      </button>
-      <div class="dropdown-menu browse-sort-menu" aria-labelledby="browseSortButton">
-        <button class="dropdown-item browse-sort-item" data-filter="random">
-          {{ site.data.translations._layouts['browse.html'].random[site.lang] | default: 'Random' }}
-        </button>
-        <button class="dropdown-item browse-sort-item" data-filter="title">
-          {{ site.data.translations._layouts['browse.html'].title[site.lang] | default: 'Title' }}
-        </button>
-        {% assign sort_options = site.data['config-browse'] | where_exp: 'i', 'i.sort_name != nil' %}
-        {% for o in sort_options %}
-          <button class="dropdown-item browse-sort-item" data-filter="{{ o.field | escape }}">{{ o.sort_name }}</button>
-        {% endfor %}
-      </div>
     </div>
   </div>
-</div>
 
-<div id="loadingIcon" class="text-center">
-  <div class="spinner-border text-dark" role="status">
-    <span class="visually-hidden">
-      {{- site.data.translations._layouts['browse.html'].loading[site.lang] | default: 'Loading' }}...</span
-    >
-  </div>
+  <div class="row" id="browseItems"></div>
 </div>
-
-<div class="row" id="browseItems"></div>
diff --git a/_layouts/cloud.html b/_layouts/cloud.html
@@ -6,6 +6,58 @@
 ---
 {{ content }}
 
+<div class="container-fluid px-0">
+  <div class="row align-items-center">
+    <div class="col-12 col-md-auto text-center text-md-center mb-2 mb-lg-0">
+      <div
+        id="switch-view"
+        class="btn-group btn-group-toggle d-flex justify-content-center"
+        data-toggle="buttons"
+        role="group"
+      >
+        <a
+          href="{{ '/browse.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-pressed="true"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-objects[site.lang] | default: 'Show object view' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].objects[site.lang] | default: 'Objects' }}
+        </a>
+        <a
+          href="{{ '/timeline.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-timeline[site.lang] | default: 'Show objects on timeline' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].timeline[site.lang] | default: 'Timeline' }}
+        </a>
+        <a
+          href="{{ '/subjects.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-subjects[site.lang] | default: 'Show list of subjects' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].subjects[site.lang] | default: 'Subjects' }}
+        </a>
+        <a
+          href="{{ '/eras.html' | relative_url }}"
+          class="btn btn-primary btn-lg active"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-eras[site.lang] | default: 'Show list of eras' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
+        </a>
+        <button
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"
+          onclick="toggleButtonView()"
+        >
+          {{ site.data.translations._layouts['browse.html']['switch-view'][site.lang] | default: 'Switch View' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% include js/switch-view-js.html %}
+
 {%- comment -%}
   Figure out default "Subjects" and "Locations" page cloud values as configured in in "theme.yml",
   and set default values for cloud include.