ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix modal styling and scroll behavior

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-08-28 15:42:53 +02:00
parent a6cf09e194
commit 39e9296256
2 changed files with 44 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.vue
View File

@@ -28,7 +28,7 @@
</div> </div>
<Modal v-if="cardDetailsInModal && $route.params.cardId" :title="t('deck', 'Card details')" @close="hideModal()"> <Modal v-if="cardDetailsInModal && $route.params.cardId" :title="t('deck', 'Card details')" @close="hideModal()">
<div class="modal__content"> <div class="modal__content modal__card">
<router-view name="sidebar" /> <router-view name="sidebar" />
</div> </div>
</Modal> </Modal>
@@ -131,20 +131,19 @@ export default {
} }
} }
} }
</style> </style>
<style> <style lang="scss">
.multiselect { .multiselect {
width: 100%; width: 100%;
} }
.modal__content { .modal__card {
min-width: 320px;
height: 600px; width: 50vw;
min-width: 450px; max-width: 800px;
min-height: 450px; min-height: 200px;
margin: 20px 20px 60px 20px; height: 80vh;
padding-bottom: 20px;
} }
</style> </style>

41
src/components/card/CardSidebar.vue
View File

@@ -26,7 +26,6 @@
:subtitle="subtitle" :subtitle="subtitle"
:title-editable.sync="titleEditable" :title-editable.sync="titleEditable"
@update:title="updateTitle" @update:title="updateTitle"
:class="{ 'app-sidebar-modal': cardDetailsInModal}"
@close="closeSidebar"> @close="closeSidebar">
<template #secondary-actions> <template #secondary-actions>
<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="showModal()"> <ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="showModal()">
@@ -545,11 +544,41 @@ export default {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-sidebar-modal {
border-left: 0; // FIXME: Obivously we should at some point not randomly reuse the sidebar component
width: 800px; // since this is not oficially supported
max-width: 780px; .modal__card .app-sidebar {
top: 0px; border: 0;
min-width: 100%;
position: relative;
top: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
&::v-deep {
.app-sidebar-header {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--color-main-background);
}
.app-sidebar-tabs__nav {
position: sticky;
top: 87px;
margin: 0;
z-index: 100;
background-color: var(--color-main-background);
}
section {
min-height: auto;
}
#emptycontent, .emptycontent {
margin-top: 88px;
}
}
} }
h5 { h5 {