GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-08-25 01:59:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix cards

Browse Source
This commit is contained in:
jxxghp
2023-06-29 08:21:08 +08:00
parent e5e5f37fc0
commit 2e45ef1684
4 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cards/MediaCard.vue
View File

@@ -9,7 +9,7 @@ const props = defineProps({
</script> </script>
<template> <template>
<VResponsive aspect-ratio="1/2" max-width="11rem"> <VResponsive aspect-ratio="1/2">
<VCard> <VCard>
<VImg <VImg
:src="props.media?.poster_path" :src="props.media?.poster_path"

10
src/styles/styles.scss
View File

@@ -2,3 +2,13 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.grid-media-card {
grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
}
.media-slide-card {
position: relative;
flex: 0 0 auto;
max-width: 11rem;
}

10
src/views/discover/MediaCardListView.vue
View File

@@ -29,10 +29,8 @@ onMounted(fetchData);
</script> </script>
<template> <template>
<VRow> <div class="grid gap-3 grid-media-card">
<VCol v-for="data in dataList" :key="data.tmdb_id" cols="6" md="3" lg="2"> <MediaCard v-for="data in dataList" :key="data.tmdb_id" :media="data">
<MediaCard :media="data"> </MediaCard>
</MediaCard> </div>
</VCol>
</VRow>
</template> </template>

14
src/views/discover/MediaCardSlideView.vue
View File

@@ -39,21 +39,9 @@ onMounted(fetchData);
<MediaCard <MediaCard
:media="data" :media="data"
@click="toggle" @click="toggle"
class="mx-1" class="mx-1 media-slide-card"
height="22rem"
width="11rem"
:color="isSelected ? 'primary' : 'grey-lighten-1'" :color="isSelected ? 'primary' : 'grey-lighten-1'"
> >
<div class="d-flex fill-height align-center justify-center">
<VScaleTransition>
<v-icon
v-if="isSelected"
color="white"
size="48"
icon="mdi-close-circle-outline"
></v-icon>
</VScaleTransition>
</div>
</MediaCard> </MediaCard>
</VSlideGroupItem> </VSlideGroupItem>
</VSlideGroup> </VSlideGroup>