Merge pull request #94 from ImperialCollegeLondon/feature/ui_updates

Feature/UI updates
ImperialCollegeLondon · Jan 8, 2025 · c7ca2c1 · c7ca2c1
2 parents be706b7 + 535b3f0
commit c7ca2c1
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 95 deletions.
diff --git a/assets/less/site/collections/menu.overrides b/assets/less/site/collections/menu.overrides
@@ -11,7 +11,6 @@
             text-decoration: underline;
             text-decoration-color: @primaryColor;
             a:not(.ui.button) {
-                display: inline-block;
                 color: @primaryColor;
                 padding: 2rem 1rem;
                 text-decoration: underline;
@@ -40,21 +39,59 @@
     }
 }
 
-#rdm-burger-toggle {
-    font-size: 20px;
-    position: absolute;
-    right: -1.5rem;
-    top: calc(50%);
-    border: none;
-
-    #rdm-burger-menu-icon {
-        .navicon {
-            background: @primaryColor;
-            color: @primaryColor;
-            &:hover {
-                color: @black;
+.outer-navbar {
+    background-image: None;
+    background-color: transparent;
+    border-color: transparent;
+
+    #invenio-nav {
+        background: @white;
+        border-top: 2px solid @brandColor;
+        border-bottom: 2px solid @brandColor;
+        margin: 1rem 0;
+    }
+
+    a {
+        color: @primaryColor;
+    }
+
+    .header__nav-open#rdm-burger-menu-icon {
+        color: @navyBlue;
+        margin-inline-start: 1rem;
+        border-style: unset !important;
+        border-width: 0 !important;
+
+        span {
+            top: 1px;
+
+            &::before {
+                top: clamp(0.4375rem, 0.4016rem + 0.1795vw, 0.5625rem); // 7px -> 9px
+                transition: unset;
             }
+
+            &::after {
+                top: clamp(0.875rem, 0.8032rem + 0.3591vw, 1.125rem); // 14px -> 18px
+                transition: uset;
+            }
+        }
+
+        span,
+        span::before,
+        span::after {
+            background-color: @navyBlue;
         }
+
+        &:hover {
+
+            span,
+            span::before,
+            span::after {
+                left: 0px;
+                transform: none;
+                width: clamp(0.875rem, 1.1623rem, 1.125rem);
+                background-color: @darkGray;
+            }
+	    }
     }
 }
 

diff --git a/assets/less/site/elements/button.overrides b/assets/less/site/elements/button.overrides
@@ -75,6 +75,20 @@ div.ui.card.access-right .ui.two.buttons .ui.active.button.positive {
     }
 }
 
+.ui.button.warning,
+.ui.button.orange {
+    background-color: @warningButtonBackgroundColor;
+    border-color: @warningButtonBorderColor;
+    color: @warningButtonTextColor;
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @warningButtonBackgroundColorHovered;
+        border-color: @warningButtonBorderColorHovered;
+        color: @warningButtonTextColorHovered;
+    }
+}
+
 #skip-to-main {
 	position: absolute;
 	top: 0px;

diff --git a/assets/less/site/elements/button.variables b/assets/less/site/elements/button.variables
@@ -53,3 +53,14 @@ disabled button
 @disabledButtonBackgroundColor: @whiteSmoke;
 @disabledButtonBorderColor: @darkGray;
 @disabledButtonTextColor: @darkGray;
+
+/*----------------------------------------
+warning button
+-------------------------------------------*/
+
+@warningButtonBackgroundColor: @orange;
+@warningButtonBorderColor: @orange;
+@warningButtonTextColor: @black;
+@warningButtonBackgroundColorHovered: @darkOrange;
+@warningButtonBorderColorHovered: @darkOrange;
+@warningButtonTextColorHovered: @black;
diff --git a/assets/less/site/elements/header.overrides b/assets/less/site/elements/header.overrides
@@ -35,19 +35,3 @@ aside.sidebar {
     display: none;
   }
 }
-
-.ui.header  {
-  word-break: break-word;
-
-  &.text-muted {
-    color: @mutedTextColor;
-  }
-
-  .doi.sub.header {
-    display: inline-block;
-  }
-
-  &.highlight{
-    background-color:  @highlightBackgroundColor;
-  }
-}
diff --git a/assets/less/site/elements/input.overrides b/assets/less/site/elements/input.overrides
@@ -15,6 +15,10 @@
             outline-width: 3px;
             outline-offset: 3px;
         }
