Modal Layout and CSS Improvements (#186)

* fix: align colour scheme * feat: add logo styling * fix: update svg setting * fix: remove media type badge * fix: fix minor typography issue * feat: improve button label wording * feat: improve alignment of modal elements * fix: adjust columns for mobile layout * feat: improve modal header layout * fix: replace with new wording
Stadt-Geschichte-Basel · Nov 20, 2024 · 7b31584 · 7b31584
1 parent 34afba9
commit 7b31584
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 67 deletions.
diff --git a/_data/translations.yml b/_data/translations.yml
@@ -310,10 +310,10 @@ _includes:
         en: "Previous"
         es: "Anterior"
         de: "Vorherige"
-      back-to-browse:
-        en: "Back to Browse"
-        es: "Volver a Navegar"
-        de: "Zurück zum Durchsuchen"
+      back-to-collection:
+        en: "Back to Collection"
+        es: "Volver a la Colección"
+        de: "Zurück zur Sammlung"
       next:
         en: "Next"
         es: "Siguiente"

diff --git a/_includes/collection-nav-sgb.html b/_includes/collection-nav-sgb.html
@@ -27,7 +27,7 @@
         style="width: 7rem;"
         aria-label="Startseite"
       >
-        <img class="img-fluid" src="{{ site.organization-logo-nav | relative_url }}" alt="">
+        <img class="img-fluid sgb-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="">
       </a>
     {% endif %}
 

diff --git a/_includes/footer-sgb.html b/_includes/footer-sgb.html
@@ -12,7 +12,7 @@
           <a href="{{ site.organization-link }}" target="_blank" rel="noopener">
             <img
               id="footer-logo"
-              class="img-fluid"
+              class="img-fluid sgb-logo"
               src="{{ site.organization-logo-nav | relative_url }}"
               alt="{{ site.organization-name | escape }} Startseite"
             >

diff --git a/_includes/item/browse-buttons.html b/_includes/item/browse-buttons.html
@@ -10,8 +10,8 @@
   </a>
   <a class="btn btn-outline-primary" href="{{ '/browse.html' | relative_url }}">
     {{-
-      site.data.translations._includes.item['browse-buttons.html']['back-to-browse'][site.lang]
-      | default: 'Back to Browse'
+      site.data.translations._includes.item['browse-buttons.html']['back-to-collection'][site.lang]
+      | default: 'Back to Collection'
     -}}
   </a>
   <a class="btn btn-outline-primary" href="{{ page.next_item | relative_url }}" id="next-page-button">

diff --git a/_includes/item/child/compound-item-modal-gallery.html b/_includes/item/child/compound-item-modal-gallery.html
@@ -59,8 +59,8 @@
                 <div class="modal-content text-start">
                   <div class="modal-header ">
                     <div class="modal-title w-100" id="{{ child.objectid }}ModalLabel">
-                      <div class="row">
-                        <div class="col-12 text-end">
+                      <div class="row d-flex align-items-center">
+                        <div class="col-12 text-end mb-2">
                           <button
                             type="button"
                             class="btn-close"
@@ -75,57 +75,61 @@
                         {% assign prev_index = prev_index | times: 1 %}
                         {% capture next_item_id %}{{ children[next_index].objectid }}{% endcapture %}
                         {% capture prev_item_id %}{{ children[prev_index].objectid }}{% endcapture %}
-                        <div class="col-1 col-md-2">
-                          <button
-                            data-bs-target="#{{ prev_item_id }}"
-                            data-bs-toggle="modal"
-                            onclick="stopMedia();window.location.hash='{{ prev_item_id }}'"
-                            class="btn btn-outline-dark btn-sm prev-child-button"
-                          >
-                            <svg
-                              class="bi icon-sprite"
-                              role="img"
-                              aria-label="{{ site.data.translations['_includes']['item']['child']['compound-item-modal-gallery.html']['previous'][site.lang] | default: "Previous Item" }}"
+                        {% if children.size > 1 %}
+                          <div class="col-2 col-md-3 d-flex justify-content-start">
+                            <button
+                              data-bs-target="#{{ prev_item_id }}"
+                              data-bs-toggle="modal"
+                              onclick="stopMedia();window.location.hash='{{ prev_item_id }}'"
+                              class="btn btn-outline-dark btn-sm prev-child-button"
                             >
-                              <use xlink:href="{{ '/assets/lib/cb-icons.svg' | relative_url }}#arrow-left"/>
-                            </svg>
-                            <span class="d-none d-md-inline">
-                              {{-
-                                site.data.translations._includes.item.child['compound-item-modal-gallery.html'].previous[site.lang]
-                                | default: 'Previous Item'
-                              -}}
-                            </span>
-                          </button>
-                        </div>
-                        <div class="col-9 col-md-8 text-center">
-                          <h3 class="h5">
+                              <svg
+                                class="bi icon-sprite"
+                                role="img"
+                                aria-label="{{ site.data.translations['_includes']['item']['child']['compound-item-modal-gallery.html']['previous'][site.lang] | default: "Previous Item" }}"
+                              >
+                                <use xlink:href="{{ '/assets/lib/cb-icons.svg' | relative_url }}#arrow-left"/>
+                              </svg>
+                              <span class="d-none d-md-inline">
+                                {{-
+                                  site.data.translations._includes.item.child['compound-item-modal-gallery.html'].previous[site.lang]
+                                  | default: 'Previous Item'
+                                -}}
+                              </span>
+                            </button>
+                          </div>
+                        {% endif %}
+                        <div class="{% if children.size > 1 %}col-8 col-md-6{% else %}col-12{% endif %} align-items-center text-center">
+                          <h3 class="h5 mb-0">
                             {{ page.title }}
-                            <span class="d-none d-md-inline">-</span><span class="d-md-none"><br></span>
+                            <span class="d-none d-md-inline">–</span><span class="d-md-none"><br></span>
                             {{ forloop.index }} / {{ children | size }}
                           </h3>
                         </div>
-                        <div class="col-1 col-md-2 text-end">
-                          <button
-                            data-bs-target="#{{ next_item_id }}"
-                            data-bs-toggle="modal"
-                            onclick="stopMedia();window.location.hash='{{ next_item_id }}'"
-                            class="ms-md-5 btn btn-outline-dark btn-sm next-child-button"
-                          >
-                            <span class="d-none d-md-inline">
-                              {{-
-                                site.data.translations._includes.item.child['compound-item-modal-gallery.html'].next[site.lang]
-                                | default: 'Next Item'
-                              -}}
-                            </span>
-                            <svg
-                              class="bi icon-sprite"
-                              role="img"
-                              aria-label="{{ site.data.translations['_includes']['item']['child']['compound-item-modal-gallery.html']['next'][site.lang] | default: "Next Item" }}"
+                        {% if children.size > 1 %}
+                          <div class="col-2 col-md-3 d-flex justify-content-end">
+                            <button
+                              data-bs-target="#{{ next_item_id }}"
+                              data-bs-toggle="modal"
+                              onclick="stopMedia();window.location.hash='{{ next_item_id }}'"
+                              class="btn btn-outline-dark btn-sm next-child-button"
                             >
-                              <use xlink:href="{{ '/assets/lib/cb-icons.svg' | relative_url }}#arrow-right"/>
-                            </svg>
-                          </button>
-                        </div>
+                              <span class="d-none d-md-inline">
+                                {{-
+                                  site.data.translations._includes.item.child['compound-item-modal-gallery.html'].next[site.lang]
+                                  | default: 'Next Item'
+                                -}}
+                              </span>
+                              <svg
+                                class="bi icon-sprite"
+                                role="img"
+                                aria-label="{{ site.data.translations['_includes']['item']['child']['compound-item-modal-gallery.html']['next'][site.lang] | default: "Next Item" }}"
+                              >
+                                <use xlink:href="{{ '/assets/lib/cb-icons.svg' | relative_url }}#arrow-right"/>
+                              </svg>
+                            </button>
+                          </div>
+                        {% endif %}
                       </div>
                     </div>
                   </div>

diff --git a/_includes/js/browse-js.html b/_includes/js/browse-js.html
@@ -44,10 +44,6 @@
 
     card += `<p class="card-text">${generateFieldsContent(obj)}</p>`;
 
-    if (obj.template) {
-        card += createMediaTypeBadge(obj.template, obj.format);
-    }
-
     card += `<hr><a href="${itemHref}" class="btn btn-sm btn-outline-primary" title="link to ${obj.title}">` +
             `{{ site.data.translations['_includes']['js']['browse-js.html']['view-full-record'][site.lang] | default: 'View Full Record' }}</a>`;
     card += `</div></div></div>`;
@@ -83,13 +79,6 @@
     return btns.map(btn => btn ? `<a class="btn btn-sm btn-secondary m-1 text-wrap" href="${baseUrl}#${encodeURIComponent(btn.trim())}">${btn.trim()}</a>` : '').join('');
 };
 
