Improvements to the menu and footer on small screens.

The menu on small screens was complicated, didn't fit (padding and margins) and wasn't scrollable. These changes revert the menu to the original bootstrap menu. The styling also includes the portals that can be shown in the menu. The footer on small screens had 'hidden' content, pages and social links were pushed off the screen when the footer was fixed. On smaal screens the footer isn't fixed anymore and displays the footer on more than one line.
MichelGabriel · May 22, 2024 · 667996d · 667996d
1 parent c5f3e64
commit 667996d
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 153 deletions.
diff --git a/web-ui/src/main/resources/catalog/components/pages/partials/menu-page.html b/web-ui/src/main/resources/catalog/components/pages/partials/menu-page.html
@@ -1,7 +1,7 @@
 <li data-ng-class="{'dropdown': isSubmenu}" role="menuitem">
   <a
     data-ng-if="isSubmenu"
-    class="dropdown-toggle gn-menuheader-xs"
+    class="dropdown-toggle"
     role="button"
     data-toggle="dropdown"
     aria-haspopup="true"
@@ -14,10 +14,9 @@
     <span>{{page.label}}</span>
     <span class="caret hidden-xs"></span>
   </a>
-  <ul data-ng-if="isSubmenu" class="dropdown-menu gn-menu-xs clearfix">
+  <ul data-ng-if="isSubmenu" class="dropdown-menu clearfix">
     <li
       data-ng-repeat="page in page.pages"
-      class="gn-menuitem-xs"
       role="menuitem"
       data-ng-init="submenuExternalLink = (page.format == 'LINK' || page.format == 'HTMLPAGE');"
     >

diff --git a/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-admin.html b/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-admin.html
@@ -6,7 +6,7 @@
   <a
     title="{{'adminConsole' | translate}}"
     href
-    class="dropdown-toggle gn-menuheader-xs"
+    class="dropdown-toggle"
     data-toggle="dropdown"
     aria-haspopup="true"
     aria-expanded="false"
@@ -15,28 +15,28 @@
     <span translate>adminConsole</span>
     <span class="caret hidden-xs"></span>
   </a>
-  <ul data-ng-if="user.isUserAdmin()" class="dropdown-menu gn-menu-xs">
-    <li class="gn-menuitem-xs" role="menuitem">
+  <ul data-ng-if="user.isUserAdmin()" class="dropdown-menu">
+    <li role="menuitem">
       <a data-gn-active-tb-item="admin.console#/home">
         <span class="fa fa-fw fa-th"></span><span translate>adminHome</span>
       </a>
     </li>
-    <li role="separator" class="divider gn-separator-xs"></li>
-    <li class="gn-menuitem-xs" role="menuitem" data-ng-repeat="t in userAdminMenu">
+    <li role="separator" class="divider"></li>
+    <li role="menuitem" data-ng-repeat="t in userAdminMenu">
       <a data-gn-active-tb-item="admin.console{{t.route}}">
         <span class="fa fa-fw {{t.icon}}"></span
         ><span translate>{{t.name | translate}}</span>
       </a>
     </li>
   </ul>
-  <ul data-ng-if="user.isAdministrator()" class="dropdown-menu gn-menu-xs">
-    <li class="gn-menuitem-xs" role="menuitem">
+  <ul data-ng-if="user.isAdministrator()" class="dropdown-menu">
+    <li role="menuitem">
       <a data-gn-active-tb-item="admin.console#/home">
         <span class="fa fa-fw fa-th"></span><span translate>adminHome</span>
       </a>
     </li>
-    <li role="separator" class="divider gn-separator-xs"></li>
-    <li class="gn-menuitem-xs" role="menuitem" data-ng-repeat="t in adminMenu">
+    <li role="separator" class="divider"></li>
+    <li role="menuitem" data-ng-repeat="t in adminMenu">
       <a data-gn-active-tb-item="{{gnCfg.mods.admin.appUrl}}{{t.route}}">
         <span class="fa fa-fw {{t.icon}}"></span
         ><span translate>{{t.name | translate}}</span>

