fix styles on photo card

This commit is contained in:
Hayden 2022-12-03 16:37:26 -09:00
parent c1c3e30a39
commit afed0dd0a1
No known key found for this signature in database
GPG key ID: 17CF79474E257545

View file

@ -396,9 +396,9 @@
<DetailsSection :details="itemDetails" /> <DetailsSection :details="itemDetails" />
</BaseCard> </BaseCard>
<BaseCard> <BaseCard v-if="photos && photos.length >0">
<template #title> Photos </template> <template #title> Photos </template>
<div class="container p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-scroll"> <div class="container border-t border-gray-300 p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-y-scroll scroll-bg">
<button v-for="(img, i) in photos" :key="i" @click="openDialog(img)"> <button v-for="(img, i) in photos" :key="i" @click="openDialog(img)">
<img class="rounded max-h-[200px]" :src="img.src" /> <img class="rounded max-h-[200px]" :src="img.src" />
</button> </button>
@ -465,9 +465,20 @@
</BaseContainer> </BaseContainer>
</template> </template>
<style> <style lang="css" scoped>
/* Style dialog background */ /* Style dialog background */
dialog::backdrop { dialog::backdrop {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
.scroll-bg::-webkit-scrollbar {
width: 0.5rem;
}
.scroll-bg::-webkit-scrollbar-thumb {
border-radius: 0.25rem;
@apply bg-base-300
}
</style> </style>