-/* Helper function to create media type badge */
-const createMediaTypeBadge = (template, format) => {
-    const mediaIcon = getIcon(template, format, "hidden");
-    return `<p class="card-text"><small><a class="btn btn-sm btn-outline-primary" href="{{ page.url | relative_url }}#${encodeURIComponent(template)}">${template.toUpperCase()} ${mediaIcon}</a></small></p>`;
-};
-
-
 /* Filter items function */
 const filterItems = (arr, q) => {
     loadingIcon.classList.remove("d-none");

diff --git a/_sass/_custom.scss b/_sass/_custom.scss
@@ -61,6 +61,12 @@
     z-index: 1021;
 }
 
+#scroll-to-top {
+    &:focus {
+        box-shadow: 0 0 0 .15rem #3a1e3e;
+    }
+}
+
 ::selection {
     background: #fff6cc;
     color: black;
@@ -90,6 +96,10 @@ a {
     }
 }
 
+.btn-close:focus {
+    box-shadow:0 0 0 .15rem #3a1e3e;
+}
+
 .form-control {   
     border-color: #ffe880; 
     &:focus {
@@ -136,6 +146,15 @@ a {
     color: #fff;
 }
 
+.sgb-logo {
+     /* white #fff */
+    filter: invert(82%) sepia(100%) saturate(2%) hue-rotate(53deg) brightness(108%) contrast(101%);
+    &:hover {
+         /* yellow #ffe880 */
+        filter: invert(79%) sepia(69%) saturate(302%) hue-rotate(349deg) brightness(105%) contrast(103%);
+    }
+}
+
 .nav-link {
     color: #ffffff !important;
     &:hover {
@@ -251,6 +270,15 @@ a {
     align-items: center;
   }
 
+.form-select {
+    border-color: #3a1e3e;
+    &:focus {
+        border-color: #3a1e3e;
+        outline: 0;
+        box-shadow:inset 0 0 0 .10rem #3a1e3e;
+    }
+}
+
 /* Toggle Collection View for Small Screens */
 
 @media screen and (min-width: 577px) {

diff --git a/assets/img/logo.svg b/assets/img/logo.svg