feat: shorter label for narrow devices

Enterprise-CMCS · Jan 8, 2025 · 96d55be · 96d55be
1 parent d29caff
commit 96d55be
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 26 deletions.
diff --git a/solution/backend/regulations/templates/regulations/partials/header.html b/solution/backend/regulations/templates/regulations/partials/header.html
@@ -40,10 +40,7 @@
         </template>
         <template #get-access>
             {% if not user.is_authenticated %}
-                <access-link
-                    class="header__access-link"
-                    base="{% url 'homepage' %}"
-                ></access-link>
+                <access-link base="{% url 'homepage' %}"></access-link>
             {% endif %}
         </template>
     </header-component>

diff --git a/solution/ui/regulations/css/scss/partials/_header.scss b/solution/ui/regulations/css/scss/partials/_header.scss
@@ -119,7 +119,7 @@ header {
 
             &--first {
                 height: 56px;
-                gap: 1rem;
+                gap: 1.5rem;
             }
 
             &--second {
@@ -152,7 +152,17 @@ header {
         }
 
         .header__access-link {
-            margin-left: 0.5rem;
+            &--wide {
+                @include custom-max(calc((calc($eds-width-sm - 1px)) / 1px)) {
+                    display: none;
+                }
+            }
+
+            &--narrow {
+                @include custom-min(calc($eds-width-sm / 1px)) {
+                    display: none;
+                }
+            }
 
             &.header--links__anchor {
                 @include header__anchor--complete;
@@ -543,10 +553,10 @@ header {
                     padding: 0;
                 }
             }
-
         }
 
-        .header--search:has(.search__form--expanded) + .header--sign-in {
+        .header--search:has(.search__form--expanded) ~ .header--sign-in,
+        .header--search:has(.search__form--expanded) ~ .header__access-link {
             display: none;
         }
     }

diff --git a/solution/ui/regulations/eregs-vite/src/components/AccessLink.vue b/solution/ui/regulations/eregs-vite/src/components/AccessLink.vue
@@ -12,13 +12,23 @@ const props = defineProps({
 const getAccessUrl = computed(() => `${props.base}get-account-access/`);
 
 const isActive = window.location.pathname.includes("get-account-access");
+
+const propsObj = {
+    name: "get-account-access",
+    active: isActive,
+    href: getAccessUrl.value,
+};
 </script>
 
 <template>
     <HeaderLink
-        name="get-account-access"
+        v-bind="propsObj"
+        class="header__access-link header__access-link--narrow"
+        label="Get Access"
+    />
+    <HeaderLink
+        v-bind="propsObj"
+        class="header__access-link header__access-link--wide"
         label="Get Account Access"
-        :active="isActive"
-        :href="getAccessUrl"
     />
 </template>
diff --git a/solution/ui/regulations/eregs-vite/src/views/Search.vue b/solution/ui/regulations/eregs-vite/src/views/Search.vue
@@ -292,11 +292,7 @@ getDocsOnLoad();
                     />
                 </template>
                 <template #get-access>
-                    <AccessLink
-                        v-if="!isAuthenticated"
-                        class="header__access-link"
-                        :base="homeUrl"
-                    />
+                    <AccessLink v-if="!isAuthenticated" :base="homeUrl" />
                 </template>
             </HeaderComponent>
         </header>

diff --git a/solution/ui/regulations/eregs-vite/src/views/Statutes.vue b/solution/ui/regulations/eregs-vite/src/views/Statutes.vue
@@ -168,11 +168,7 @@ getStatutesArray();
                     />
                 </template>
                 <template #get-access>
-                    <AccessLink
-                        v-if="!isAuthenticated"
-                        class="header__access-link"
-                        :base="homeUrl"
-                    />
+                    <AccessLink class="header__access-link" :base="homeUrl" />
                 </template>
             </HeaderComponent>
         </header>

diff --git a/solution/ui/regulations/eregs-vite/src/views/Subjects.vue b/solution/ui/regulations/eregs-vite/src/views/Subjects.vue
@@ -388,11 +388,7 @@ getDocSubjects();
                     />
                 </template>
                 <template #get-access>
-                    <AccessLink
-                        v-if="!isAuthenticated"
-                        class="header__access-link"
-                        :base="homeUrl"
-                    />
+                    <AccessLink class="header__access-link" :base="homeUrl" />
                 </template>
             </HeaderComponent>
         </header>