UI updates:

input placecholder warning button menu layout
ImperialCollegeLondon · Dec 2, 2024 · b00bd3f · b00bd3f
1 parent 3e54d82
commit b00bd3f
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 47 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/fair-data-repository.iml b/.idea/fair-data-repository.iml
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
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;

diff --git a/assets/less/site/elements/button.variables b/assets/less/site/elements/button.variables
@@ -53,3 +53,9 @@ disabled button
 @disabledButtonBackgroundColor: @whiteSmoke;
 @disabledButtonBorderColor: @darkGray;
 @disabledButtonTextColor: @darkGray;
+
+/*----------------------------------------
+@warningButtonColor: @orange;
+@warningButtonBorderColor: @orange;
+@warningButtonTextColor: @black;
+-------------------------------------------*/
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
@@ -170,45 +170,43 @@ html.cover-page {
         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
-            }
-        }
-    }
+.header__nav-open {
+	color: var(--header-overlay-open-color);
+	margin-inline-start: $space-m;
+
+	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(--header-overlay-open-color);
+	}
+
+	&:hover {
+		--header-overlay-open-color: #{$base-color};
+
+		.header__inner--inverse & {
+			--header-overlay-open-color: #{$base-light};
+		}
+
+		span::before {
+			left: 1px;
+			transform: rotate(90deg);
+			width: clamp(0.875rem, 0.8032rem + 0.3591vw, 1.125rem); // 14px -> 18px
+		}
+	}
 }
 
 .theme.header {

diff --git a/celerybeat-schedule.db b/celerybeat-schedule.db
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">[email protected]</a>
-                        </div>
+                        <h3 class="sr-only">Site Information</h3>
+                        <ul class="footer__meta">
+                            <li><a href="/">Support</a></li>
+                            <li><a href="/">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"