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

fix(navigation): make the styles work again

This commit is contained in:
kolaente 2023-03-27 10:26:34 +02:00
parent be1f1d94c9
commit 3ad948305f
Signed by: konrad
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
}
}
</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>
</ul>
</nav>
<nav>
<nav class="menu namespaces-lists">
<ProjectsNavigation :projects="projects"/>
</nav>
<!-- <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">-->
<!-- <template v-for="(n, nk) in namespaces" :key="n.id">-->
<!-- <div class="namespace-title" :class="{'has-menu': n.id > 0}">-->
<!-- <BaseButton-->
<!-- @click="toggleProjects(n.id)"-->
<!-- class="menu-label"-->
<!-- v-tooltip="namespaceTitles[nk]"-->
<!-- >-->
<!-- <ColorBubble-->
<!-- v-if="n.hexColor !== ''"-->
<!-- :color="n.hexColor"-->
<!-- class="mr-1"-->
<!-- />-->
<!-- <span class="name">{{ namespaceTitles[nk] }}</span>-->
<!-- <div-->
<!-- class="icon menu-item-icon is-small toggle-lists-icon pl-2"-->
<!-- :class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"-->
<!-- >-->
<!-- <icon icon="chevron-down"/>-->
<!-- </div>-->
<!-- <span class="count" :class="{'ml-2 mr-0': n.id > 0}">-->
<!-- ({{ namespaceProjectsCount[nk] }})-->
<!-- </span>-->
<!-- </BaseButton>-->
<!-- <namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>-->
<!-- </div>-->
<!-- &lt;!&ndash;-->
<!-- 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-->
<!-- &ndash;&gt;-->
<!-- <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">-->
<!-- <template v-for="(n, nk) in namespaces" :key="n.id">-->
<!-- <div class="namespace-title" :class="{'has-menu': n.id > 0}">-->
<!-- <BaseButton-->
<!-- @click="toggleProjects(n.id)"-->
<!-- class="menu-label"-->
<!-- v-tooltip="namespaceTitles[nk]"-->
<!-- >-->
<!-- <ColorBubble-->
<!-- v-if="n.hexColor !== ''"-->
<!-- :color="n.hexColor"-->
<!-- class="mr-1"-->
<!-- />-->
<!-- <span class="name">{{ namespaceTitles[nk] }}</span>-->
<!-- <div-->
<!-- class="icon menu-item-icon is-small toggle-lists-icon pl-2"-->
<!-- :class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"-->
<!-- >-->
<!-- <icon icon="chevron-down"/>-->
<!-- </div>-->
<!-- <span class="count" :class="{'ml-2 mr-0': n.id > 0}">-->
<!-- ({{ namespaceProjectsCount[nk] }})-->
<!-- </span>-->
<!-- </BaseButton>-->
<!-- <namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>-->
<!-- </div>-->
<!-- &lt;!&ndash;-->
<!-- 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-->
<!-- &ndash;&gt;-->
<!-- </template>-->
<!-- </nav>-->
<!-- </template>-->
<!-- </nav>-->
<PoweredByLink/>
</aside>
</template>
@ -169,11 +169,6 @@ function updateActiveProjects(namespace: INamespace, activeProjects: IProject[])
</script>
<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 {
display: block;
@ -187,7 +182,7 @@ $vikunja-nav-selected-width: 0.4rem;
}
.namespace-container {
background: $vikunja-nav-background;
background: var(--site-background);
color: $vikunja-nav-color;
padding: 0 0 1rem;
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 {
margin-top: math.div($navbar-padding, 2);
@ -421,42 +299,4 @@ $vikunja-nav-selected-width: 0.4rem;
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>

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

@ -33,3 +33,7 @@ $switch-view-height: 2.69rem;
$navbar-height: 4rem;
$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 "loading";
@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;
}
}
}