new modal

merlinschumacher · May 23, 2024 · 82e6a21 · 82e6a21
1 parent b188287
commit 82e6a21
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 148 deletions.
diff --git a/Renderer/CalendarRenderer/CinemaInfo.cs b/Renderer/CalendarRenderer/CinemaInfo.cs
@@ -9,7 +9,6 @@ public CinemaInfo(string displayName, string color)
         {
             DisplayName = displayName;
             Color = color;
-            CalendarFile = $"{DisplayName}.ics";
         }
 
         public CinemaInfo(Cinema cinema)
@@ -18,8 +17,6 @@ public CinemaInfo(Cinema cinema)
             DisplayName = cinema.DisplayName;
             Website = new Uri(cinema.Website);
             Color = cinema.Color;
-
-            CalendarFile = $"{DisplayName}.ics";
         }
 
         public int Id { get; set; }
@@ -28,7 +25,7 @@ public CinemaInfo(Cinema cinema)
 
         Uri? Website { get; set; }
 
-        public string CalendarFile { get; set; }
+        public string CalendarFile => DisplayName.Replace(" ", "_").Replace(":", "_").Replace("/", "_") + ".ics";
 
         public string Color { get; set; }
 

diff --git a/Scrapers/FilmkunstKinos/RaschplatzScraper.cs b/Scrapers/FilmkunstKinos/RaschplatzScraper.cs
@@ -10,7 +10,7 @@ public class RaschplatzScraper(KinohannoverContext context, ILogger<RaschplatzSc
         {
             DisplayName = "Kino am Raschplatz",
             Website = "https://www.kinoamraschplatz.de/de/programm.php",
-            Color = "#ac001f",
+            Color = "#7e0f23",
         };
     }
 }
