Merge pull request #8133 from michaelchadwick/frontend-5700-header-ic…

…on-mobile-valign-fix header icons now sit more vertically centered
ilios · Sep 24, 2024 · 299de27 · 299de27
2 parents f9d08dc + b9c5514
commit 299de27
Showing 4 changed files with 88 additions and 10 deletions.
diff --git a/packages/frontend/app/styles/components/global-search-box.scss b/packages/frontend/app/styles/components/global-search-box.scss
@@ -12,10 +12,23 @@
     background-color: c.$white;
     border: 1px solid c.$tealBlue;
     border-radius: 3px;
-    height: 100%;
+    height: 80%;
     padding: 0 0.5rem 0 1.5rem;
     width: 100%;
 
+    @include m.for-phone-only {
+      outline-offset: 0;
+    }
+
+    @include m.for-phone-and-up {
+      height: 100%;
+    }
+
+    @include m.for-laptop-and-up {
+      padding-left: 24px;
+      padding-right: 8px;
+    }
+
     &.has-results {
       border-bottom: 0;
       border-radius: 3px 3px 0 0;
@@ -26,11 +39,23 @@
     color: c.$blueMunsell;
     cursor: pointer;
     display: inline-block;
+    /* stylelint-disable-next-line property-disallowed-list */
+    font-size: 3vw;
     left: 0;
     margin-right: 2px;
     padding-left: 6px;
     position: absolute;
-    top: 25%;
+    top: 12%;
+
+    @include m.for-phone-and-up {
+      /* stylelint-disable-next-line property-disallowed-list */
+      font-size: inherit;
+      top: 20%;
+    }
+
+    @include m.for-tablet-and-up {
+      top: 25%;
+    }
   }
 
   .autocomplete {

diff --git a/packages/frontend/app/styles/components/ilios-header.scss b/packages/frontend/app/styles/components/ilios-header.scss
@@ -3,6 +3,7 @@
 
 .ilios-header {
   background-color: c.$orange;
+  display: grid;
 
   h1 {
     @include m.visually-hidden;
@@ -18,16 +19,39 @@
     background: transparent;
     grid-area: tools;
     margin-right: 0.25rem;
-    padding: 0.25rem 0;
+    padding: 0;
     display: grid;
     justify-content: end;
     grid-template-areas:
       ". locale user guide"
       "search search search search";
     row-gap: 0.25rem;
 
-    @include m.for-tablet-and-up {
-      grid-template-areas: "search locale user guide";
+    @include m.for-phone-and-up {
+      padding: 0.2rem 0 0;
+    }
+
+    .global-search-box,
+    .locale-chooser,
+    .user-menu,
+    .user-guide-link {
+      & button,
+      & input {
+        @include m.for-laptop-and-up {
+          /* stylelint-disable property-disallowed-list */
+          font-size: 16px;
+        }
+      }
+    }
+
+    .locale-chooser,
+    .user-menu,
+    .user-guide-link {
+      button {
+        @include m.for-laptop-and-up {
+          padding: 4px;
+        }
+      }
     }
 
     .locale-chooser {
@@ -39,10 +63,6 @@
     .user-guide-link {
       display: flex;
       grid-area: guide;
-
-      @include m.for-phone-only {
-        vertical-align: -0.25em;
-      }
     }
 
     .global-search-box {

diff --git a/packages/frontend/app/styles/components/user-guide-link.scss b/packages/frontend/app/styles/components/user-guide-link.scss
@@ -8,6 +8,10 @@ $header-menu-background-color: color.adjust(c.$slightWhite, $lightness: -3%);
 .user-guide-link {
   margin-right: 0.85rem;
 
+  @include cm.for-phone-only {
+    vertical-align: -0.25em;
+  }
+
   a {
     @include cm.ilios-link-button;
     background-color: $header-menu-background-color;
@@ -30,8 +34,15 @@ $header-menu-background-color: color.adjust(c.$slightWhite, $lightness: -3%);
     }
 
     @include cm.for-phone-only {
-      /* stylelint-disable property-disallowed-list */
+      /* stylelint-disable-next-line property-disallowed-list */
       font-size: 2.75vw;
+      vertical-align: -0.25em;
+    }
+
+    @include cm.for-laptop-and-up {
+      /* stylelint-disable-next-line property-disallowed-list */
+      font-size: 14px;
+      padding: 3px;
     }
   }
 }
diff --git a/packages/frontend/app/styles/layout/_layout.scss b/packages/frontend/app/styles/layout/_layout.scss
@@ -42,6 +42,28 @@
       "footer footer";
     grid-template-rows: auto auto 1fr 20px;
 
+    & > header {
+      @include m.for-tablet-and-up {
+        display: block;
+      }
+
+      & > .tools {
+        padding: 0.25rem 0 0;
+
+        @include m.for-phone-and-up {
+          padding: 0.4rem 0;
+        }
+
+        @include m.for-tablet-and-up {
+          grid-template-areas: "search locale user guide";
+        }
+
+        @include m.for-laptop-and-up {
+          padding: 6.4px 0;
+        }
+      }
+    }
+
     @include m.for-tablet-and-up {
       grid-template-rows: 42px auto 1fr 20px;
     }