traxxx/assets/components/users/scene-preview.vue

112 lines
1.7 KiB
Vue

<template>
<a
:href="`/scene/${scene.id}/${scene.slug || ''}`"
target="_blank"
rel="noopener noreferrer"
class="scene nolink"
>
<img
:src="getPath(scene.poster, 'thumbnail')"
class="scene-poster"
>
<div class="scene-header">
<span class="scene-actors nolist">{{ scene.actors.map(actor => actor.name).join(', ') }}</span>
</div>
<div class="scene-footer">
<img
:src="`/img/logos/${scene.entity.parent.slug}/favicon_light.png`"
class="scene-favicon"
>
<span class="scene-title">{{ scene.title }}</span>
</div>
</a>
</template>
<script>
export default {
props: {
scene: {
type: Object,
default: null,
},
stash: {
type: Object,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
.scene {
width: 14rem;
height: 100%;
position: relative;
font-size: 0;
}
.scene-poster {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
}
.scene-header,
.scene-footer {
width: 100%;
height: 1.25rem;
display: flex;
align-items: center;
position: absolute;
left: 0;
background: var(--darken-weak);
color: var(--text-light);
font-size: .7rem;
font-weight: bold;
overflow: hidden;
text-shadow: 0 0 2px var(--text-dark);
}
.scene-header {
top: 0;
}
.scene-footer {
bottom: 0;
}
.scene-title {
padding: .25rem .5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.scene-actors {
padding: 0 .5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.scene-unstash {
fill: var(--lighten-strong);
padding: .25rem;
filter: drop-shadow(0 0 1px var(--shadow));
&:hover {
fill: var(--text-light);
}
}
.scene-favicon {
width: 1rem;
height: 1rem;
padding: .1rem 0 0 .25rem;
}
</style>