Fix namespace actions alignment in the menu

This commit is contained in:
kolaente 2021-01-16 22:33:49 +01:00
parent b644c00f59
commit aa5d0d437d
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 45 additions and 27 deletions

View file

@ -50,26 +50,7 @@
<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
<template v-for="n in namespaces">
<div :key="n.id">
<router-link
:to="{name: 'namespace.edit', params: {id: n.id} }"
class="nsettings"
v-if="n.id > 0"
v-tooltip="'Settings'">
<span class="icon">
<icon icon="cog"/>
</span>
</router-link>
<router-link
:key="n.id + 'list.create'"
:to="{ name: 'list.create', params: { id: n.id} }"
class="nsettings"
v-if="n.id > 0"
v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
<span class="icon">
<icon icon="plus"/>
</span>
</router-link>
<div :key="n.id" class="namespace-title">
<label
:for="n.id + 'checker'"
class="menu-label"
@ -83,6 +64,25 @@
{{ n.title }} ({{ n.lists.filter(l => !l.isArchived).length }})
</span>
</label>
<div class="actions">
<router-link
:key="n.id + 'list.create'"
:to="{ name: 'list.create', params: { id: n.id} }"
v-if="n.id > 0"
v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
<span class="icon">
<icon icon="plus"/>
</span>
</router-link>
<router-link
:to="{name: 'namespace.edit', params: {id: n.id} }"
v-if="n.id > 0"
v-tooltip="'Settings'">
<span class="icon">
<icon icon="cog"/>
</span>
</router-link>
</div>
</div>
<input
:id="n.id + 'checker'"

View file

@ -141,12 +141,9 @@
color: $grey;
font-weight: 500;
min-height: 2.5em;
padding-top: $navbar-padding * 0.3;
padding-top: 0;
padding-left: $navbar-padding;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
@ -198,9 +195,30 @@
}
}
.nsettings {
float: right;
padding: 10px 0.3em 0;
.namespace-title {
display: flex;
align-items: center;
justify-content: space-between;
.menu-label {
margin-bottom: 0;
flex: 1 1 auto;
.name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.actions {
flex: 0 0 auto;
a {
color: $vikunja-nav-color;
padding: 0 .25rem;
}
}
}
.menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {