local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: menu on mobile devices

Browse source
This commit is contained in:
kolaente 2022-04-02 23:09:28 +02:00
parent 57c585ac63
commit 010eca1d0c
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/home/contentAuth.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="content-auth" :class="{'modal-active': modalActive}"> <div class="content-auth" :class="{'z-unset': modalActive}">
<BaseButton <BaseButton
v-if="menuActive" v-if="menuActive"
@click="$store.commit('menuActive', false)" @click="$store.commit('menuActive', false)"
@ -306,10 +306,11 @@ store.dispatch('labels/loadAllLabels')
.content-auth { .content-auth {
position: relative; position: relative;
z-index: 1; z-index: 1;
&.modal-active {
z-index: unset;
} }
.is-touch .content-auth,
.content-auth.z-unset {
z-index: unset;
} }
@include modal-transition(); @include modal-transition();

4
src/components/home/navigation.vue
View file

@ -257,6 +257,7 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
} }
const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({}) const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
async function saveListPosition(e: SortableEvent) { async function saveListPosition(e: SortableEvent) {
if (!e.newIndex) return if (!e.newIndex) return
@ -294,7 +295,6 @@ $vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem; $vikunja-nav-selected-width: 0.4rem;
.namespace-container { .namespace-container {
z-index: 6;
background: $vikunja-nav-background; background: $vikunja-nav-background;
color: $vikunja-nav-color; color: $vikunja-nav-color;
padding: 0 0 1rem; padding: 0 0 1rem;
@ -307,10 +307,10 @@ $vikunja-nav-selected-width: 0.4rem;
overflow-x: auto; overflow-x: auto;
width: $navbar-width; width: $navbar-width;
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
top: 0; top: 0;
width: 70vw; width: 70vw;
z-index: 20;
} }
&.is-active { &.is-active {