diff --git a/wwwroot/index.css b/wwwroot/index.css
@@ -1,15 +1,4 @@
-:root {
-    font-family: "Inter", sans-serif;
-}
-
-@supports (font-variation-settings: normal) {
-    :root {
-        font-family: "Inter", sans-serif;
-        font-optical-sizing: auto;
-    }
-}
-
-@font-face {
+@font-face {
     font-family: Inter;
     font-style: normal;
     font-weight: 100 900;
@@ -25,52 +14,14 @@
     src: url("resources/InterVariable-Italic.woff2") format("woff2");
 }
 
-/* Animations to fade the snackbar in and out */
-@-webkit-keyframes fadein {
-    from {
-        bottom: 0;
-        opacity: 0;
-    }
-
-    to {
-        bottom: 30px;
-        opacity: 1;
-    }
-}
-
-@keyframes fadein {
-    from {
-        bottom: 0;
-        opacity: 0;
-    }
-
-    to {
-        bottom: 30px;
-        opacity: 1;
-    }
-}
-
-@-webkit-keyframes fadeout {
-    from {
-        bottom: 30px;
-        opacity: 1;
-    }
-
-    to {
-        bottom: 0;
-        opacity: 0;
-    }
+:root {
+    font-family: "Inter", sans-serif;
 }
 
-@keyframes fadeout {
-    from {
-        bottom: 30px;
-        opacity: 1;
-    }
-
-    to {
-        bottom: 0;
-        opacity: 0;
+@supports (font-variation-settings: normal) {
+    :root {
+        font-family: "Inter", sans-serif;
+        font-optical-sizing: auto;
     }
 }
 
@@ -168,53 +119,83 @@ details {
                 border-radius: 0.25em;
             }
 
-.fc-header-toolbar .fc-toolbar-title {
-    font-size: 1.3em;
+.fc .fc-list-event-time, .fc-event-time {
+    font-variant-numeric: tabular-nums;
 }
 
-.fc-list-event-time, .fc-event-time {
-    font-variant-numeric: tabular-nums;
+.fc .fc-toolbar .fc-toolbar-title {
+    font-size: 1.25em;
+}
+
+.fc .fc-daygrid-dot-event {
+    align-items: start;
 }
 
-.fc-daygrid-event-harness {
+    .fc .fc-daygrid-dot-event .fc-daygrid-event-dot {
+        margin-top: 0.35em;
+    }
+
+    .fc .fc-daygrid-dot-event .fc-event-title {
+        text-overflow: ellipsis;
+    }
+
+.fc .fc-daygrid-event-harness {
     font-size: 1.1em;
     padding: 0.1em;
 }
 
-/* The snackbar - position it at the bottom and in the middle of the screen */
-#snackbar {
-    visibility: hidden; /* Hidden by default. Visible on click */
-    min-width: 250px; /* Set a default minimum width */
-    margin-left: -125px; /* Divide value of min-width by 2 */
-    position: fixed; /* Sit on top of the screen */
-    z-index: 1; /* Add a z-index if needed */
-    left: 50%; /* Center the snackbar */
-    bottom: 30px; /* 30px from the bottom */
-    background-color: var(--fc-button-hover-bg-color);
+@media (min-width: 768px) {
+    details {
+        max-width: 320px;
+    }
+}
+
+.icsModal .body {
+    display: flex;
+    flex-direction: unset;
+    flex-wrap: wrap;
+    gap: 0.5em;
+}
+
+.icsModal .copyLinkInput {
+    flex-grow: 1;
     border-color: var(--fc-button-hover-border-color);
-    color: var(--fc-button-text-color);
     border-radius: 0.25em;
-    display: inline-block;
     font-size: 1em;
-    font-weight: 400;
-    line-height: 1.5;
-    padding: 0.4em 0.65em;
-    text-align: center;
-    user-select: none;
-    vertical-align: middle;
-}
-
-    /* Show the snackbar when clicking on a button (class added with JavaScript) */
-    #snackbar.show {
-        visibility: visible; /* Show the snackbar */
-        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
-  However, delay the fade out process for 2.5 seconds */
-        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
-        animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    padding: 1em 0.5em;
+}
+
+.icsModal .copyLinkButton {
+    flex-grow: 1;
+    padding: 1em 0.5em;
+}
+
+@keyframes buttonPulse {
+    0% {
+        background-color: var(--fc-button-bg-color);
     }
 
-@media (min-width: 768px) {
-    details {
-        max-width: 320px;
+    50% {
+        background-color: var(--fc-event-bg-color);
+    }
+
+    100% {
+        background-color: var(--fc-button-bg-color);
+    }
+}
+
+.icsModal .copyLinkButtonAnimate {
+    animation-name: buttonPulse;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+}
+
+@media (max-width: 1000px) {
+    .icsModal .body {
+        flex-direction: column;
+    }
+
+    .icsModal .copyLinkButton {
+        flex-grow: unset;
     }
 }
diff --git a/wwwroot/index.html b/wwwroot/index.html
@@ -3,11 +3,14 @@
 <head>
     <meta charset='utf-8' />
     <link rel="preload" href="index.css" as="style">
-    <link rel="preload" href="resources/fullcalendar.min.js" as="script">
+    <link rel="preload" href="resources/tingle.min.css" as="style">
+    <link rel="preload" href="resources/tingle.min.js" as="script">
     <link rel="preload" href="resources/de.js" as="script">
     <link rel="stylesheet" type="text/css" href="index.css">
+    <link rel="stylesheet" type="text/css" href="resources/tingle.min.css">
     <script src='resources/fullcalendar.min.js'></script>
     <script src='resources/de.js'></script>
+    <script src='resources/tingle.min.js' defer></script>
     <script src='index.js' defer></script>
     <title>Das aktuelle Kinoprogramm in Hannover</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -20,17 +23,32 @@
     <div class="content">
         <h1>Das aktuelle Kinoprogramm in Hannover</h1>
         <p>Willkommen auf www.filme-hannover.de. Hier finden sie eine Übersicht aller Kinovorstellungen, Filme und Kinos in Hannover.</p>
-        <p>
-            <details class="fc">
-                <summary class="fc-button fc-button-primary">
-                    Kinoliste anzeigen
-                </summary>
-                <p>Folgende Kinos werden gelistet:</p>
-                <ul id="cinemaList"></ul>
-                <div id="snackbar"></div>
-            </details>
-        </p>
         <div id="calendar"></div>
     </div>
+
+    <template id="cinemaListTemplate">
+        <p>Folgende Kinos stehen zur Auwahl :</p>
+        <ul id="cinemaList"></ul>
+    </template>
+
+    <template id="icsCopyModalTemplate">
+        <div class="icsModal">
+            <h2 class="title">📅 Kalender-Link <span class="cinemaName"></span></h2>
+            <p>
+                <div class="body fc">
+                    <p>
+                        Hier finden Sie den Link zum Kalender <span class="cinemaName"></span>. Kopieren Sie diesen Link und fügen Sie ihn in Ihrer Kalender-App ein.
+                    </p>
+                    <input class="copyLinkInput" type="text" name="name" value="" readonly />
+                </div>
+            </p>
+        </div>
+    </template>
+
+    <template id="funnelIcon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="fc-icon fc-icon-funnel" viewBox="0 0 16 16">
+            <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z" />
+        </svg>
+    </template>
 </body>
 </html>