ami/tl-vikunja
1
0
Fork 0
Code

fix(navigation): make the styles work again

Browse Source
This commit is contained in:
kolaente 2023-03-27 10:26:34 +02:00
parent be1f1d94c9
commit 3ad948305f
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
5 changed files with 165 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/home/ProjectsNavigation.vue
View File

@ -152,4 +152,11 @@ async function saveProjectPosition(e: SortableEvent) {
projectUpdating.value[project.id] = false projectUpdating.value[project.id] = false
} }
} }
</script> </script>
<style lang="scss" scoped>
.list-setting-spacer {
width: 2.5rem;
flex-shrink: 0;
}
</style>

230
src/components/home/navigation.vue
View File

@ -47,44 +47,44 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<nav> <nav class="menu namespaces-lists">
<ProjectsNavigation :projects="projects"/> <ProjectsNavigation :projects="projects"/>
</nav> </nav>
<!-- <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">--> <!-- <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">-->
<!-- <template v-for="(n, nk) in namespaces" :key="n.id">--> <!-- <template v-for="(n, nk) in namespaces" :key="n.id">-->
<!-- <div class="namespace-title" :class="{'has-menu': n.id > 0}">--> <!-- <div class="namespace-title" :class="{'has-menu': n.id > 0}">-->
<!-- <BaseButton--> <!-- <BaseButton-->
<!-- @click="toggleProjects(n.id)"--> <!-- @click="toggleProjects(n.id)"-->
<!-- class="menu-label"--> <!-- class="menu-label"-->
<!-- v-tooltip="namespaceTitles[nk]"--> <!-- v-tooltip="namespaceTitles[nk]"-->
<!-- >--> <!-- >-->
<!-- <ColorBubble--> <!-- <ColorBubble-->
<!-- v-if="n.hexColor !== ''"--> <!-- v-if="n.hexColor !== ''"-->
<!-- :color="n.hexColor"--> <!-- :color="n.hexColor"-->
<!-- class="mr-1"--> <!-- class="mr-1"-->
<!-- />--> <!-- />-->
<!-- <span class="name">{{ namespaceTitles[nk] }}</span>--> <!-- <span class="name">{{ namespaceTitles[nk] }}</span>-->
<!-- <div--> <!-- <div-->
<!-- class="icon menu-item-icon is-small toggle-lists-icon pl-2"--> <!-- class="icon menu-item-icon is-small toggle-lists-icon pl-2"-->
<!-- :class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"--> <!-- :class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"-->
<!-- >--> <!-- >-->
<!-- <icon icon="chevron-down"/>--> <!-- <icon icon="chevron-down"/>-->
<!-- </div>--> <!-- </div>-->
<!-- <span class="count" :class="{'ml-2 mr-0': n.id > 0}">--> <!-- <span class="count" :class="{'ml-2 mr-0': n.id > 0}">-->
<!-- ({{ namespaceProjectsCount[nk] }})--> <!-- ({{ namespaceProjectsCount[nk] }})-->
<!-- </span>--> <!-- </span>-->
<!-- </BaseButton>--> <!-- </BaseButton>-->
<!-- <namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>--> <!-- <namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>-->
<!-- </div>--> <!-- </div>-->
<!-- &lt;!&ndash;--> <!-- &lt;!&ndash;-->
<!-- NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function--> <!-- NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function-->
<!-- triggered by the change needs to have access to the current namespace--> <!-- triggered by the change needs to have access to the current namespace-->
<!-- &ndash;&gt;--> <!-- &ndash;&gt;-->
<!-- </template>--> <!-- </template>-->
<!-- </nav>--> <!-- </nav>-->
<PoweredByLink/> <PoweredByLink/>
</aside> </aside>
</template> </template>
@ -169,11 +169,6 @@ function updateActiveProjects(namespace: INamespace, activeProjects: IProject[])
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$navbar-padding: 2rem;
$vikunja-nav-background: var(--site-background);
$vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem;
.logo { .logo {
display: block; display: block;
@ -187,7 +182,7 @@ $vikunja-nav-selected-width: 0.4rem;
} }
.namespace-container { .namespace-container {
background: $vikunja-nav-background; background: var(--site-background);
color: $vikunja-nav-color; color: $vikunja-nav-color;
padding: 0 0 1rem; padding: 0 0 1rem;
transition: transform $transition-duration ease-in; transition: transform $transition-duration ease-in;
@ -211,123 +206,6 @@ $vikunja-nav-selected-width: 0.4rem;
} }
} }
// these are general menu styles
// should be in own components
.menu {
.menu-label,
.menu-list .list-menu-link,
.menu-list a {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.color-bubble {
height: 12px;
flex: 0 0 12px;
}
}
.menu-list {
li {
height: 44px;
display: flex;
align-items: center;
&:hover {
background: var(--white);
}
.menu-list-dropdown {
opacity: 1;
transition: $transition;
}
@media(hover: hover) and (pointer: fine) {
.menu-list-dropdown {
opacity: 0;
}
&:hover .menu-list-dropdown {
opacity: 1;
}
}
}
.menu-item-icon {
color: var(--grey-400);
}
.menu-list-dropdown-trigger {
display: flex;
padding: 0.5rem;
}
.flip-list-move {
transition: transform $transition-duration;
}
.ghost {
background: var(--grey-200);
* {
opacity: 0;
}
}
a:hover {
background: transparent;
}
.list-menu-link,
li > a {
color: $vikunja-nav-color;
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
transition: all 0.2s ease;
border-radius: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
border-left: $vikunja-nav-selected-width solid transparent;
&:hover {
border-left: $vikunja-nav-selected-width solid var(--primary);
}
&.router-link-exact-active {
color: var(--primary);
border-left: $vikunja-nav-selected-width solid var(--primary);
}
.icon {
height: 1rem;
vertical-align: middle;
padding-right: 0.5rem;
}
&.router-link-exact-active .icon:not(.handle) {
color: var(--primary);
}
.handle {
opacity: 0;
transition: opacity $transition;
margin-right: .25rem;
}
&:hover .handle {
opacity: 1;
}
}
&:not(.dragging-disabled) .handle {
cursor: grab;
}
}
}
.top-menu { .top-menu {
margin-top: math.div($navbar-padding, 2); margin-top: math.div($navbar-padding, 2);
@ -421,42 +299,4 @@ $vikunja-nav-selected-width: 0.4rem;
min-width: 85px; min-width: 85px;
} }
} }
.namespace-title {
display: flex;
align-items: center;
justify-content: space-between;
color: $vikunja-nav-color;
padding: 0 .25rem;
.toggle-lists-icon {
svg {
transition: all $transition;
transform: rotate(90deg);
opacity: 1;
}
&.active svg {
transform: rotate(0deg);
opacity: 0;
}
}
&:hover .toggle-lists-icon svg {
opacity: 1;
}
&:not(.has-menu) .toggle-lists-icon {
padding-right: 1rem;
}
}
.list-setting-spacer {
width: 2.5rem;
flex-shrink: 0;
}
.namespaces-list.loader-container.is-loading {
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
}
</style> </style>

