ami/tl-vikunja
1
0
Fork 0
Code

feat: unindent settings page (#2996)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2996
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2023-01-24 21:54:48 +00:00 committed by konrad
parent d2e07efc7d
commit 13a39be3de
1 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/user/Settings.vue
View File

@ -4,7 +4,7 @@
<nav class="navigation">
<ul>
<li v-for="({routeName, title }, index) in navigationItems" :key="index">
<router-link :to="{name: routeName}">
<router-link class="navigation-link" :to="{name: routeName}">
{{ title }}
</router-link>
</li>
@ -90,39 +90,42 @@ const navigationItems = computed(() => {
.user-settings {
display: flex;
.navigation {
@media screen and (max-width: $tablet) {
flex-direction: column;
}
}
.navigation {
width: 25%;
padding-right: 1rem;
a {
@media screen and (max-width: $tablet) {
width: 100%;
padding-left: 0;
}
}
.navigation-link {
display: block;
padding: .5rem;
color: var(--text);
width: 100%;
border-left: 3px solid transparent;
&:hover, &.router-link-active {
&:hover,
&.router-link-active {
background: var(--white);
border-color: var(--primary);
}
}
}
}
.view {
.view {
width: 75%;
}
@media screen and (max-width: $tablet) {
flex-direction: column;
.navigation, .view {
width: 100%;
padding-left: 0;
}
.view {
padding-top: 1rem;
}
}
}
</style>