fix(fe:FSADT1-1297): Prevent logout button cut out of the page (#965)

* fix: fix inputMode when input type is tel * fix: prevent layout break on progress indicator When screen's width is really small. * fix: adapt header according to screen size * fix: fix header buttons style on smaller screens * fix: resize header text responsively * docs: update comment * fix: resize header text * use the current gap in the calculation * fix: fix width of button Next * update min size * docs: fix comment * minor adjustments * fix: take scroll bar width into account In case it's on the desktop. * docs: update comment * fix: use 20x20 icons on smaller breakpoints * fix: cancel resizing the text on header * refactor: move media query * fix: keep button Next on larger screens Actually for all breakpoints above 671px. --------- Co-authored-by: Paulo Gomes da Cruz Junior <[email protected]>
bcgov · May 15, 2024 · 59cef60 · 59cef60
1 parent b55de8e
commit 59cef60
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 14 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -47,6 +47,8 @@
   --light-theme-text-text-on-color: #ffffff;
 
   --cds-body-02-font-size: 0.875rem;
+  --heading-compact-02-font-size-rem: 0.875; // This is used to perform calculations only.
+  --heading-compact-02-font-size: calc(var(--heading-compact-02-font-size-rem) * 1rem);
 
   //Buttons
   --cds-button-disabled: #c6c6c8;
@@ -89,6 +91,19 @@
 
   //Layout
   --header-height: 3.5rem;
+
+  /*
+  The expected width of the scroll bar.
+  While this might not match the real value, it should help to make a rough adjustment, at least.
+  The value is in pixels instead of rem because it shouldn't vary with text resize.
+  */
+  --scroll-bar-width-px: 15;
+}
+
+@media screen and (hover: none) {
+  :root {
+    --scroll-bar-width-px: 0; // The scroll bar is hidden on touch devices.
+  }
 }
 
 *,
@@ -173,6 +188,10 @@ cds-progress-step::part(cds--progress-label) {
   padding-right: 0.5rem;
 }
 