4
src/styles/common-imports.scss
View File

@ -33,3 +33,7 @@ $switch-view-height: 2.69rem;
$navbar-height: 4rem; $navbar-height: 4rem;
$navbar-width: 300px; $navbar-width: 300px;
$navbar-padding: 2rem;
$vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem;

3
src/styles/theme/_index.scss
View File

@ -8,4 +8,5 @@
@import "link-share"; @import "link-share";
@import "loading"; @import "loading";
@import "flatpickr"; @import "flatpickr";
@import 'helpers'; @import 'helpers';
@import 'navigation';

116
src/styles/theme/navigation.scss Normal file
View File

@ -0,0 +1,116 @@
// these are general menu styles
// should be in own components
.menu {
.menu-label,
.menu-list .list-menu-link,
.menu-list a {
display: flex;
align-items: center;
cursor: pointer;
.color-bubble {
height: 12px;
flex: 0 0 12px;
}
}
.menu-list {
li {
height: 44px;
display: flex;
align-items: center;
&:hover {
background: var(--white);
}
.menu-list-dropdown {
opacity: 1;
transition: $transition;
}
@media(hover: hover) and (pointer: fine) {
.menu-list-dropdown {
opacity: 0;
}
&:hover .menu-list-dropdown {
opacity: 1;
}
}
}
.menu-item-icon {
color: var(--grey-400);
}
.menu-list-dropdown-trigger {
display: flex;
padding: 0.5rem;
}
.flip-list-move {
transition: transform $transition-duration;
}
.ghost {
background: var(--grey-200);
* {
opacity: 0;
}
}
a:hover {
background: transparent;
}
.list-menu-link,
li > a {
color: $vikunja-nav-color;
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
transition: all 0.2s ease;
border-radius: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
border-left: $vikunja-nav-selected-width solid transparent;
&:hover {
border-left: $vikunja-nav-selected-width solid var(--primary);
}
&.router-link-exact-active {
color: var(--primary);
border-left: $vikunja-nav-selected-width solid var(--primary);
}
.icon {
height: 1rem;
vertical-align: middle;
padding-right: 0.5rem;
}
&.router-link-exact-active .icon:not(.handle) {
color: var(--primary);
}
.handle {
opacity: 0;
transition: opacity $transition;
margin-right: .25rem;
}
&:hover .handle {
opacity: 1;
}
}
&:not(.dragging-disabled) .handle {
cursor: grab;
}
}
}