fix: top navigation not usable
continuous-integration/drone/pr Build is failing
Details
continuous-integration/drone/pr Build is failing
Details
This commit is contained in:
parent
f8ca1c47a9
commit
7ff8daf6e2
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-auth" :class="{'modal-active': modalActive}">
|
||||
<BaseButton
|
||||
v-if="menuActive"
|
||||
@click="$store.commit('menuActive', false)"
|
||||
class="menu-hide-button"
|
||||
class="menu-hide-button"
|
||||
>
|
||||
<icon icon="times"/>
|
||||
</BaseButton>
|
||||
|
@ -41,12 +41,12 @@
|
|||
|
||||
<transition name="modal">
|
||||
<modal
|
||||
v-if="currentModal"
|
||||
v-if="currentModal"
|
||||
@close="closeModal()"
|
||||
variant="scrolling"
|
||||
class="task-detail-view-modal"
|
||||
>
|
||||
<component :is="currentModal" />
|
||||
<component :is="currentModal"/>
|
||||
</modal>
|
||||
</transition>
|
||||
|
||||
|
@ -119,17 +119,17 @@ function useRouteWithModal() {
|
|||
}
|
||||
}
|
||||
|
||||
return { routeWithModal, currentModal, closeModal }
|
||||
return {routeWithModal, currentModal, closeModal}
|
||||
}
|
||||
|
||||
const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
|
||||
|
||||
const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const background = computed(() => store.state.background)
|
||||
const blurHash = computed(() => store.state.blurHash)
|
||||
const menuActive = computed(() => store.state.menuActive)
|
||||
const modalActive = computed(() => store.state.modalActive)
|
||||
|
||||
function showKeyboardShortcuts() {
|
||||
store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
|
||||
|
@ -238,15 +238,15 @@ store.dispatch('labels/loadAllLabels')
|
|||
padding-top: $navbar-height;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
.app-content {
|
||||
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
|
||||
// Used to make sure the spinner is always in the middle while loading
|
||||
> .loader-container {
|
||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
||||
}
|
||||
// Used to make sure the spinner is always in the middle while loading
|
||||
> .loader-container {
|
||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin-left: 0;
|
||||
|
@ -263,10 +263,10 @@ store.dispatch('labels/loadAllLabels')
|
|||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-overlay {
|
||||
|
@ -303,5 +303,14 @@ store.dispatch('labels/loadAllLabels')
|
|||
}
|
||||
}
|
||||
|
||||
.content-auth {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&.modal-active {
|
||||
z-index: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
|
@ -64,6 +64,9 @@
|
|||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {ref, watch} from 'vue'
|
||||
import {useScrollLock} from '@vueuse/core'
|
||||
import {useStore} from 'vuex'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
enabled?: boolean,
|
||||
|
@ -86,6 +89,7 @@ watch(
|
|||
() => props.enabled,
|
||||
enabled => {
|
||||
scrollLock.value = enabled
|
||||
store.commit('modalActive', enabled)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
|
|
|
@ -51,6 +51,7 @@ export const store = createStore({
|
|||
menuActive: true,
|
||||
keyboardShortcutsActive: false,
|
||||
quickActionsActive: false,
|
||||
modalActive: false,
|
||||
},
|
||||
mutations: {
|
||||
[LOADING](state, loading) {
|
||||
|
@ -89,8 +90,8 @@ export const store = createStore({
|
|||
[BLUR_HASH](state, blurHash) {
|
||||
state.blurHash = blurHash
|
||||
},
|
||||
vikunjaReady(state, ready) {
|
||||
state.vikunjaReady = ready
|
||||
modalActive(state, active) {
|
||||
state.modalActive = active
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
|
|
Reference in New Issue