Responsive dataset page

CHANGELOG.md

@@ -4,6 +4,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+- Feat #2189: Make dataset page responsive
+- Feat #2189: Make homepage responsive
+- Feat #2189: Make layout (header and footer) responsive
 - Fix #2099: Add missing permission for CLOCKSS
 
 ## v4.4.3 - 2025-02-03 - c62107e5e - live since 2025-02-05

gigadb/app/client/js/mobile-navigation.js

@@ -0,0 +1,35 @@
+import { trapFocus } from './trap-focus.js';
+
+export function initMobileNavigation() {
+  const $mobileNav = $("#mobileNavigation");
+  const $toggleButton = $(".navbar-toggle");
+  const $closeButton = $(".mobile-navigation__close");
+  const $body = $("body");
+
+  function closeNav() {
+    $mobileNav.removeClass("is-visible");
+    $body.css("overflow", "");
+  }
+
+  $toggleButton.on("click", function () {
+    $mobileNav.addClass("is-visible");
+    $body.css("overflow", "hidden");
+    trapFocus($mobileNav);
+  });
+
+  $closeButton.on("click", function () {
+    closeNav();
+  });
+
+  $(document).on("keydown", function (event) {
+    if (event.key === "Escape" && $mobileNav.hasClass("is-visible")) {
+      closeNav();
+    }
+  });
+
+  $mobileNav.on("click", "button, a", function (event) {
+    if (event.target === this) {
+      closeNav();
+    }
+  });
+}

gigadb/app/client/js/trap-focus.js

@@ -0,0 +1,23 @@
+export function trapFocus(element) {
+  const focusableElements = element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]').filter(':visible');
+  const firstFocusableElement = focusableElements[0];
+  const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+  element.on('keydown', function(e) {
+      if (e.key === 'Tab' || e.code === 'Tab') {
+          if ( e.shiftKey ) {
+              // focus prev
+              if (document.activeElement === firstFocusableElement) {
+                  lastFocusableElement.focus();
+                  e.preventDefault();
+              }
+          } else {
+              // focus next
+              if (document.activeElement === lastFocusableElement) {
+                  firstFocusableElement.focus();
+                  e.preventDefault();
+              }
+          }
+      }
+  });
+}

less/base/breakpoints.less

@@ -0,0 +1,85 @@
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+@screen-xs: 576px;
+@screen-xs-min: @screen-xs;
+
+// Small screen / tablet
+@screen-sm: 768px;
+@screen-sm-min: @screen-sm;
+
+// Medium screen / desktop
+@screen-md: 992px;
+@screen-md-min: @screen-md;
+
+// Large screen / wide desktop
+@screen-lg: 1200px;
+@screen-lg-min: @screen-lg;
+
+// Extra large screen / wide desktop
+@screen-xl: 1400px;
+@screen-xl-min: @screen-xl;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-xxs-max: (@screen-xs-min - 1);
+@screen-xs-max: (@screen-sm-min - 1);
+@screen-sm-max: (@screen-md-min - 1);
+@screen-md-max: (@screen-lg-min - 1);
+@screen-lg-max: (@screen-xl-min - 1);
+
+// Usage:
+/*
+// 1. Mobile-first approach (min-width)
+@media (min-width: @screen-sm-min) {
+  // Styles for tablets and up (≥768px)
+}
+
+@media (min-width: @screen-md-min) {
+  // Styles for desktop and up (≥992px)
+}
+
+@media (min-width: @screen-lg-min) {
+  // Styles for large desktops (≥1200px)
+}
+
+// 2. Desktop-first approach (max-width)
+@media (max-width: @screen-md-max) {
+  // Styles for tablets and below (<1200px)
+}
+
+@media (max-width: @screen-sm-max) {
+  // Styles for small tablets and below (<992px)
+}
+
+@media (max-width: @screen-xs-max) {
+  // Styles for mobile only (<768px)
+}
+
+// 3. Specific range examples
+@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+  // Only tablet styles (768px-991px)
+}
+
+@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+  // Only desktop styles (992px-1199px)
+}
+
+// 4. Example with a module
+.card {
+  width: 100%;
+
+  @media (min-width: @screen-sm-min) {
+    width: 50%;
+  }
+
+  @media (min-width: @screen-md-min) {
+    width: 33.33%;
+  }
+
+  @media (min-width: @screen-lg-min) {
+    width: 25%;
+  }
+}
+*/

less/index.less

