From 81076d9248536d2b609d31117e2cc3b6a7d150e3 Mon Sep 17 00:00:00 2001
From: jona <jona@systemli.org>
Date: Thu, 23 Mar 2023 12:02:41 +0100
Subject: [PATCH] title-image popup in event view 2nd step

---
 js/src/components/Event/EventHeadline.vue | 62 +++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 js/src/components/Event/EventHeadline.vue

diff --git a/js/src/components/Event/EventHeadline.vue b/js/src/components/Event/EventHeadline.vue
new file mode 100644
index 000000000..39aa00d87
--- /dev/null
+++ b/js/src/components/Event/EventHeadline.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="card">
+    <header class="card-head">
+      <div>{{ $t("Headline picture") }}</div>
+      <button type="button" class="delete" @click="$emit('close')" />
+    </header>
+    <div class="card-body">
+      <img :src="image" />
+    </div>
+    <footer class="card-foot"></footer>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class EventHeadline extends Vue {
+  @Prop({ required: true, type: String }) image!: string;
+}
+</script>
+<style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
+button.delete {
+  margin-left: auto;
+  @include margin-right(1rem);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 40px);
+  overflow: auto;
+}
+
+.card-body {
+  display: flex;
+  justify-content: center;
+  background-color: white;
+}
+
+.card-head {
+  border-bottom: 1px solid #dbdbdb;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  display: flex;
+  padding: 20px;
+  position: relative;
+}
+
+.card-foot {
+  display: flex;
+  padding: 20px;
+  position: relative;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border-top: 1px solid #dbdbdb;
+}
+
+.img {
+  object-fit: contain;
+}
+</style>