Responsive home page

CHANGELOG.md

@@ -4,6 +4,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+- 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/index.less

@@ -64,4 +64,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/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: 768px) {
+  .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;
+  }
+}

less/layout/basetopbar.less

@@ -1,13 +1,15 @@
 /* top bar */
 .base-top-bar {
-  height: 40px;
+  min-height: 40px;
   background-color: @color-gigadb-green;
   width: 100%;
 }
 .base-top-bar .list-inline {
   margin: 0px;
   padding: 0px;
   height: 40px;
+  display: flex;
+  align-items: center;
 }
 .base-top-bar .list-inline a {
   color: @color-true-white;
@@ -19,10 +21,16 @@
   display: flex;
   justify-content: flex-end;
 }
+.base-top-bar .search-bar-mobile {
+  display: none;
+}
 @media (max-width: 992px) {
   .base-top-bar .top-bar-left .search-bar {
-    position: absolute;
-    top: 38px;
+    display: none;
+  }
+  .base-top-bar .search-bar-mobile {
+    display: block;
+    margin-top: 8px;
   }
 }
 .list-inline.base-top-social-bar > li > a {
@@ -38,13 +46,38 @@
   font-size: 12px;
   line-height: 15px;
   text-decoration: none;
+  text-wrap: nowrap;
 }
 .base-top-account-bar li a i {
   margin-right: 5px;
 }
 .base-top-account-bar li:first-child a {
   border-left: 0px;
+  padding-left: 0;
 }
 .base-top-account-bar li:last-child a {
   padding-right: 0px;
+}
+
+@media (max-width: 768px) {
+  .base-top-bar .container {
+    // adding this to avoid the hypothes sidebar to overlap with the top bar
+    padding-right: 50px;
+  }
+}
+
+@media (max-width: 576px) {
+  .account-navigation {
+    display: none;
+  }
+  .base-top-bar .list-inline {
+    height: auto;
+    min-height: 40px;
+    flex-wrap: wrap;
+    gap: 0 15px;
+  }
+  .base-top-account-bar li a {
+    padding: 0;
+    border: 0;
+  }
 }

less/layout/frontstatspanel.less

@@ -47,3 +47,25 @@
   color: @warm-black-on-lighter-gray;
   line-height: 1;
 }
+
+@media (max-width: 992px) {
+  .home-color-background-block {
+    margin: 20px 0;
+    padding: 20px 0;
+    border: 0;
+  }
+  .home-color-background-grid {
+    .home-color-background-block-wrapper {
+      &:first-child {
+        border-right: 1px dashed @color-light-gray;
+        border-bottom: 1px dashed @color-light-gray;
+      }
+      &:nth-child(2) {
+        border-bottom: 1px dashed @color-light-gray;
+      }
+      &:nth-child(3) {
+        border-right: 1px dashed @color-light-gray;
+      }
+    }
+  }
+}