link media cards

frontend/rabbi_gerzi/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomePage from '@/views/HomePage.vue'
 import LoginPage from '@/views/LoginPage.vue'
 import MediaPage from '@/views/MediaPage.vue'
+import ElementPage from '@/views/ElementPage.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -21,6 +22,11 @@ const router = createRouter({
       name: 'media',
       component: MediaPage,
     },
+    {
+      path: '/element/:id',
+      name: 'element',
+      component: ElementPage,
+    },
   ],
 })
 

frontend/rabbi_gerzi/src/stores/mediaSets.ts

@@ -6,6 +6,7 @@ export interface MediaSet {
   name: string
   description: string
   iconImageUrl: string
+  rootElementId: number | null
 }
 
 interface SetsResponse {

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import SiteHeader from '@/components/SiteHeader.vue'
+
+const route = useRoute()
+
+const elementId = computed(() => {
+  const routeElementId = route.params.id
+
+  if (Array.isArray(routeElementId)) {
+    return routeElementId.join('/')
+  }
+
+  return routeElementId
+})
+</script>
+
+<template>
+  <div class="element-page">
+    <SiteHeader />
+    <main class="element-page__main" data-cy="element-page">
+      <h1 class="element-page__heading">Element {{ elementId }}</h1>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.element-page {
+  min-height: 100vh;
+  background: var(--color-white);
+}
+
+.element-page__main {
+  min-height: 100vh;
+  padding: 5.1rem 4.15rem 5rem;
+}
+
+.element-page__heading {
+  margin: 0;
+  color: #2c2c2c;
+  font-family: var(--font-serif);
+  font-size: clamp(2.6rem, 4.8vw, 3.2rem);
+  font-weight: 400;
+  line-height: 1.1;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .element-page__main {
+    padding: 3rem 1rem;
+  }
+}
+</style>

frontend/rabbi_gerzi/src/views/MediaPage.vue

@@ -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
+          <template v-for="mediaSet in sets" :key="mediaSet.id">
-            v-for="mediaSet in sets"
+            <RouterLink
-            :key="mediaSet.id"
+              v-if="mediaSet.rootElementId !== null"
-            class="media-page__card"
+              :to="{ name: 'element', params: { id: mediaSet.rootElementId } }"
-            data-cy="media-set-card"
+              class="media-page__card"
-          >
+              data-cy="media-set-card"
-            <img
+            >
-              :src="mediaSet.iconImageUrl"
+              <img
-              :alt="`${mediaSet.name} icon`"
+                :src="mediaSet.iconImageUrl"
-              class="media-page__card-icon"
+                :alt="`${mediaSet.name} icon`"
-              data-cy="media-set-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">
+              <h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
-              {{ mediaSet.description }}
+              <p class="media-page__card-description">
-            </p>
+                {{ mediaSet.description }}
-          </article>
+              </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 {