web/satellite: make all header components visible on smaller screen s…

…izes Change-Id: If84ad344a40bb666250106d2f2b9ffaa01413296
storj · Oct 4, 2021 · 10a468f · 10a468f
1 parent 854b66f
commit 10a468f
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 13 deletions.
diff --git a/web/satellite/src/components/header/HeaderArea.vue b/web/satellite/src/components/header/HeaderArea.vue
@@ -19,9 +19,11 @@
                     @click.stop="onLogoClick"
                 />
             </div>
-            <ProjectSelection class="project-selection" />
-            <ResourcesSelection class="resources-selection" />
-            <SettingsSelection class="settings-selection" />
+            <div class="header-container__left-area__selection-wrapper">
+                <ProjectSelection class="project-selection" />
+                <ResourcesSelection class="resources-selection" />
+                <SettingsSelection class="settings-selection" />
+            </div>
         </div>
         <div class="header-container__right-area">
             <VInfo
@@ -170,6 +172,10 @@ export default class HeaderArea extends Vue {
                     }
                 }
             }
+
+            &__selection-wrapper {
+                display: flex;
+            }
         }
 
         &__right-area {
@@ -240,7 +246,7 @@ export default class HeaderArea extends Vue {
         position: absolute;
         top: 62px;
         left: 220px;
-        z-index: 100;
+        z-index: 99;
         background: rgba(134, 134, 148, 0.4);
     }
 
@@ -291,4 +297,36 @@ export default class HeaderArea extends Vue {
             margin-left: 0;
         }
     }
