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

chore: re-add menu button titles after merging

Browse Source
This commit is contained in:
kolaente 2021-11-13 17:15:34 +01:00
parent 995bb3bbe5
commit 9380332b97
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/home/MenuButton.vue
View File

@ -1,16 +1,17 @@
<template>
<button
type="button"
@click="$store.commit('toggleMenu')"
class="menu-show-button"
@shortkey="() => $store.commit('toggleMenu')"
v-shortkey="['ctrl', 'e']"
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
/>
<button
type="button"
@click="$store.commit('toggleMenu')"
class="menu-show-button"
@shortkey="() => $store.commit('toggleMenu')"
v-shortcut="'Control+e'"
:title="$t('keyboardShortcuts.toggleMenu')"
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
/>
</template>
<script setup>
import { computed} from 'vue'
import {computed} from 'vue'
import {store} from '@/store'
const menuActive = computed(() => store.menuActive)
@ -32,6 +33,7 @@ $size: $lineWidth + 1rem;
position: relative;
$transformX: translateX(-50%);
&::before,
&::after {
content: '';

54
src/components/home/topNavigation.vue
View File

@ -5,10 +5,10 @@
class="navbar main-theme is-fixed-top"
role="navigation"
>
<router-link :to="{name: 'home'}" class="navbar-item logo">
<Logo width="164" height="48" />
</router-link>
<MenuButton class="menu-button" />
<router-link :to="{name: 'home'}" class="navbar-item logo">
<Logo width="164" height="48"/>
</router-link>
<MenuButton class="menu-button"/>
<div class="list-title" ref="listTitle" v-show="currentList.id">
<template v-if="currentList.id">
<h1
@ -256,33 +256,33 @@ $vikunja-nav-logo-full-width: 164px;
}
.list-title {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
$edit-icon-width: 1rem;
$edit-icon-width: 1rem;
@media screen and (min-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
--nav-username-width: 0;
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
}
@media screen and (min-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
--nav-username-width: 0;
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
}
@media screen and (max-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
}
@media screen and (max-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
}
h1 {
margin: 0;
}
h1 {
margin: 0;
}
:deep(.dropdown-trigger) {
color: $grey-400;
margin-left: 1rem;
height: 1rem;
width: 1rem;
cursor: pointer;
}
:deep(.dropdown-trigger) {
color: $grey-400;
margin-left: 1rem;
height: 1rem;
width: 1rem;
cursor: pointer;
}
}
</style>