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

web/satellite: new navigation area adaptation implemented (#3093)

Browse Source
This commit is contained in:
Vitalii Shpital 2019-09-20 13:21:22 +03:00 committed by GitHub
parent 74ccc1b86f
commit 756d0ad2b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 279 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/satellite/src/components/account/AccountArea.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="account-area-container">
<h1>Account</h1>
<h1 class="account-area-container__title">Account</h1>
<TabNavigation
class="account-area-container__navigation"
:navigation="navigation"/>
@ -41,15 +41,13 @@ export default class AccountArea extends Vue {
&__navigation {
position: absolute;
right: 55px;
top: 44px;
z-index: 99;
background-color: #F5F6FA;
}
h1 {
&__title {
position: absolute;
left: 55px;
top: 44px;
z-index: 99;
font-family: 'font_bold';
font-size: 24px;
@ -59,4 +57,18 @@ export default class AccountArea extends Vue {
margin-block-end: 0.5em;
}
}
@media screen and (max-width: 1024px) {
.account-area-container {
padding: 44px 40px 55px 40px;
&__navigation {
right: 40px;
}
&__title {
left: 40px;
}
}
}
</style>

6
web/satellite/src/components/apiKeys/ApiKeysArea.vue
View File

@ -457,6 +457,12 @@ export default class ApiKeysArea extends Vue {
width: 0;
}
@media screen and (max-width: 1024px) {
.api-keys-area {
padding: 40px 40px 55px 40px;
}
}
@media screen and (max-height: 800px) {
.api-keys-items {

15
web/satellite/src/components/buckets/BucketArea.vue
View File

@ -120,7 +120,7 @@ export default class BucketArea extends Vue {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 40px 40px 20px 60px;
padding: 40px 60px 20px 60px;
p {
font-family: 'font_bold';
@ -139,7 +139,7 @@ export default class BucketArea extends Vue {
.buckets-container,
.buckets-notification-container {
padding: 0 40px 0 60px;
padding: 0 60px 0 60px;
}
.buckets-notification {
@ -159,6 +159,17 @@ export default class BucketArea extends Vue {
}
}
@media screen and (max-width: 1024px) {
.buckets-header {
padding: 40px 40px 20px 40px;
}
.buckets-container,
.buckets-notification-container {
padding: 0 40px 0 40px;
}
}
@media screen and (max-height: 880px) {
.buckets-overflow {
overflow-y: scroll;

7
web/satellite/src/components/buckets/NoBucketsArea.vue
View File

@ -18,7 +18,7 @@
<h1 class="no-buckets-header__title">Buckets</h1>
</div>
<h3 class="no-buckets-header-info">To create a bucket, please use the following CLI documentation. We will soon enable client-side encryption through the browser, at which time you will be able to create buckets and upload objects directly from this dashboard.</h3>
<div class="divider"></div>
<div class="buckets-divider"></div>
<h2 class="no-buckets-subtitle">Create Buckets and Upload Objects from the Command Line</h2>
<div class="no-buckets-example-container">
<div class="no-buckets-example-container__info">
@ -126,8 +126,7 @@ export default class NoBucketArea extends Vue {}
justify-content: flex-start;
}
.divider {
width: 100%;
.buckets-divider {
height: 1px;
background-color: #AFB7C1;
margin-top: 12px;
@ -218,7 +217,7 @@ export default class NoBucketArea extends Vue {}
@media screen and (max-width: 1024px) {
.no-buckets-area {
padding: 52px 40px 52px 34px;
padding: 52px 40px 52px 40px;
}
}

7
web/satellite/src/components/header/AccountButton.vue
View File

@ -59,8 +59,6 @@ export default class AccountButton extends Vue {
.account-button-container {
position: relative;
padding-left: 10px;
padding-right: 10px;
background-color: #FFFFFF;
cursor: pointer;
@ -116,10 +114,11 @@ export default class AccountButton extends Vue {
}
}
@media screen and (max-width: 720px) {
@media screen and (max-width: 1024px) {
.account-button-toggle-container {
&__user-name {
&__user-name,
&__expander-area {
display: none;
}
}

62
web/satellite/src/components/header/Header.vue
View File

@ -1,24 +1,14 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="header-container">
<div class="header-container__left-area">
<ProjectSelectionArea class="header-container__left-area__project-selection"/>
</div>
<div class="header-container__right-area">
<NewProjectArea class="header-container__right-area__new-project" />
<AccountButton class="header-container__right-area__account-button" />
</div>
<ProjectCreationSuccessPopup/>
</div>
</template>
<template src="./header.html"></template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import NewProjectArea from '@/components/header/NewProjectArea.vue';
import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import ProjectCreationSuccessPopup from '@/components/project/ProjectCreationSuccessPopup.vue';
import AccountButton from './AccountButton.vue';
@ -29,42 +19,20 @@ import AccountButton from './AccountButton.vue';
ProjectSelectionArea,
NewProjectArea,
AccountButton,
NavigationArea,
},
})
export default class DashboardHeader extends Vue {}
export default class DashboardHeader extends Vue {
public isNavigationVisible: boolean = false;
public toggleNavigationVisibility(): void {
this.isNavigationVisible = !this.isNavigationVisible;
}
public onLogoClick(): void {
location.reload();
}
}
</script>
<style scoped lang="scss">
.header-container {
width: 100%;
height: 100px;
min-height: 100px;
background-color: white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding-left: 60px;
padding-right: 60px;
&__left-area {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
&__right-area {
@extend .header-container__left-area;
justify-content: flex-end;
position: absolute;
right: 60px;
width: 30%;
&__new-project {
margin-right: 24px;
}
}
}
</style>
<style src="./header.scss" lang="scss"></style>

6
web/satellite/src/components/header/NewProjectArea.vue
View File

@ -40,8 +40,6 @@ export default class NewProjectArea extends Vue {
<style scoped lang="scss">
.new-project-container {
padding-left: 10px;
padding-right: 10px;
background-color: #FFFFFF;
}
@ -68,7 +66,7 @@ export default class NewProjectArea extends Vue {
&:hover {
background-color: #2683FF;
border: 1px solid #2683FF;
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
h1 {
color: white;
@ -79,7 +77,7 @@ export default class NewProjectArea extends Vue {
.new-project-button-container.active {
background-color: #2683FF;
border: 1px solid #2683FF;
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
h1 {
color: white;

46
web/satellite/src/components/header/header.html Normal file
View File

@ -0,0 +1,46 @@
<!--Copyright (C) 2019 Storj Labs, Inc.-->
<!--See LICENSE for copying information.-->
<div class="dashboard-header-container">
<div class="dashboard-header-container__left-area">
<svg
class="dashboard-header-container__left-area__menu-button"
v-if="!isNavigationVisible"
@click.stop="toggleNavigationVisibility"
width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
<rect y="6.31055" width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
<rect y="12.6206" width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
</svg>
<div class="dashboard-header-container__left-area__close-button" v-if="isNavigationVisible" @click.stop="toggleNavigationVisibility">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="20" fill="#F5F6FA"/>
<path d="M14.4015 13.2402C14.8097 13.6484 15.2211 14.0598 15.6292 14.468L18.5784 17.4171C19.7631 18.6018 20.9477 19.7864 22.1363 20.975L25.2198 24.0585C25.7199 24.5586 26.2302 25.0458 26.7175 25.5562C26.7239 25.5626 26.7303 25.5691 26.7374 25.5761C27.0434 25.8821 27.0633 26.4381 26.7374 26.7409C26.4083 27.0436 25.8979 27.0668 25.5727 26.7409C25.1645 26.3327 24.7531 25.9213 24.3449 25.5131L21.3957 22.564C20.2111 21.3793 19.0265 20.1947 17.8379 19.0061L14.7544 15.9226C14.2543 15.4225 13.7439 14.9353 13.2567 14.4249C13.2503 14.4185 13.2438 14.412 13.2368 14.405C12.9308 14.099 12.9108 13.543 13.2368 13.2402C13.5659 12.9375 14.0756 12.9143 14.4015 13.2402Z" fill="#2B3543"/>
<path d="M26.7362 14.4018C26.328 14.8099 25.9166 15.2213 25.5085 15.6295L22.5593 18.5787C21.3746 19.7634 20.19 20.948 19.0014 22.1366L15.918 25.22C15.4179 25.7201 14.9306 26.2305 14.4202 26.7177C14.4138 26.7242 14.4074 26.7306 14.4003 26.7377C14.0943 27.0437 13.5383 27.0636 13.2356 26.7377C12.9328 26.4086 12.9097 25.8982 13.2356 25.5729C13.6437 25.1647 14.0551 24.7534 14.4633 24.3452L17.4125 21.396C18.5972 20.2113 19.7818 19.0267 20.9704 17.8381L24.0538 14.7547C24.5539 14.2546 25.0412 13.7442 25.5515 13.2569C25.558 13.2505 25.5644 13.2441 25.5715 13.237C25.8774 12.931 26.4335 12.9111 26.7362 13.237C27.039 13.5661 27.0621 14.0759 26.7362 14.4018Z" fill="#2B3543"/>
</svg>
<p class="dashboard-header-container__left-area__close-button__title">Close</p>
</div>
<ProjectSelectionArea class="dashboard-header-container__left-area__project-selection"/>
</div>
<svg class="storj-title" @click.stop="onLogoClick" width="82" height="18" viewBox="0 0 82 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M5.22457 3.77689C4.86259 4.07571 4.6816 4.4582 4.6816 4.94826C4.6816 5.43832 4.89879 5.82081 5.34523 6.10768C5.79167 6.39455 6.80521 6.72922 8.40998 7.12367C10.0148 7.51811 11.2455 8.1038 12.1384 8.88073C13.0192 9.65766 13.4656 10.8051 13.4656 12.2992C13.4656 13.7933 12.8985 15.0125 11.7643 15.9448C10.6301 16.8771 9.14601 17.3433 7.28785 17.3433C4.62127 17.3433 2.22015 16.3632 0.0844727 14.4029L1.19454 13.0283C1.79784 12.2992 2.87171 12.1677 3.656 12.6937C4.97118 13.5782 6.20191 14.0204 7.36024 14.0204C8.048 14.0204 8.59097 13.877 8.98915 13.5782C9.38733 13.2794 9.58038 12.8849 9.58038 12.3829C9.58038 11.8809 9.37526 11.4864 8.95295 11.1876C8.53064 10.8888 7.71016 10.59 6.46736 10.2912C4.51268 9.8489 3.07683 9.23931 2.17188 8.49824C1.25487 7.75716 0.80843 6.59774 0.80843 5.01998C0.80843 3.43026 1.3876 2.21107 2.53386 1.35047C3.68013 0.489871 5.11598 0.0595703 6.82934 0.0595703C7.95148 0.0595703 9.07361 0.250815 10.2078 0.633304C11.3299 1.01579 12.3073 1.55367 13.1519 2.25888L12.3194 3.45416C11.7523 4.255 10.6904 4.51796 9.80963 4.08766C8.79609 3.58564 7.77049 3.33463 6.72075 3.33463C6.08125 3.33463 5.58655 3.47807 5.22457 3.77689Z" fill="#2683FF"/>
<path d="M25.0851 3.66915V17.1399H21.3205V3.66915H16.5424V2.12724C16.5424 1.19492 17.3026 0.441895 18.2437 0.441895H29.8512V1.74475C29.8512 2.80855 28.9824 3.65719 27.9206 3.65719H25.0851V3.66915Z" fill="#2683FF"/>
<path d="M47.1779 14.8335C45.4766 16.483 43.3771 17.3077 40.8794 17.3077C38.3939 17.3077 36.2944 16.483 34.581 14.8335C32.8797 13.184 32.023 11.1401 32.023 8.68974C32.023 6.23942 32.8797 4.18354 34.581 2.546C36.2823 0.89652 38.3818 0.0717773 40.8794 0.0717773C43.365 0.0717773 45.4645 0.89652 47.1779 2.546C48.8792 4.19549 49.7358 6.23942 49.7358 8.68974C49.7358 11.1401 48.8792 13.184 47.1779 14.8335ZM45.8989 8.68974C45.8989 7.19564 45.4162 5.92864 44.451 4.8768C43.4857 3.82495 42.3032 3.29903 40.8915 3.29903C39.4798 3.29903 38.2973 3.82495 37.3321 4.8768C36.3668 5.92864 35.8841 7.19564 35.8841 8.68974C35.8841 10.1838 36.3668 11.4389 37.3321 12.4907C38.2973 13.5306 39.4798 14.0565 40.8915 14.0565C42.3032 14.0565 43.4857 13.5306 44.451 12.4907C45.4162 11.4508 45.8989 10.1838 45.8989 8.68974Z" fill="#2683FF"/>
<path d="M66.8695 5.98799C66.8695 8.66541 65.7956 10.3866 63.66 11.1755L67.9313 17.1399H65.3251C64.0581 17.1399 62.8757 16.5303 62.1517 15.5024L59.5696 11.821H56.9513V15.4905C56.9513 16.4108 56.2032 17.1519 55.2741 17.1519H53.1867V0.441895H59.5696C62.1879 0.441895 64.0581 0.884148 65.1803 1.7567C66.3024 2.62926 66.8695 4.03968 66.8695 5.98799ZM62.3327 7.9602C62.8033 7.54185 63.0325 6.88445 63.0325 5.98799C63.0325 5.09153 62.7912 4.46998 62.3086 4.13531C61.8259 3.80063 60.9813 3.63329 59.7747 3.63329H56.9513V8.58174H59.7023C60.9934 8.58174 61.8621 8.37855 62.3327 7.9602Z" fill="#2683FF"/>
<path d="M72.5888 3.64524V1.82842C72.5888 1.06344 73.2162 0.441895 73.9884 0.441895H81.3607V11.3309C81.3607 13.327 80.8419 14.8091 79.8042 15.8012C78.7665 16.7933 77.4393 17.2834 75.8104 17.2834C74.5193 17.2834 73.3248 16.9726 72.2389 16.3391C71.2012 15.7415 70.9357 14.3788 71.6356 13.4107L72.456 12.2871C73.4696 13.3748 74.5314 13.9127 75.6415 13.9127C76.1724 13.9127 76.6309 13.7095 77.0049 13.3031C77.379 12.8967 77.572 12.2871 77.572 11.4743V3.64524H72.5888Z" fill="#2683FF"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="81.4211" height="17.3913" fill="white"/>
</clipPath>
</defs>
</svg>
<div class="dashboard-header-container__right-area">
<NewProjectArea class="dashboard-header-container__right-area__new-project" />
<AccountButton class="dashboard-header-container__right-area__account-button" />
</div>
<ProjectCreationSuccessPopup/>
<NavigationArea class="adapted-navigation" v-if="isNavigationVisible" />
<div class="navigation-blur" v-if="isNavigationVisible"></div>
</div>

94
web/satellite/src/components/header/header.scss Normal file
View File

@ -0,0 +1,94 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
.dashboard-header-container {
font-family: 'font_medium';
height: 100px;
min-height: 100px;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 55px;
position: relative;
&__left-area,
&__right-area {
display: flex;
align-items: center;
&__menu-button {
display: none;
}
&__close-button {
display: flex;
align-items: center;
cursor: pointer;
&__title {
margin-left: 13px;
font-size: 16px;
line-height: 23px;
color: #A9B5C1;
}
}
&__new-project {
margin-right: 25px;
}
}
}
.storj-title {
display: none;
}
.adapted-navigation {
position: absolute;
top: 100px;
left: 0;
}
.navigation-blur {
height: 100vh;
width: 744px;
position: absolute;
top: 100px;
left: 280px;
z-index: 100;
background: rgba(134, 134, 148, 0.4);
}
@media screen and (min-width: 1025px) {
.adapted-navigation,
.navigation-blur,
.dashboard-header-container__left-area__close-button {
display: none;
}
}
@media screen and (max-width: 1024px) {
.dashboard-header-container {
padding: 0 40px;
&__left-area {
&__project-selection {
display: none;
}
&__menu-button {
display: block;
cursor: pointer;
}
}
}
.storj-title {
display: block;
cursor: pointer;
position: absolute;
left: calc(50% - 41px);
}
}

14
web/satellite/src/components/header/projectSelection/ProjectSelectionArea.vue
View File

@ -59,8 +59,6 @@ export default class ProjectSelectionArea extends Vue {
<style scoped lang="scss">
.project-selection-container {
position: relative;
padding-left: 10px;
padding-right: 10px;
background-color: #FFFFFF;
cursor: pointer;
@ -109,4 +107,16 @@ export default class ProjectSelectionArea extends Vue {
height: 28px;
}
}
@media screen and (max-width: 1024px) {
.project-selection-container {
margin-right: 30px;
padding-right: 10px;
}
.project-selection-toggle-container {
justify-content: space-between;
margin-left: 10px;
}
}
</style>

6
web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue
View File

@ -146,4 +146,10 @@ export default class ProjectSelectionDropdown extends Vue {
border-radius: 6px;
height: 5px;
}
@media screen and (max-width: 1024px) {
.project-selection-choice-container {
top: 50px;
}
}
</style>

8
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -6,10 +6,16 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
import { RouteConfig } from '@/router';
import { NavigationLink } from '@/types/navigation';
@Component
@Component({
components: {
ProjectSelectionArea,
},
})
export default class NavigationArea extends Vue {
public areResourceItemsShown: boolean = true;
public isResourceButtonShown: boolean = false;

1
web/satellite/src/components/navigation/navigationArea.html
View File

@ -22,6 +22,7 @@
<path d="M60.92 3.11795V0H69V10.3385C69 12.2256 68.52 13.6205 67.56 14.6051C66.6 15.5077 65.4 16 63.88 16C62.04 16 60.36 15.2615 59 13.7846L60.76 11.241C61.72 12.3077 62.68 12.8 63.72 12.8C64.2 12.8 64.6 12.6359 65 12.2256C65.32 11.8154 65.56 11.241 65.56 10.5026V3.0359L60.92 3.11795Z" fill="#2683FF"/>
</svg>
</div>
<ProjectSelectionArea class="project-selection-area"/>
<p class="navigation-area__project-title">PROJECT</p>
<router-link :aria-label="navItem.name" class="navigation-area__item-container" v-bind:class="{disabled: isProjectNotSelected && navItem.path !== '/project-details'}" v-for="navItem in navigation" v-bind:key="navItem.name" :to="navItem.path">
<div class="navigation-area__item-container__link-container" >

71
web/satellite/src/components/navigation/navigationArea.scss
View File

@ -141,7 +141,7 @@ a {
}
.divider {
margin: 0 0 0 65px;
margin-left: 65px;
border-top: 1px solid rgba(169, 181, 193, 0.3);
}
@ -149,56 +149,41 @@ a {
margin: 10px 0 0 65px;
}
@media screen and (max-width: 1024px) {
.navigation-area {
width: 80px;
max-width: 80px;
min-width: 80px;
.project-selection-area {
display: none;
}
&__logo {
margin-left: 20px;
@media screen and (max-width: 1024px) {
.divider {
margin-left: 42px;
}
.navigation-area {
z-index: 200;
&__item-container {
padding-left: 40px;
}
&__logo__text,
&__project-title,
&__resources-title,
&__account-title,
.account-item {
&__account-title {
margin-left: 45px;
}
&__project-title {
border-top: 1px solid rgba(169, 181, 193, 0.3);
padding-top: 20px;
margin-top: 5px;
}
&__logo {
display: none;
}
&__item-container {
padding-left: 26px;
&__link-container {
h1 {
display: none;
}
&__add-button {
display: none;
}
}
.project-selection-area {
display: block;
margin-left: 35px;
}
}
}
@media screen and (max-height: 800px) {
.navigation-area {
&__item-container {
height: 45px;
}
}
}
@media screen and (max-height: 730px) {
.navigation-area {
&__item-container {
height: 40px;
}
}
}

2
web/satellite/src/components/project/ProjectDetails.vue
View File

@ -226,7 +226,7 @@ export default class ProjectDetailsArea extends Vue {
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 65vw;
margin-right: 20px;
h3 {
width: 100%;

10
web/satellite/src/components/project/ProjectOverviewArea.vue
View File

@ -61,4 +61,14 @@ export default class ProjectOverviewArea extends Vue {
z-index: 99;
}
}
@media screen and (max-width: 1024px) {
.project-overview {
padding: 44px 40px 55px 40px;
&__navigation {
right: 40px;
}
}
}
</style>

6
web/satellite/src/components/team/ProjectMembersArea.vue
View File

@ -187,6 +187,12 @@ export default class ProjectMembersArea extends Vue {
margin-left: -25px;
}
@media screen and (max-width: 1024px) {
.team-area {
padding: 40px 40px 55px 40px;
}
}
@media screen and (max-height: 800px) {
.team-area {

9
web/satellite/src/views/Dashboard.vue
View File

@ -7,7 +7,7 @@
<img src="../../static/images/register/Loading.gif">
</div>
<div v-if="!isLoading" class="dashboard-container__wrap">
<NavigationArea />
<NavigationArea class="regular-navigation" />
<div class="dashboard-container__wrap__column">
<DashboardHeader />
<div class="dashboard-container__main-area">
@ -158,6 +158,12 @@ export default class Dashboard extends Vue {
}
}
@media screen and (max-width: 1024px) {
.regular-navigation {
display: none;
}
}
@media screen and (max-width: 720px) {
.dashboard-container {
&__main-area{
@ -174,7 +180,6 @@ export default class Dashboard extends Vue {
top: 0;
left: 0;
right: 0;
left: 0;
height: 100vh;
z-index: 100;
background-color: rgba(134, 134, 148, 1);

2
web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap
View File

@ -19,6 +19,7 @@ exports[`NavigationArea snapshot not changed with project 1`] = `
<path d="M58.0059 5.36082C58.0059 7.91752 57.0118 9.56701 54.9408 10.3093L59 16H54.6095L51.0473 10.8866H48.5621V16H45V0H51.0473C53.5325 0 55.355 0.412371 56.3491 1.23711C57.5089 2.14433 58.0059 3.46392 58.0059 5.36082ZM53.6982 7.25773C54.1124 6.84536 54.3609 6.26804 54.3609 5.36082C54.3609 4.45361 54.1124 3.87629 53.6982 3.62887C53.2012 3.29897 52.4556 3.13402 51.2959 3.13402H48.645V7.83505H51.2959C52.4556 7.83505 53.284 7.58763 53.6982 7.25773Z" fill="#2683FF"></path>
<path d="M60.92 3.11795V0H69V10.3385C69 12.2256 68.52 13.6205 67.56 14.6051C66.6 15.5077 65.4 16 63.88 16C62.04 16 60.36 15.2615 59 13.7846L60.76 11.241C61.72 12.3077 62.68 12.8 63.72 12.8C64.2 12.8 64.6 12.6359 65 12.2256C65.32 11.8154 65.56 11.241 65.56 10.5026V3.0359L60.92 3.11795Z" fill="#2683FF"></path>
</svg></div>
<projectselectionarea-stub class="project-selection-area"></projectselectionarea-stub>
<p class="navigation-area__project-title">PROJECT</p>
<router-link-stub to="/project-overview" tag="a" event="click" aria-label="Overview" class="navigation-area__item-container">
<div class="navigation-area__item-container__link-container">
@ -138,6 +139,7 @@ exports[`NavigationArea snapshot not changed without project 1`] = `
<path d="M58.0059 5.36082C58.0059 7.91752 57.0118 9.56701 54.9408 10.3093L59 16H54.6095L51.0473 10.8866H48.5621V16H45V0H51.0473C53.5325 0 55.355 0.412371 56.3491 1.23711C57.5089 2.14433 58.0059 3.46392 58.0059 5.36082ZM53.6982 7.25773C54.1124 6.84536 54.3609 6.26804 54.3609 5.36082C54.3609 4.45361 54.1124 3.87629 53.6982 3.62887C53.2012 3.29897 52.4556 3.13402 51.2959 3.13402H48.645V7.83505H51.2959C52.4556 7.83505 53.284 7.58763 53.6982 7.25773Z" fill="#2683FF"></path>
<path d="M60.92 3.11795V0H69V10.3385C69 12.2256 68.52 13.6205 67.56 14.6051C66.6 15.5077 65.4 16 63.88 16C62.04 16 60.36 15.2615 59 13.7846L60.76 11.241C61.72 12.3077 62.68 12.8 63.72 12.8C64.2 12.8 64.6 12.6359 65 12.2256C65.32 11.8154 65.56 11.241 65.56 10.5026V3.0359L60.92 3.11795Z" fill="#2683FF"></path>
</svg></div>
<projectselectionarea-stub class="project-selection-area"></projectselectionarea-stub>
<p class="navigation-area__project-title">PROJECT</p>
<router-link-stub to="/project-overview" tag="a" event="click" aria-label="Overview" class="navigation-area__item-container disabled">
<div class="navigation-area__item-container__link-container">

2
web/satellite/tests/unit/views/__snapshots__/Dashboard.spec.ts.snap
View File

@ -4,7 +4,7 @@ exports[`Dashboard renders correctly when data is loaded 1`] = `
<div class="dashboard-container">
<!---->
<div class="dashboard-container__wrap">
<navigationarea-stub></navigationarea-stub>
<navigationarea-stub class="regular-navigation"></navigationarea-stub>
<div class="dashboard-container__wrap__column">
<dashboardheader-stub></dashboardheader-stub>
<div class="dashboard-container__main-area">