JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: improved responsiveness of new nav sidebar

Browse Source 
Since we don't have main content responsiveness I decided to make sidebar shrink earlier (1280px).
Added event listener for dropdowns to close if navigation sidebar is being scrolled vertically.

Change-Id: I15ac2ae652aedfc06fd331585bb64b69076c0eed
This commit is contained in:
Vitalii Shpital 2021-10-26 14:03:57 +03:00
parent 1409288c49
commit 5bbb69886a
3 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
View File

@ -287,7 +287,7 @@ export default class AccountArea extends Vue {
background-color: #f7f8fb; background-color: #f7f8fb;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 1280px) {
.account-area__info { .account-area__info {
display: none; display: none;

21
web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue
View File

@ -3,7 +3,7 @@
<template> <template>
<div v-if="!isNavigationHidden" class="navigation-area"> <div v-if="!isNavigationHidden" class="navigation-area">
<div class="navigation-area__container"> <div ref="navigationContainer" class="navigation-area__container">
<div class="navigation-area__container__wrap"> <div class="navigation-area__container__wrap">
<LogoIcon class="navigation-area__container__wrap__logo" @click.stop="onLogoClick" /> <LogoIcon class="navigation-area__container__wrap__logo" @click.stop="onLogoClick" />
<SmallLogoIcon class="navigation-area__container__wrap__small-logo" @click.stop="onLogoClick" /> <SmallLogoIcon class="navigation-area__container__wrap__small-logo" @click.stop="onLogoClick" />
@ -209,8 +209,25 @@ export default class NewNavigationArea extends Vue {
public $refs!: { public $refs!: {
resourcesContainer: HTMLDivElement; resourcesContainer: HTMLDivElement;
quickStartContainer: HTMLDivElement; quickStartContainer: HTMLDivElement;
navigationContainer: HTMLDivElement;
}; };
/**
* Mounted hook after initial render.
* Adds scroll event listener to close dropdowns.
*/
public mounted(): void {
this.$refs.navigationContainer.addEventListener('scroll', this.closeDropdowns)
}
/**
* Mounted hook before component destroy.
* Removes scroll event listener.
*/
public beforeDestroy(): void {
this.$refs.navigationContainer.removeEventListener('scroll', this.closeDropdowns)
}
/** /**
* Reloads page. * Reloads page.
*/ */
@ -454,7 +471,7 @@ export default class NewNavigationArea extends Vue {
opacity: 0.1; opacity: 0.1;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 1280px) {
.navigation-area { .navigation-area {
min-width: unset; min-width: unset;

2
web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
View File

@ -356,7 +356,7 @@ export default class NewProjectSelection extends Vue {
background-color: #fafafb; background-color: #fafafb;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 1280px) {
.project-selection__selected { .project-selection__selected {