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

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

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