+        &::placeholder{
+           color: @darkGray;
+        }
+
 }
 
 div.ui.search .ui.input input {

diff --git a/assets/less/site/globals/site.overrides b/assets/less/site/globals/site.overrides
@@ -154,63 +154,6 @@ html.cover-page {
     background-color: @white;
 }
 
-.outer-navbar {
-    background-image: None;
-    background-color: transparent;
-    border-color: transparent;
-
-    #invenio-nav {
-        background: @white;
-        border-top: 2px solid @brandColor;
-        border-bottom: 2px solid @brandColor;
-        margin: 1rem 0;
-    }
-
-    a {
-        color: @primaryColor;
-    }
-
-    #rdm-burger-menu-icon {
-        @headerOverlayOpenColor: @primaryColor;
-
-        .header__inner--inverse & {
-            @headerOverlayOpenColor: @white;
-        }
-        background-color: transparent !important;
-        border: none !important;
-        color: none;
-
-        span {
-            top: 1px;
-
-            &::before {
-                top: clamp(0.4375rem, 0.4016rem + 0.1795vw, 0.5625rem); // 7px -> 9px
-                transition: transform 0.2s;
-            }
-
-            &::after {
-                top: clamp(0.875rem, 0.8032rem + 0.3591vw, 1.125rem); // 14px -> 18px
-                transition: none;
-            }
-        }
-
-        span,
-        span::before,
-        span::after {
-            background-color: var(@headerOverlayOpenColor);
-        }
-
-        &:hover {
-            background-color: transparent !important;
-            border: none !important;
-            transform: rotate(90deg);
-            span::before {
-                width: clamp(0.875rem, 0.8032rem + 0.3591vw, 1.125rem); // 14px -> 18px
-            }
-        }
-    }
-}
-
 .theme.header {
   box-shadow: None;
 }

diff --git a/assets/less/site/globals/site.variables b/assets/less/site/globals/site.variables
@@ -74,7 +74,7 @@
 @frontpageSearchBarBackgroundColor: @navyBlue;
 @versionActiveColor: @lavender;
 
-@inputColor: @white;
+@inputColor: @black;
 @inputBorderColor: @whiteSmoke;
 
 @mutedAccordionHeaderColor: @whiteSmoke;

diff --git a/templates/semantic-ui/invenio_administration/header/header.html b/templates/semantic-ui/invenio_administration/header/header.html
@@ -39,7 +39,7 @@
         <div id="rdm-burger-toggle">
           <button
             id="rdm-burger-menu-icon"
-            class="ui button transparent mr-0 pr-0"
+            class="ui button transparent mr-0 pr-0 header__nav-open"
             aria-label="{{ _('Menu') }}"
             aria-haspopup="menu"
             aria-expanded="false"

diff --git a/templates/semantic-ui/invenio_app_rdm/footer.html b/templates/semantic-ui/invenio_app_rdm/footer.html
@@ -51,11 +51,12 @@ <h3 class="sr-only">Address</h3>
                 </div>
                 <div class="twelve wide tablet twelve wide computer column">
                     <div class="ui right aligned footer__info">
-                        <div class="email">
-                            <h3>Contact the team</h3>
-                            <a id="contact-us" href="/"
-                               class="ui link right floated contact-us">contact@imperial.ac.uk</a>
-                        </div>
+                        <h3 class="sr-only">Site Information</h3>
+                        <ul class="footer__meta">
+                            <li><a href="/">Support</a></li>
+                            <li><a href="https://www.imperial.ac.uk/about-the-site/accessibility/spiraldata/">Accessibility</a></li>
+                            <li><a href="https://www.imperial.ac.uk/about-the-site/use-of-cookies/">Use of cookies</a></li>
+                        </ul>
                         <p class="footer__copyright right floated">© 2024 Imperial College London</p>
                     </div>
                 </div>

diff --git a/templates/semantic-ui/invenio_app_rdm/header.html b/templates/semantic-ui/invenio_app_rdm/header.html
@@ -46,7 +46,7 @@
           <div id="rdm-burger-toggle">
             <button
               id="rdm-burger-menu-icon"
-              class="ui button transparent"
+              class="ui button transparent header__nav-open"
               aria-label="{{ _('Menu') }}"
               aria-haspopup="menu"
               aria-expanded="false"