DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Moved scene tile 'new'-star to meta component to consistent position between grid and list view.

This commit is contained in:
DebaucheryLibrarian 2024-09-05 01:49:18 +02:00
parent 415c6f3e18
commit 476f9bff2e
2 changed files with 29 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/scenes/meta.vue
View File

@ -35,6 +35,12 @@
year: 'y', year: 'y',
}[scene.datePrecision] || 'MMM d, y') }}</time> }[scene.datePrecision] || 'MMM d, y') }}</time>
</Link> </Link>
<span
v-if="scene.isNew"
:title="`Newly added ${format(scene.createdAt, 'yyyy-MM-dd')}`"
class="new"
><Icon icon="star-full" /></span>
</div> </div>
</template> </template>
@ -90,4 +96,26 @@ defineProps({
font-style: italic; font-style: italic;
color: var(--highlight); color: var(--highlight);
} }
.new {
display: flex;
flex-direction: row-reverse;
align-items: center;
position: absolute;
top: -1.05rem;
right: .5rem;
padding: .2rem .5rem .1rem .5rem;
border-radius: .25rem .25rem 0 0;
background: var(--grey-dark-40);
color: var(--gold);
font-size: .7rem;
font-weight: bold;
box-shadow: 0 0 3px var(--shadow-weak-20);
.icon {
width: .75rem;
height: .75rem;
fill: var(--gold);
}
}
</style> </style>

34
components/scenes/tile.vue
View File

@ -1,10 +1,7 @@
<template> <template>
<div <div
class="tile" class="tile"
:class="{ :class="{ unstashed: !favorited && pageStash && user && pageStash.user.id === user?.id }"
unstashed: !favorited && pageStash && user && pageStash.user.id === user?.id,
'is-new': scene.isNew,
}"
> >
<div class="tile-full"> <div class="tile-full">
<div class="poster-container"> <div class="poster-container">
@ -37,12 +34,6 @@
@stashed="(stash) => { favorited = stash.id === currentStash.id ? true : favorited; }" @stashed="(stash) => { favorited = stash.id === currentStash.id ? true : favorited; }"
@unstashed="(stash) => { favorited = stash.id === currentStash.id ? false : favorited; }" @unstashed="(stash) => { favorited = stash.id === currentStash.id ? false : favorited; }"
/> />
<span
v-if="scene.isNew"
:title="`Newly added ${format(scene.createdAt, 'yyyy-MM-dd')}`"
class="new"
><Icon icon="star-full" /></span>
</div> </div>
<Meta <Meta
@ -111,7 +102,6 @@
<script setup> <script setup>
import { ref, inject } from 'vue'; import { ref, inject } from 'vue';
import { format } from 'date-fns';
import getPath from '#/src/get-path.js'; import getPath from '#/src/get-path.js';
@ -201,28 +191,6 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
background-position: center; background-position: center;
} }
.new {
display: flex;
flex-direction: row-reverse;
align-items: center;
position: absolute;
bottom: 0;
right: .5rem;
padding: .2rem .5rem .1rem .5rem;
border-radius: .25rem .25rem 0 0;
background: var(--grey-dark-40);
color: var(--gold);
font-size: .7rem;
font-weight: bold;
box-shadow: 0 0 3px var(--shadow-weak-20);
.icon {
width: .75rem;
height: .75rem;
fill: var(--gold);
}
}
.row { .row {
margin: 0 .5rem .25rem .5rem; margin: 0 .5rem .25rem .5rem;
font-size: .9rem; font-size: .9rem;