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

fix: Fix modal sizing, focus error and cover image sizing

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2024-09-01 11:53:03 +02:00
parent 0e5006616e
commit 40f7f0907a
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/board/Board.vue
View File

@@ -158,7 +158,7 @@ export default {
}, },
isEmpty(newValue) { isEmpty(newValue) {
newValue && this.$nextTick(() => { newValue && this.$nextTick(() => {
this.$refs?.newStackInput.focus() this.$refs?.newStackInput?.focus()
}) })
}, },
}, },

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

@@ -162,7 +162,9 @@ export default {
}, },
methods: { methods: {
focusHeader() { focusHeader() {
this.$refs.cardSidebar.$el.querySelector('.app-sidebar-header__mainname').focus() this.$nextTick(() => {
this.$refs?.cardSidebar.$el.querySelector('.app-sidebar-header__mainname')?.focus()
})
}, },
handleUpdateTitleEditable(value) { handleUpdateTitleEditable(value) {
this.titleEditable = value this.titleEditable = value
@@ -224,6 +226,7 @@ section.app-sidebar__tab--active {
left: 0; left: 0;
right: 0; right: 0;
max-width: calc(100% - #{$modal-padding * 2}); max-width: calc(100% - #{$modal-padding * 2});
min-height: calc(100vh - var(--header-height) * 4);
padding: 0 14px; padding: 0 14px;
height: 97%; height: 97%;
overflow: hidden !important; overflow: hidden !important;

12
src/components/cards/CardCover.vue
View File

@@ -66,11 +66,11 @@ export default {
@import '../../css/variables'; @import '../../css/variables';
.card-cover { .card-cover {
height: 100px; height: 90px;
display: flex; display: flex;
margin-top: -6px; margin-top: -4px;
margin-left: -6px; margin-left: -4px;
margin-right: -6px; margin-right: -4px;
.image-wrapper { .image-wrapper {
flex: 1; flex: 1;
@@ -79,10 +79,10 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
&.rounded-left { &.rounded-left {
border-top-left-radius: var(--border-radius-large); border-top-left-radius: calc(var(--border-radius-large) - 1px);
} }
&.rounded-right { &.rounded-right {
border-top-right-radius: var(--border-radius-large); border-top-right-radius: calc(var(--border-radius-large) - 1px);
} }
} }
} }