@@ -3,6 +3,7 @@
 /* ================ */
 
 @import "base/variables.less";
+@import "base/breakpoints.less";
 @import "base/scaffolding.less";
 @import "base/type.less";
 @import "base/icons.less";
@@ -64,4 +65,7 @@
 @import "modules/team-grid.less";
 @import "modules/map.less";
 @import "modules/lists.less";
-@import "modules/tooltip.less";
+@import "modules/tooltip.less";
+@import "modules/mobile-nav.less";
+@import "modules/dataset-types-panel.less";
+@import "modules/rss-panel.less";

less/layout/admin-nav.less

@@ -18,7 +18,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: @screen-xs-max) {
   .three-column-list {
     columns: 1;
     -webkit-columns: 1;

less/layout/basefooterbar.less

@@ -1,65 +1,162 @@
-/* footer bar */
 .base-footer-bar {
   background-color: @color-warm-black;
-  height: 135px;
+  color: @color-true-white;
+  height: 160px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
 }
-.base-footer-logo-bar {
-  margin: 50.5px 0px;
+
+.base-footer-bar__container {
+  margin: 0 auto;
+  padding: 40px 30px 60px 30px;
 }
-.base-footer-logo-bar li {
-  padding: 0px 20px;
+
+.base-footer-bar__content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 60px;
 }
-.base-footer-logo-bar li:first-child {
-  padding-left: 0px;
+
+.base-footer-bar__section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  &:nth-child(2) {
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  &:last-child {
+    align-items: flex-end;
+  }
 }
-.base-footer-logo-bar li:last-child {
-  padding-right: 0px;
+
+.footer-logo {
+  padding: 0;
+  margin: 0;
+  a {
+    display: block;
+    width: fit-content;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 }
-.base-footer-email {
-  margin: 42.9px 0px 15px 0px;
-  line-height: 1;
+
+.footer-version {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  a {
+    text-wrap: nowrap;
+    text-decoration: none;
+    color: @color-true-white;
+    &:hover {
+      color: @color-light-gray;
+    }
+  }
 }
-.base-footer-email a {
-  text-decoration: none;
-  color: @gray-on-warm-black;
+
+.footer-contact {
+  margin: 0 0 15px;
+  line-height: 1;
+  text-wrap: nowrap;
+
+  a {
+    text-decoration: none;
+    color: @color-true-white;
+    &:hover {
+      color: @color-light-gray;
+    }
+  }
 }
-.base-footer-social-bar {
+
+.footer-social {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 4px;
-  .icon-list-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &__link {
-      text-decoration: none;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    &__image {
-      max-height: 100%;
-      max-width: 100%;
-      padding: 4px;
-    }
-  }
+  gap: 12px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
-.base-footer-social-bar li {
-  margin-left: 20px;
+
+.footer-social__item {
   border-radius: 3px;
-  border: @gray-on-warm-black 1px solid;
-  width: 20px;
-  height: 20px;
+  border: @color-true-white 1px solid;
+  width: 24px;
+  height: 24px;
   text-align: center;
-  padding: 0px;
+  padding: 0;
   background-color: @color-warm-black;
 }
-.base-footer-social-bar li a {
+
+.footer-social__link {
   width: 100%;
   height: 100%;
   text-decoration: none;
-  color: @gray-on-warm-black;
-  line-height: 20px;
+  color: @color-true-white;
   font-size: 13px;
-}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &:focus {
+    outline: 2px solid @color-true-white;
+    outline-offset: -2px;
+    color: @color-true-white;
+    text-decoration: none;
+  }
+  &:hover {
+    background-color: @color-true-white;
+    color: @color-warm-black;
+    text-decoration: none;
+    .footer-social__icon {
+      filter: invert(1);
+    }
+  }
+}
+
+.footer-social__icon {
+  max-height: 100%;
+  max-width: 100%;
+  padding: 4px;
+}
+
+@media (max-width: @screen-xs-max) {
+  .base-footer-bar {
+    height: auto;
+    padding: 20px 0;
+    align-items: center;
+  }
+
+  .base-footer-bar__container {
+    padding: 40px 30px;
+  }
+
+  .base-footer-bar__content {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 30px;
+  }
+
+  .base-footer-bar__section {
+    flex: none;
+    width: 100%;
+    text-align: center;
+    align-items: center;
+
+    &:last-child {
+      align-items: center;
+    }
+  }
+
+  .footer-social {
+    justify-content: center;
+  }
+}