yisroelbaum/Rabbi_Gerzi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

link media cards

Browse source
This commit is contained in:
Yisroel Baum 2026-05-25 21:56:54 +03:00
parent bf25822463
commit 2d24361832
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
4 changed files with 118 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

74
frontend/rabbi_gerzi/src/views/MediaPage.vue
View file

@ -33,23 +33,41 @@ onMounted(() => {
No media sets are available yet.
</p>
<div v-else class="media-page__grid" data-cy="media-set-grid">
<article
v-for="mediaSet in sets"
:key="mediaSet.id"
class="media-page__card"
data-cy="media-set-card"
>
<img
:src="mediaSet.iconImageUrl"
:alt="`${mediaSet.name} icon`"
class="media-page__card-icon"
data-cy="media-set-icon"
/>
<h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
<p class="media-page__card-description">
{{ mediaSet.description }}
</p>
</article>
<template v-for="mediaSet in sets" :key="mediaSet.id">
<RouterLink
v-if="mediaSet.rootElementId !== null"
:to="{ name: 'element', params: { id: mediaSet.rootElementId } }"
class="media-page__card"
data-cy="media-set-card"
>
<img
:src="mediaSet.iconImageUrl"
:alt="`${mediaSet.name} icon`"
class="media-page__card-icon"
data-cy="media-set-icon"
/>
<h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
<p class="media-page__card-description">
{{ mediaSet.description }}
</p>
</RouterLink>
<article
v-else
class="media-page__card media-page__card--disabled"
data-cy="media-set-card"
>
<img
:src="mediaSet.iconImageUrl"
:alt="`${mediaSet.name} icon`"
class="media-page__card-icon"
data-cy="media-set-icon"
/>
<h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
<p class="media-page__card-description">
{{ mediaSet.description }}
</p>
</article>
</template>
</div>
</section>
</main>
@ -114,7 +132,29 @@ onMounted(() => {
background: var(--color-white);
border: 1px solid #e5cf9f;
border-radius: 17px;
color: inherit;
text-align: center;
text-decoration: none;
transition:
border-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
}
a.media-page__card:hover,
a.media-page__card:focus-visible {
border-color: #d4ad5f;
box-shadow: 0 14px 35px rgb(44 44 44 / 10%);
transform: translateY(-2px);
}
a.media-page__card:focus-visible {
outline: 3px solid rgb(212 173 95 / 45%);
outline-offset: 4px;
}
.media-page__card--disabled {
opacity: 0.72;
}
.media-page__card-icon {