+
+    @media screen and (max-width: 1024px) {
+
+        .header-container {
+
+            &__left-area {
+
+                &__logo-area {
+                    width: 100px;
+                }
+            }
+        }
+
+        .project-selection,
+        .resources-selection {
+            margin-right: 15px;
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+
+        .header-container {
+
+            &__left-area {
+
+                &__selection-wrapper {
+                    display: none;
+                }
+            }
+        }
+    }
+
 </style>
diff --git a/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue b/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue
@@ -2,12 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="project-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
+    <div class="project-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown, navigation: inNavigation }">
         <div
             class="project-selection__toggle-container"
             @click.stop="toggleSelection"
         >
-            <p class="project-selection__toggle-container__name" :class="{ white: isDropdownShown }">Projects</p>
+            <p class="project-selection__toggle-container__name" :class="{ 'white': isDropdownShown, 'name-navigation': inNavigation }">Projects</p>
             <ExpandIcon
                 class="project-selection__toggle-container__expand-icon"
                 :class="{ expanded: isDropdownShown }"
@@ -17,14 +17,15 @@
                 v-show="isDropdownShown"
                 v-click-outside="closeDropdown"
                 :is-loading="isLoading"
+                in-navigation="true"
                 @close="closeDropdown"
             />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
 
@@ -42,6 +43,10 @@ import ProjectDropdown from './ProjectDropdown.vue';
     },
 })
 export default class ProjectSelection extends Vue {
+
+    @Prop({default: false})
+    protected readonly inNavigation: boolean;
+
     private isLoading = false;
 
     /**
@@ -132,6 +137,11 @@ export default class ProjectSelection extends Vue {
                 margin: 0;
             }
 
+            &__name.name-navigation {
+                color: #1b2533;
+                white-space: nowrap;
+            }
+
             &__expand-icon {
                 margin-left: 15px;
             }
@@ -165,4 +175,31 @@ export default class ProjectSelection extends Vue {
         font-family: 'font_bold', sans-serif;
         color: #fff !important;
     }
+
+    .navigation {
+        background: none;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        padding: 10px;
+        width: calc(100% - 20px);
+        margin-bottom: 15px;
+        text-decoration: none;
+
+        &:hover {
+            background-color: #0068dc;
+
+            .project-selection__toggle-container__name {
+                color: #fff;
+            }
+
+            .black-arrow-expand-path {
+                fill: #fff;
+            }
+        }
+    }
+
+    .navigation.active {
+        background: #0068dc !important;
+    }
 </style>
diff --git a/web/satellite/src/components/header/resourcesDropdown/ResourcesSelection.vue b/web/satellite/src/components/header/resourcesDropdown/ResourcesSelection.vue
@@ -2,12 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="resources-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
+    <div class="resources-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown, navigation: inNavigation }">
         <div
             class="resources-selection__toggle-container"
             @click.stop="toggleDropdown"
         >
-            <p class="resources-selection__toggle-container__name" :class="{ white: isDropdownShown }">Resources</p>
+            <p class="resources-selection__toggle-container__name" :class="{ 'white': isDropdownShown, 'name-navigation': inNavigation }">Resources</p>
             <ExpandIcon
                 class="resources-selection__toggle-container__expand-icon"
                 :class="{ expanded: isDropdownShown }"
@@ -16,14 +16,15 @@
             <ResourcesDropdown
                 v-show="isDropdownShown"
                 v-click-outside="closeDropdown"
+                in-navigation="true"
                 @close="closeDropdown"
             />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
 
@@ -40,6 +41,10 @@ import ResourcesDropdown from './ResourcesDropdown.vue';
     },
 })
 export default class ResourcesSelection extends Vue {
+
+    @Prop({default: false})
+    protected readonly inNavigation: boolean;
+
     /**
      * Indicates if current route is onboarding tour.
      */
@@ -107,6 +112,11 @@ export default class ResourcesSelection extends Vue {
                 margin: 0;
             }
 
+            &__name.name-navigation {
+                color: #1b2533;
+                white-space: nowrap;
+            }
+
             &__expand-icon {
                 margin-left: 15px;
             }
@@ -140,4 +150,35 @@ export default class ResourcesSelection extends Vue {
         font-family: 'font_bold', sans-serif;
         color: #fff !important;
     }
+
+    .navigation {
+        background: none;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        padding: 10px;
+        width: calc(100% - 20px);
+        margin-bottom: 15px;
+        text-decoration: none;
+
+        &:hover {
+            background-color: #0068dc;
+
+            .resources-selection__toggle-container__name {
+                color: #fff;
+            }
+
+            .black-arrow-expand-path {
+                fill: #fff;
+            }
+        }
+
+        .active {
+            background: #0068dc !important;
+        }
+    }
+
+    .navigation.active {
+        background: #0068dc !important;
+    }
 </style>
diff --git a/web/satellite/src/components/header/settingsDropdown/SettingsSelection.vue b/web/satellite/src/components/header/settingsDropdown/SettingsSelection.vue
@@ -2,12 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="settings-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
+    <div class="settings-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown, navigation: inNavigation }">
         <div
             class="settings-selection__toggle-container"
             @click.stop="toggleDropdown"
         >
-            <p class="settings-selection__toggle-container__name" :class="{ white: isDropdownShown }">Settings</p>
+            <p class="settings-selection__toggle-container__name" :class="{ 'white': isDropdownShown, 'name-navigation': inNavigation }">Settings</p>
             <ExpandIcon
                 class="settings-selection__toggle-container__expand-icon"
                 :class="{ expanded: isDropdownShown }"
@@ -16,14 +16,15 @@
             <SettingsDropdown
                 v-show="isDropdownShown"
                 v-click-outside="closeDropdown"
+                in-navigation="true"
                 @close="closeDropdown"
             />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
 
@@ -40,6 +41,10 @@ import SettingsDropdown from './SettingsDropdown.vue';
     },
 })
 export default class SettingsSelection extends Vue {
+
+    @Prop({default: false})
+    protected readonly inNavigation: boolean;
+
     /**
      * Indicates if current route is onboarding tour.
      */
@@ -106,6 +111,11 @@ export default class SettingsSelection extends Vue {
                 margin: 0;
             }
 
+            &__name.name-navigation {
+                color: #1b2533;
+                white-space: nowrap;
+            }
+
             &__expand-icon {
                 margin-left: 15px;
             }
@@ -139,4 +149,34 @@ export default class SettingsSelection extends Vue {
         font-family: 'font_bold', sans-serif;
         color: #fff !important;
     }
+
+    .navigation {
+        background: none;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        padding: 10px;
+        width: calc(100% - 20px);
+        text-decoration: none;
+
+        &:hover {
+            background-color: #0068dc;
+
+            .settings-selection__toggle-container__name {
+                color: #fff;
+            }
+
+            .black-arrow-expand-path {
+                fill: #fff;
+            }
+        }
+
+        .active {
+            background: #0068dc !important;
+        }
+    }
+
+    .navigation.active {
+        background: #0068dc !important;
+    }
 </style>