+cds-progress-step[vertical]::part(cds--progress-label) {
+  padding-right: 0;
+}
+
 cds-progress-step::part(cds--progress-label):hover {
   box-shadow: none;
   color: unset;
@@ -439,7 +458,7 @@ div#app {
 
   /* Fixed heading styles/heading-compact-02 */
 
-  font-size: 0.875rem;
+  font-size: var(--heading-compact-02-font-size);
   font-style: normal;
   font-weight: 700;
   line-height: 1.125rem;
@@ -1380,6 +1399,31 @@ Useful for scrolling to the *start* of an HTML element without having it covered
 
 /* Small (up to 671px) */
 @media screen and (max-width: 671px) {
+  :root {
+    // variables with the -<unit> suffix should be used for calculations only.
+
+    --cds-header-name-link-gap-vw: 5;
+    --cds-header-name-link-gap: calc(var(--cds-header-name-link-gap-vw) * 1vw);
+  }
+  cds-header a.bclogotop {
+    margin-left: 1rem;
+  }
+
+  .heading-buttons {
+    margin-right: 0;
+    gap: 0;
+  }
+
+  .heading-buttons cds-button svg {
+    // allows icons to render at their full size.
+    block-size: auto;
+    inline-size: auto;
+  }
+
+  cds-header-name::part(link) {
+    gap: min(1rem, var(--cds-header-name-link-gap));
+  }
+
   .content-landing {
     flex-direction: column;
   }
@@ -1484,6 +1528,10 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     width: 100%;
   }
 
+  .screen cds-button span {
+    width: 100%;
+  }
+
   .frame-03 {
     flex-direction: column-reverse;
     align-items: flex-start;
@@ -1569,6 +1617,19 @@ Useful for scrolling to the *start* of an HTML element without having it covered
 @media screen and (min-width: 672px) and (max-width: 1055px) {
   /* Lower range width is still a mess */
 
+  cds-header a.bclogotop {
+    margin-left: 2rem;
+  }
+
+  .heading-buttons {
+    margin-right: 2rem;
+    gap: 0;
+  }
+
+  cds-header-name::part(link) {
+    gap: 1.5rem;
+  }
+
   .content-landing {
     flex-direction: column;
   }
@@ -1656,6 +1717,19 @@ Useful for scrolling to the *start* of an HTML element without having it covered
 
 /* Large (from 1056px to 1311px) */
 @media screen and (min-width: 1056px) and (max-width: 1311px) {
+  cds-header a.bclogotop {
+    margin-left: 2rem;
+  }
+
+  .heading-buttons {
+    margin-right: 2rem;
+    gap: 1.5rem;
+  }
+
+  cds-header-name::part(link) {
+    gap: 1.5rem;
+  }
+
   .screen {
     padding: 1rem 2rem 2rem;
     align-items: center;
@@ -1716,6 +1790,19 @@ Useful for scrolling to the *start* of an HTML element without having it covered
 
 /* X-Large (from 1312px to 1583px) */
 @media screen and (min-width: 1312px) and (max-width: 1583px) {
+  cds-header a.bclogotop {
+    margin-left: 2rem;
+  }
+
+  .heading-buttons {
+    margin-right: 2rem;
+    gap: 2rem;
+  }
+
+  cds-header-name::part(link) {
+    gap: 1.5rem;
+  }
+
   .screen {
     padding: 2.5rem 2rem;
     align-items: center;
@@ -1763,6 +1850,19 @@ Useful for scrolling to the *start* of an HTML element without having it covered
 
 /* XX-Large (from 1584px to 1783px) */
 @media screen and (min-width: 1584px) and (max-width: 1783px) {
+  cds-header a.bclogotop {
+    margin-left: 2.5rem;
+  }
+
+  .heading-buttons {
+    margin-right: 2.5rem;
+    gap: 2.5rem;
+  }
+
+  cds-header-name::part(link) {
+    gap: 1.5rem;
+  }
+
   .screen {
     padding: 2.5rem 2rem;
     align-items: center;

diff --git a/frontend/src/components/MainHeaderComponent.vue b/frontend/src/components/MainHeaderComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect, getCurrentInstance } from "vue";
+import { ref, watchEffect, getCurrentInstance, computed } from "vue";
 import { adminEmail, getObfuscatedEmailLink } from "@/services/ForestClientService";
 
 // Carbon
@@ -18,8 +18,12 @@ import { CONFIRMATION_ROUTE_NAME } from "@/routes";
 // @ts-ignore
 import Logout16 from "@carbon/icons-vue/es/logout/16";
 // @ts-ignore
+import Logout20 from "@carbon/icons-vue/es/logout/20";
+// @ts-ignore
 import Help16 from "@carbon/icons-vue/es/help/16";
 // @ts-ignore
+import Help20 from "@carbon/icons-vue/es/help/20";
+// @ts-ignore
 import Avatar16 from "@carbon/icons-vue/es/user--avatar/24";
 // @ts-ignore
 import Result16 from "@carbon/icons-vue/es/result/16";
@@ -92,11 +96,18 @@ const onClickLogout = () => {
   } else {
     logoutModalActive.value = true;
   }
-}
+};
+
+const headerBarButtonsSize = computed(() =>
+  isSmallScreen.value || isMediumScreen.value ? "lg" : "sm",
+);
+
+const logoutBtnKind = computed(() =>
+  isSmallScreen.value || isMediumScreen.value ? "ghost" : "tertiary",
+);
 </script>
 
 <template>
-
   <cds-header aria-label="Forests Client Management System">
 
     <cds-header-menu-button
@@ -133,22 +144,32 @@ const onClickLogout = () => {
       id="help-btn"
       data-id="help-btn"
       kind="ghost"
-      size="sm"
+      :size="headerBarButtonsSize"
       @click.prevent="helpModalActive = true"
     >
-      <span v-if="!isSmallScreen && !isMediumScreen">Help with application</span>
-      <Help16 slot="icon" />
+      <template v-if="!isSmallScreen && !isMediumScreen">
+        <span>Help with application</span>
+        <Help16 slot="icon" />
+      </template>
+      <template v-else>
+        <Help20 slot="icon" />
+      </template>
     </cds-button>
 
     <cds-button    
       v-if="$session?.isLoggedIn() && !$route.meta.profile"
       data-id="logout-btn"
-      kind="tertiary"
-      size="sm"
+      :kind="logoutBtnKind"
+      :size="headerBarButtonsSize"
       @click.prevent="onClickLogout"
     >
-      <span v-if="!isSmallScreen && !isMediumScreen">Logout</span>
-      <Logout16 slot="icon" />
+      <template v-if="!isSmallScreen && !isMediumScreen">
+        <span>Logout</span>
+        <Logout16 slot="icon" />
+      </template>
+      <template v-else>
+        <Logout20 slot="icon" />
+      </template>
     </cds-button>
     </div>
 

diff --git a/frontend/src/components/forms/TextInputComponent.vue b/frontend/src/components/forms/TextInputComponent.vue
@@ -133,7 +133,7 @@ const ariaInvalidString = computed(() => (error.value ? "true" : "false"));
 const cdsTextInputRef = ref<InstanceType<typeof CDSTextInput> | null>(null);
 
 watch(
-  [cdsTextInputRef, () => props.numeric, isFocused, ariaInvalidString],
+  [cdsTextInputRef, () => props.numeric, () => props.type, isFocused, ariaInvalidString],
   async ([cdsTextInput]) => {
     if (cdsTextInput) {
       // wait for the DOM updates to complete
@@ -154,8 +154,12 @@ watch(
 
       const input = cdsTextInput.shadowRoot?.querySelector("input");
       if (input) {
-        // display either a numeric or an alphanumeric (default) keyboard on mobile devices
-        input.inputMode = props.numeric ? "numeric" : "text";
+        if (props.type === "tel") {
+          input.inputMode = undefined;
+        } else {
+          // display either a numeric or an alphanumeric (default) keyboard on mobile devices
+          input.inputMode = props.numeric ? "numeric" : "text";
+        }
         input.ariaInvalid = ariaInvalidString.value;
 
         if (!originalDescribedBy.value) {