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

feature(3331): card image refactor

Browse Source 
Signed-off-by: Luutzen Dijkstra <luutzen.dijkstra@gmail.com>
This commit is contained in:
Luutzen Dijkstra
2025-01-05 21:39:08 +01:00
committed by Luka Trovic
parent 376f46b7ba
commit 569a0961fd
3 changed files with 5 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,13 +4,10 @@
--> -->
<template> <template>
<div v-if="referencePreview" class="card-cover"> <div v-if="cardId && ( attachments.length > 0 )" class="card-cover">
<div class="image-wrapper rounded-left rounded-right" :style="{ backgroundImage: `url(${referencePreview})`}" /> <div v-for="attachment in attachments"
</div>
<div v-else-if="cardId && ( attachments.length > 0 )" class="card-cover">
<div v-for="(attachment, index) in attachments"
:key="attachment.id" :key="attachment.id"
:class="['image-wrapper', { 'rounded-left': index === 0 }, { 'rounded-right': index === attachments.length - 1 }]" class="image-wrapper"
:style="{ backgroundImage: `url(${attachmentPreview(attachment)})` }" /> :style="{ backgroundImage: `url(${attachmentPreview(attachment)})` }" />
</div> </div>
</template> </template>
@@ -85,12 +82,6 @@ export default {
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
&.rounded-left {
border-top-left-radius: calc(var(--border-radius-large) - 1px);
}
&.rounded-right {
border-top-right-radius: calc(var(--border-radius-large) - 1px);
}
} }
} }
</style> </style>

1
src/components/cards/CardItem.vue
View File

@@ -337,6 +337,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $card-gap; gap: $card-gap;
overflow: hidden;
&:deep(*) { &:deep(*) {
cursor: pointer; cursor: pointer;

2
src/css/variables.scss
View File

@@ -6,6 +6,6 @@
$card-max-width: 300px; $card-max-width: 300px;
$card-padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 2) var(--default-grid-baseline); $card-padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 2) var(--default-grid-baseline);
$card-gap: calc(var(--default-grid-baseline) * 3); $card-gap: calc(var(--default-grid-baseline) * 3);
$card-image-margin: calc(var(--default-grid-baseline) * -1); $card-image-margin: calc(var(--default-grid-baseline) * -2);
$stack-gap: calc(var(--default-grid-baseline) * 3); $stack-gap: calc(var(--default-grid-baseline) * 3);
$board-gap: calc(var(--default-grid-baseline) * 4); $board-gap: calc(var(--default-grid-baseline) * 4);