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

7
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 { .is-touch .content-auth,
.content-auth.z-unset {
z-index: unset; z-index: unset;
}
} }
@include modal-transition(); @include modal-transition();

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

@ -160,7 +160,7 @@
import {ref, computed, onMounted, onBeforeMount} from 'vue' import {ref, computed, onMounted, onBeforeMount} from 'vue'
import {useStore} from 'vuex' import {useStore} from 'vuex'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { SortableEvent } from 'sortablejs' import {SortableEvent} from 'sortablejs'
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue' import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue' import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
@ -170,7 +170,7 @@ import Logo from '@/components/home/Logo.vue'
import {MENU_ACTIVE} from '@/store/mutation-types' import {MENU_ACTIVE} from '@/store/mutation-types'
import {calculateItemPosition} from '@/helpers/calculateItemPosition' import {calculateItemPosition} from '@/helpers/calculateItemPosition'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle' import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import { useEventListener } from '@vueuse/core' import {useEventListener} from '@vueuse/core'
import NamespaceModel from '@/models/namespace' import NamespaceModel from '@/models/namespace'
import ListModel from '@/models/list' import ListModel from '@/models/list'
@ -228,7 +228,7 @@ function toggleLists(namespaceId: number) {
listsVisible.value[namespaceId] = !listsVisible.value[namespaceId] listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
} }
const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean}>({}) const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
// FIXME: async action will be unfinished when component mounts // FIXME: async action will be unfinished when component mounts
onBeforeMount(async () => { onBeforeMount(async () => {
const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[] const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
@ -256,7 +256,8 @@ 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 {