vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: unindent settings page (#2996)
continuous-integration/drone/push Build is passing Details 

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: #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

63
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;
.navigation {
width: 25%;
padding-right: 1rem;
a {
display: block;
padding: .5rem;
color: var(--text);
width: 100%;
border-left: 3px solid transparent;
&:hover, &.router-link-active {
background: var(--white);
border-color: var(--primary);
}
}
}
.view {
width: 75%;
}
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
flex-direction: column; flex-direction: column;
}
}
.navigation, .view { .navigation {
width: 100%; width: 25%;
padding-left: 0; padding-right: 1rem;
}
.view { @media screen and (max-width: $tablet) {
padding-top: 1rem; 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 {
background: var(--white);
border-color: var(--primary);
}
}
.view {
width: 75%;
@media screen and (max-width: $tablet) {
width: 100%;
padding-left: 0;
padding-top: 1rem;
} }
} }
</style> </style>