aMaZing CSS!!!!! thanks copilot

Author: penelopeysm

src/App.svelte

@@ -33,7 +33,7 @@
     body {
         display: flex;
         justify-content: center;
-        background-color: #fef0ff;
+        background-color: #f5f5f5;
         height: 100vh;
         overflow: hidden;
     }

src/lib/Details.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
     import { type Concert } from "src/lib/bindings/Concert";
-    import { formatDate } from "src/utils";
+    import Tags from "src/lib/Tags.svelte";
+    import { formatDate, getPriceString } from "src/utils";
 
     export let selectedConcert: Concert | null;
 </script>
 
 <div class="details">
     {#if selectedConcert !== null}
         <div id="selected">
+            <Tags concert={selectedConcert} />
             <h2>
                 {selectedConcert.title}
                 {#if selectedConcert.subtitle}
@@ -16,24 +18,9 @@
             </h2>
             <p>
                 {formatDate(new Date(selectedConcert.datetime))}
-                •
-                {selectedConcert.venue}
-                •
-                {#if selectedConcert.min_price !== null && selectedConcert.max_price !== null}
-                    {#if selectedConcert.min_price === selectedConcert.max_price}
-                        {#if selectedConcert.min_price === 0}
-                            Free entry
-                        {:else}
-                            £{selectedConcert.min_price / 100}
-                        {/if}
-                    {:else}
-                        £{selectedConcert.min_price /
-                            100}–£{selectedConcert.max_price / 100}
-                    {/if}
-                {/if}
-            </p>
-
-            <p>
+                |
+                {getPriceString(selectedConcert)}
+                <br />
                 <a href={selectedConcert.url}>Link to concert</a>
                 {#if selectedConcert.programme_pdf_url}
                     | <a href={selectedConcert.programme_pdf_url}
@@ -99,7 +86,7 @@
         overflow-y: auto;
 
         padding: 10px;
-        border: 2px solid #000;
+        border: 2px solid #666;
         border-radius: 10px;
     }
 

src/lib/Filters.svelte

@@ -31,6 +31,7 @@
         background-color: #f0f0f0;
         padding: 10px;
         border-radius: 0.5rem;
+        border: 2px solid #666;
 
         display: flex;
         flex-direction: column;

src/lib/Overview.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { type Concert } from "src/lib/bindings/Concert";
+    import Tags from "src/lib/Tags.svelte";
     import { type FiltersType } from "src/lib/filters";
-    import { formatDate } from "src/utils";
+    import { formatDate, getPriceString } from "src/utils";
 
     export let selectedConcert: Concert | null;
     export let filters: FiltersType;
@@ -42,15 +43,19 @@
             class:active={selectedConcert === concert}
             class:wigmoreU35={concert.is_wigmore_u35}
             on:click={() => {
-                selectedConcert = concert;
+                selectedConcert = selectedConcert === concert ? null : concert;
             }}
         >
+            <Tags {concert} />
             <h3>{concert.title}</h3>
             {#if concert.subtitle !== null}
                 <h4>{concert.subtitle}</h4>
             {/if}
-            <p>{formatDate(new Date(concert.datetime))}</p>
-            <p>{concert.venue}</p>
+            <p>
+                {formatDate(new Date(concert.datetime))}
+                |
+                {getPriceString(concert)}
+            </p>
         </button>
     {/each}
 </div>
@@ -63,29 +68,31 @@
         width: 100%;
         height: 100%;
         overflow-y: auto;
+        padding: 0 15px 0 0;
     }
 
     .concert {
-        border: 2px solid #000;
+        border: 2px solid #666;
         padding: 10px;
         border-radius: 5px;
         width: 100%;
 
         font-family: inherit;
         text-align: left;
         cursor: pointer;
+
+        transition: border-color 0.3s;
         transition: background-color 0.3s;
+        transition: margin-left 0.3s;
     }
 
     .active {
-        background-color: #ff99bb;
-    }
-
-    .wigmoreU35 {
-        border: 2px dashed #c13ad6;
+        border-color: #a6628f;
+        background-color: #f5e9f1;
+        margin-left: 15px;
     }
 
     .concert > * {
-        margin: 0;
+        margin: 2px 0;
     }
 </style>

src/lib/Tags.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { type Concert } from "src/lib/bindings/Concert";
+    export let concert: Concert;
+</script>
+
+<div id="tags">
+    {#if concert.venue === "Wigmore Hall"}
+        <span class="tag wigmore">Wigmore Hall</span>
+    {/if}
+    {#if concert.is_wigmore_u35}
+        <span class="tag wigmore-u35">£5 for U35</span>
+    {/if}
+</div>
+
+<style>
+    div#tags {
+        display: flex;
+        justify-content: flex-start;
+        gap: 5px;
+        margin-bottom: 5px;
+    }
+
+    span.tag {
+        padding: 2px 5px;
+        border-radius: 5px;
+        margin: 0;
+    }
+
+    span.wigmore {
+        background-color: #17a8ad;
+        color: white;
+    }
+
+    span.wigmore-u35 {
+        background-color: #3694cf;
+        color: white;
+    }
+</style>

src/utils.ts

@@ -1,6 +1,24 @@
+import { type Concert } from 'src/lib/bindings/Concert';
+
 export function formatDate(date: Date): string {
     let day_of_week = date.toLocaleString(undefined, { weekday: 'long' });
-    let date_long = date.toLocaleString(undefined, { day: '2-digit', month: 'long', year: 'numeric' });
+    let date_long = date.toLocaleString(undefined, { day: 'numeric', month: 'long', year: 'numeric' });
     let time = date.toLocaleString(undefined, { hour: 'numeric', minute: '2-digit', hour12: true });
     return `${date_long} (${day_of_week}), ${time}`;
 }
+
+export function getPriceString(concert: Concert): string {
+    if (concert.min_price !== null && concert.max_price !== null) {
+        if (concert.min_price === concert.max_price) {
+            if (concert.min_price === 0) {
+                return "Free entry";
+            }
+            else {
+                return `£${concert.min_price / 100}`;
+            }
+        } else {
+            return `£${concert.min_price / 100}–£${concert.max_price / 100}`;
+        }
+    }
+    return "Price not available";
+}