Add popup

src/Eventoverview.ce.vue

@@ -1,40 +1,51 @@
 <template>
   <div
-    class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
+    class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))] font-nunito"
   >
     <a
       v-for="(event, index) in events"
       :key="index"
-      :href="props.urlPattern.replace('{slug}', event.slug)"
+      href="#"
+      @click.prevent="makeVisible(event)"
       class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group"
     >
       <img :src="event.image" />
-      <div class="p-6 flex flex-col">
+      <div class="p-6 flex flex-col grow">
         <h2
           class="font-arvo flex-none text-primary text-sm md:text-base"
           v-text="event.name"
         ></h2>
         <div class="flex items-baseline text-sm">
-          <calendar-icon class="w-3 h-3 text-primary"></calendar-icon>
+          <calendar-icon class="w-3 h-3 text-secondary"></calendar-icon>
           <span
             class="text-sm font-semibold text-gray-800 ml-2"
             v-text="event.dates"
           ></span>
         </div>
-        <div class="flex-grow c text-sm mt-3" v-text="event.excerpt"></div>
         <div
-          class="bg-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3"
+          class="grow text-sm leading-normal text-gray-800 mt-3"
+          v-text="event.excerpt"
+        ></div>
+        <div
+          class="bg-primaryfg text-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3"
         >
-          Zur Anmeldung
+          Zur Veranstaltung
         </div>
       </div>
     </a>
   </div>
+
+  <popup
+    v-if="visibleEvent !== null"
+    :event="visibleEvent"
+    @close="hideEvent"
+  ></popup>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import CalendarIcon from "./components/icons/CalendarIcon.vue";
+import Popup from "./components/Popup.vue";
 
 const props = defineProps({
   url: {
@@ -45,14 +56,32 @@ const props = defineProps({
     required: true,
     type: String,
   },
+  overviewUrl: {
+    required: true,
+    type: String,
+  },
 });
 
 const events = ref([]);
+const visibleEvent = ref(null);
 
 async function reloadEvents() {
   const results = await axios.get(props.url);
   events.value = results.data.data;
 }
 
+function makeVisible(event) {
+  window.history.pushState(
+    {},
+    "",
+    props.urlPattern.replace("{slug}", event.slug)
+  );
+  visibleEvent.value = event;
+}
+
+function hideEvent() {
+  window.history.pushState({}, "", props.overviewUrl);
+  visibleEvent.value = null;
+}
 reloadEvents();
 </script>

src/components/Popup.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40"
+    @click.self="emit('close')"
+  >
+    <div
+      class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto"
+    >
+      <h2
+        class="font-arvo text-primary text-sm md:text-base"
+        v-text="event.name"
+      ></h2>
+      <div class="flex items-baseline text-sm">
+        <calendar-icon class="w-3 h-3 flex-none text-secondary"></calendar-icon>
+        <span
+          class="text-sm font-semibold font-nunito text-gray-800 ml-2"
+          v-text="event.dates"
+        ></span>
+      </div>
+
+      <div
+        class="text-gray-800 mt-3 font-nunito"
+        v-html="event.description"
+      ></div>
+      <div class="flex mt-3">
+        <a
+          href="#"
+          class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg"
+        >
+          Zur Anmeldung
+        </a>
+      </div>
+      <a
+        class="absolute block mt-3 mr-3 right-0 top-0"
+        href="#"
+        @click.prevent="emit('close')"
+      >
+        <close-icon class="text-gray-700 w-5 h-5"></close-icon>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CalendarIcon from "./icons/CalendarIcon.vue";
+import CloseIcon from "./icons/CloseIcon.vue";
+
+const emit = defineEmits(["close"]);
+const props = defineProps({
+  event: {
+    required: true,
+  },
+});
+</script>

src/components/icons/CloseIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    height="311pt"
+    viewBox="0 0 311 311.077"
+    width="311pt"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <path
+      d="M16.035 311.078c-4.097 0-8.195-1.558-11.308-4.695-6.25-6.25-6.25-16.383 0-22.633L283.789 4.687c6.25-6.25 16.383-6.25 22.633 0s6.25 16.383 0 22.637L27.363 306.383a16.045 16.045 0 0 1-11.328 4.695zm0 0"
+    />
+    <path
+      d="M295.117 311.078a15.879 15.879 0 0 1-11.308-4.695L4.727 27.324c-6.25-6.254-6.25-16.386 0-22.636s16.382-6.25 22.636 0L306.422 283.75c6.25 6.25 6.25 16.383 0 22.633-3.137 3.117-7.23 4.695-11.305 4.695zm0 0"
+    />
+  </svg>
+</template>

tailwind.config.js

@@ -4,12 +4,26 @@ export default {
   theme: {
     extend: {
       colors: {
+        gray: {
+          100: "#f7fafc",
+          200: "#edf2f7",
+          300: "#e2e8f0",
+          400: "#cbd5e0",
+          500: "#a0aec0",
+          600: "#718096",
+          700: "#4a5568",
+          800: "#2d3748",
+          900: "#1a202c",
+        },
         edit: {
           DEFAULT: "hsl(20, 77%, 55%)",
         },
         primary: {
           DEFAULT: "var(--primary)",
         },
+        primaryfg: {
+          DEFAULT: "var(--primaryfg)",
+        },
         secondary: {
           DEFAULT: "var(--secondary)",
         },
@@ -22,6 +36,10 @@ export default {
       },
       fontFamily: {
         arvo: ["Arvo"],
+        nunito: ["Nunito"],
+      },
+      boxShadow: {
+        button: "inset 0 -2px 0 rgba(255,255,255,0.2)",
       },
     },
   },