init

frontend/src/components/MovieCard.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from 'vue'
+import { posterUrl } from '../images'
+
+const props = defineProps({
+  movie: { type: Object, required: true },
+})
+
+defineEmits(['open'])
+
+const poster = computed(() => posterUrl(props.movie.poster_path, 'w342'))
+const rating = computed(() =>
+  props.movie.vote_average ? props.movie.vote_average.toFixed(1) : null
+)
+</script>
+
+<template>
+  <button class="card" type="button" @click="$emit('open', movie)">
+    <div class="poster">
+      <img v-if="poster" :src="poster" :alt="movie.title" loading="lazy" />
+      <span v-else class="placeholder">Kein Cover</span>
+      <span v-if="rating" class="rating">{{ rating }}</span>
+    </div>
+    <div class="body">
+      <h2>{{ movie.title }}</h2>
+      <p class="meta">{{ movie.year || 'Jahr unbekannt' }}</p>
+      <p class="teaser">{{ movie.teaser || movie.overview }}</p>
+    </div>
+  </button>
+</template>
+
+<style scoped>
+.card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-align: left;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+.card:hover,
+.card:focus-visible {
+  transform: translateY(-4px);
+  border-color: var(--accent);
+}
+
+.poster {
+  position: relative;
+  aspect-ratio: 2 / 3;
+  background: #1c1c22;
+}
+
+.poster img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.placeholder {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.rating {
+  position: absolute;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  padding: 0.15rem 0.45rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 6px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.85rem;
+}
+
+h2 {
+  font-size: 1rem;
+  line-height: 1.3;
+}
+
+.meta {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.teaser {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  overflow: hidden;
+  color: #b9b9c6;
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+</style>