112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<!-- StoryRing.vue -->
|
|
<script setup lang="ts">
|
|
import { proxyImage } from '@/lib/proxyImage';
|
|
|
|
const props = defineProps<{
|
|
username: string;
|
|
profilePicUrl: string | null;
|
|
isUnread: boolean;
|
|
muted: boolean;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
select: [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="rail__item"
|
|
:class="{ 'rail__item--muted': muted }"
|
|
@click="$emit('select')"
|
|
:aria-label="`${username}'s story, ${isUnread ? 'unread' : 'already viewed'}${muted ? ', muted' : ''}`"
|
|
>
|
|
<span
|
|
class="rail__ring"
|
|
:class="isUnread ? 'rail__ring--unread' : 'rail__ring--seen'"
|
|
>
|
|
<img
|
|
v-if="profilePicUrl"
|
|
:src="proxyImage(profilePicUrl)"
|
|
:alt="''"
|
|
class="rail__thumb-img"
|
|
loading="lazy"
|
|
/>
|
|
<span v-else class="rail__thumb" />
|
|
</span>
|
|
<span class="rail__label">{{ username }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rail__item--muted .rail__ring{
|
|
opacity: 0.26;
|
|
}
|
|
|
|
.rail__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--haze);
|
|
flex-shrink: 0; /* add — keeps rings from squashing, forces scroll instead */
|
|
}
|
|
|
|
.rail__ring {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 999px;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.rail__ring {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
.rail__thumb {
|
|
width: 4.35rem;
|
|
height: 4.35rem;
|
|
}
|
|
.rail__label {
|
|
font-size: 0.75rem;
|
|
max-width: 5.2rem;
|
|
}
|
|
}
|
|
|
|
.rail__ring--unread {
|
|
border: 1.5px solid var(--bioluminum);
|
|
box-shadow: 0 0 10px -2px var(--bioluminum);
|
|
}
|
|
.rail__ring--seen {
|
|
border: 1.5px solid var(--line);
|
|
box-shadow: none;
|
|
}
|
|
.rail__thumb-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 999px;
|
|
}
|
|
.rail__thumb {
|
|
width: 3.35rem;
|
|
height: 3.35rem;
|
|
border-radius: 999px;
|
|
background: radial-gradient(circle at 35% 30%, #1d3644, var(--midwater));
|
|
}
|
|
.rail__label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.03em;
|
|
text-transform: lowercase;
|
|
max-width: 4.2rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|