diff --git a/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-contribute.html b/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-contribute.html
@@ -7,7 +7,7 @@
   <a
     title="{{'editorBoard' | translate}}"
     href
-    class="dropdown-toggle gn-menuheader-xs"
+    class="dropdown-toggle"
     role="button"
     data-toggle="dropdown"
     aria-haspopup="true"
@@ -17,35 +17,34 @@
     <span translate>contribute</span>
     <span class="caret hidden-xs"></span>
   </a>
-  <ul class="dropdown-menu gn-menu-xs clearfix">
-    <li class="gn-menuitem-xs" role="menuitem">
+  <ul class="dropdown-menu clearfix">
+    <li role="menuitem">
       <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/board">
         <span class="fa fa-fw fa-bars"></span><span translate>editorHome</span>
       </a>
     </li>
-    <li role="separator" class="divider gn-separator-xs"></li>
-    <li class="gn-menuitem-xs" role="menuitem">
+    <li role="separator" class="divider"></li>
+    <li role="menuitem">
       <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/create">
         <span class="fa fa-fw fa-plus"></span>&nbsp;<span translate>addRecord</span>
       </a>
     </li>
-    <li class="gn-menuitem-xs" role="menuitem" data-ng-if="user.canImportMetadata()">
+    <li role="menuitem" data-ng-if="user.canImportMetadata()">
       <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/import">
         <span class="fa fa-fw fa-upload"></span><span translate>ImportRecord</span>
       </a>
     </li>
-    <li class="gn-menuitem-xs" role="menuitem">
+    <li role="menuitem">
       <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/directory">
         <span class="fa fa-fw fa-bookmark"></span><span translate>directoryManager</span>
       </a>
     </li>
-    <li class="gn-menuitem-xs" role="menuitem" data-ng-if="user.canBatchEditMetadata()">
+    <li role="menuitem" data-ng-if="user.canBatchEditMetadata()">
       <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/batchedit">
         <span class="fa fa-fw fa-pencil"></span><span translate>batchEditing</span>
       </a>
     </li>
     <li
-      class="gn-menuitem-xs"
       role="menuitem"
       ng-if="user.isAdministratorOrMore() && healthCheck.IndexHealthCheck === true"
     >

diff --git a/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-map.html b/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-map.html
@@ -1,4 +1,4 @@
-<li class="gn-menuitem-xs" data-ng-show="gnCfg.mods.map.enabled" role="menuitem">
+<li data-ng-show="gnCfg.mods.map.enabled" role="menuitem">
   <a
     data-gn-active-tb-item="{{isExternalViewerEnabled ? externalViewerUrl : gnCfg.mods.map.appUrl}}"
     title="{{'map' | translate}}"

diff --git a/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-search.html b/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-search.html
@@ -1,4 +1,4 @@
-<li class="gn-menuitem-xs" data-ng-show="gnCfg.mods.search.enabled" role="menuitem">
+<li data-ng-show="gnCfg.mods.search.enabled" role="menuitem">
   <a
     data-gn-active-tb-item="{{gnCfg.mods.search.appUrl}}"
     title="{{'search' | translate}}"

diff --git a/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-signin.html b/web-ui/src/main/resources/catalog/components/toolbar/partials/menu-signin.html
@@ -7,7 +7,7 @@
     <a
       title="{{'userDetails' | translate}}"
       href
-      class="dropdown-toggle gn-menuitem-xs"
+      class="dropdown-toggle"
       data-toggle="dropdown"
       aria-haspopup="true"
       aria-expanded="false"
@@ -21,7 +21,7 @@
         <span class="gn-user-name">{{user.name}} {{user.surname}}</span><br />
         <span class="gn-user-role">{{user.profile | translate}}</span>
       </div>
-      <span class="caret"></span>
+      <span class="caret hidden-xs"></span>
       <span
         class="alert alert-danger ng-hide"
         data-ng-show="session.remainingTime > 0 &&
