feature(3331): card image refactor

Signed-off-by: Luutzen Dijkstra <[email protected]>
nextcloud · Jan 20, 2025 · bccfeaa · bccfeaa
1 parent 9b25e95
commit bccfeaa
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 9 deletions.
diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue
@@ -5,9 +5,9 @@
 
 <template>
 	<div v-if="cardId && ( attachments.length > 0 )" class="card-cover">
-		<div v-for="(attachment, index) in attachments"
+		<div v-for="attachment in attachments"
 			:key="attachment.id"
-			:class="['image-wrapper', { 'rounded-left': index === 0 }, { 'rounded-right': index === attachments.length - 1 }]"
+			class="image-wrapper"
 			:style="{ backgroundImage: `url(${attachmentPreview(attachment)})` }" />
 	</div>
 </template>
@@ -76,12 +76,6 @@ export default {
 		background-size: cover;
 		background-repeat: no-repeat;
 		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>
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
@@ -307,6 +307,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 		gap: $card-gap;
+		overflow: hidden;
 
 		&:deep(*) {
 			cursor: pointer;

diff --git a/src/css/variables.scss b/src/css/variables.scss
@@ -6,6 +6,6 @@
  $card-max-width: 300px;
  $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-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);
  $board-gap: calc(var(--default-grid-baseline) * 4);