Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - update NavBar style

Browse Source
This commit is contained in:
Sam 2021-08-14 19:59:22 +02:00
parent f381c2dc65
commit 779738dccd
1 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
fittrackee_client/src/components/NavBar.vue
View File

@ -27,14 +27,15 @@
<div class="nav-item">{{ t('statistics.STATISTICS') }}</div> <div class="nav-item">{{ t('statistics.STATISTICS') }}</div>
<div class="nav-item">{{ t('administration.ADMIN') }}</div> <div class="nav-item">{{ t('administration.ADMIN') }}</div>
<div class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</div> <div class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</div>
<div class="nav-item nav-separator" />
</div> </div>
</div> </div>
<div class="nav-items-user-menu"> <div class="nav-items-user-menu">
<div class="nav-items-group" v-if="isAuthenticated"> <div class="nav-items-group" v-if="isAuthenticated">
<div class="nav-item"> <div class="nav-item nav-profile-img">
<img <img
v-if="authUserPictureUrl !== ''" v-if="authUserPictureUrl !== ''"
class="nav-profile-img" class="nav-profile-user-img"
alt="User picture" alt="User picture"
:src="authUserPictureUrl" :src="authUserPictureUrl"
/> />
@ -48,12 +49,12 @@
</div> </div>
</div> </div>
<div class="nav-items-group" v-else> <div class="nav-items-group" v-else>
<router-link class="nav-item" to="/register" @click="closeMenu">{{
t('user.REGISTER')
}}</router-link>
<router-link class="nav-item" to="/login" @click="closeMenu">{{ <router-link class="nav-item" to="/login" @click="closeMenu">{{
t('user.LOGIN') t('user.LOGIN')
}}</router-link> }}</router-link>
<router-link class="nav-item" to="/register" @click="closeMenu">{{
t('user.REGISTER')
}}</router-link>
</div> </div>
<Dropdown <Dropdown
v-if="availableLanguages && language" v-if="availableLanguages && language"
@ -165,6 +166,7 @@
a { a {
&.router-link-exact-active { &.router-link-exact-active {
color: var(--nav-bar-link-active); color: var(--nav-bar-link-active);
font-weight: bold;
} }
} }
@ -232,16 +234,21 @@
} }
.nav-profile-img { .nav-profile-img {
margin-bottom: -$default-padding;
.nav-profile-user-img {
border-radius: 50%; border-radius: 50%;
height: 32px; height: 32px;
width: 32px; width: 32px;
object-fit: cover; object-fit: cover;
margin-bottom: -$default-padding;
} }
.no-picture { .no-picture {
color: var(--app-a-color); color: var(--app-a-color);
font-size: 1.7em; font-size: 1.7em;
margin-bottom: -$default-padding; }
}
.nav-separator {
display: none;
} }
} }
@ -307,6 +314,17 @@
.nav-item { .nav-item {
padding: 7px 25px; padding: 7px 25px;
} }
.nav-profile-img {
display: none;
}
.nav-separator {
display: flex;
border-top: solid 1px var(--nav-border-color);
margin: 0 $default-margin * 2;
padding: 0;
}
} }
} }
} }