@@ -32,7 +32,7 @@
         sessionWillExpireIn
       </span>
     </a>
-    <ul class="dropdown-menu gn-menuitem-xs">
+    <ul class="dropdown-menu">
       <li class="text-center hidden-xs" role="menuitem">
         <img
           class="img-circle"
@@ -72,7 +72,6 @@
     <a
       href="{{signInFormAction}}?_csrf={{csrf}}&redirectUrl={{redirectUrlAfterSign}}"
       title="{{'signIn'|translate}}"
-      class="gn-menuheader-xs"
       data-ng-keypress="$event"
       id="signinLink"
     >
@@ -88,15 +87,15 @@
     <a
       href="{{gnCfg.mods.authentication.signinUrl | signInLink}}"
       title="{{'signIn'|translate}}"
-      class="dropdown-toggle gn-menuheader-xs"
+      class="dropdown-toggle"
       data-ng-keypress="$event"
       data-toggle="dropdown"
       aria-haspopup="true"
       data-ng-mouseover="focusLoginPopup()"
     >
       <span class="fa fa-fw fa-sign-in hidden-sm"></span>
       {{'signIn' | translate}}
-      <span class="caret"></span>
+      <span class="caret hidden-xs"></span>
     </a>
     <ul class="dropdown-menu">
       <form

diff --git a/web-ui/src/main/resources/catalog/components/usersearches/partials/portalswitcher.html b/web-ui/src/main/resources/catalog/components/usersearches/partials/portalswitcher.html
@@ -1,22 +1,22 @@
 <li
-  class="dropdown gn-clear-xs"
+  class="dropdown"
   role="menuitem"
   data-ng-show="showPortalSwitcher && ((portals | filter: {listableInHeaderSelector: true}).length > 0 || nodeId != 'srv')"
 >
   <a
     title="{{'portals' | translate}}"
     href
-    class="dropdown-toggle gn-menuheader-xs"
+    class="dropdown-toggle"
     role="button"
     data-toggle="dropdown"
     aria-haspopup="true"
     aria-expanded="false"
   >
-    <span translate class="sr-only">portals</span>
-    <span class="caret"></span>
+    <span translate class="visible-xs">portals</span>
+    <span class="caret hidden-xs"></span>
   </a>
-  <ul class="dropdown-menu gn-menu-xs clearfix">
-    <li class="gn-menuitem-xs" role="menuitem" data-ng-if="nodeId != 'srv'">
+  <ul class="dropdown-menu clearfix">
+    <li role="menuitem" data-ng-if="nodeId != 'srv'">
       <a href="../../srv/{{lang}}/catalog.search#/home">
         <img
           class="gn-source-logo"
@@ -30,14 +30,13 @@
       data-ng-if="(portals | filter: {listableInHeaderSelector: true}).length > 0 && (nodeId != 'srv')"
     ></li>
     <li
-      class="dropdown-header"
+      class="dropdown-header hidden-xs"
       translate=""
       data-ng-if="(portals | filter: {listableInHeaderSelector: true}).length > 0"
     >
       switchPortals
     </li>
     <li
-      class="gn-menuitem-xs"
       role="menuitem"
       data-ng-repeat="p in portals | filter: {listableInHeaderSelector: true} |orderBy:sortByLabel"
     >
@@ -49,5 +48,6 @@
         {{::p.label[lang]}}
       </a>
     </li>
+    <li role="separator" class="divider visible-xs"></li>
   </ul>
 </li>
diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_footer_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_footer_default.less
@@ -22,4 +22,19 @@
       background-color: @gn-bottombar-background-hover !important;
     }
   }
+  @media (max-width: @screen-xs-max) {
+    position: relative;
+    height: auto;
+    .navbar-text {
+      padding: 0 15px;
+      font-weight: bold;
+    }
+    .gn-navbar-social {
+      display: flex;
+      flex-flow: wrap;
+      .navbar-text {
+        width: 100%;
+      }
+    }
+  }
 }