next session

2023-07-15 16:15:17 +00:00
parent d4e21505ad
commit c6d43a95fa
28 changed files with 988 additions and 72 deletions
--- a/frontend/src/lib/components/widgets/events.svelte
+++ b/frontend/src/lib/components/widgets/events.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+
+    export let col: Column
+    export let pageId: string
+
+    let months = [
+        "Januar",
+        "Februar",
+        "März",
+        "April",
+        "Mai",
+        "Juni",
+        "Juli",
+        "August",
+        "September",
+        "Oktober",
+        "November",
+        "Dezember",
+    ]
+
+    let displayedItems = 4
+    const itemsPerPage = 4
+
+    function showMore() {
+        displayedItems += itemsPerPage
+    }
+
+    console.log("col:", col)
+</script>
+
+<div class="events">
+    {#each col.networkEvents.slice(0, displayedItems) as nE}
+        <div class="event">
+            <div class="calendar">
+                <div class="calendar-icon"><img src="/media/calendar.svg" alt="calendar" /></div>
+                <div class="date">
+                    <div class="month">{months[new Date(nE.beginDate).getMonth()]}</div>
+                    <div class="day">
+                        {new Date(nE.beginDate).getDate()}
+                        {#if nE.endDate}
+                            - {new Date(nE.endDate).getDate()}
+                        {/if}
+                    </div>
+                </div>
+            </div>
+            <div class="details">
+                <em>{nE.title}</em>
+                <a href="{apiBaseURL}page/{pageId}/{nE.file.src}" download="{apiBaseURL}page/{pageId}/{nE.file.src}">
+                    <button class="more">mehr</button></a
+                >
+            </div>
+        </div>
+    {/each}
+    {#if displayedItems < col.networkEvents.length}
+        <button on:click="{showMore}">Weitere Events</button>
+    {/if}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+
+    .events {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        button {
+            padding: 2px 15px;
+            border: 2px solid @bg-color-secondary;
+            margin-top: 40px;
+            font-weight: bold;
+        }
+        .event {
+            width: 100%;
+            display: flex;
+            .details {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: space-between;
+                padding: 24px 20px;
+                gap: 10px;
+                @media @tablet {
+                    padding: 0px 0px 0px 20px;
+                    flex-direction: row;
+                    align-items: center;
+                }
+                em {
+                    font-weight: bold;
+                }
+                .more {
+                    background-color: @bg-color-secondary;
+                    color: @font-color-secondary;
+                    border: none;
+                    height: 36px;
+                    padding: 2px 15px;
+                    font-size: 14px;
+                    font-weight: bold;
+                    cursor: pointer;
+                }
+            }
+            .calendar {
+                width: 110px;
+                min-width: 110px;
+                display: flex;
+                border-right: @bg-color-secondary 2px solid;
+                flex-direction: column;
+                align-items: center;
+                @media @tablet {
+                    flex: 1;
+                    gap: 10px;
+                    padding: 32px 35px 0px 0px;
+                    max-width: 210px;
+                    flex-direction: row;
+                }
+                .calendar-icon {
+                    width: 56px;
+                    height: 56px;
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: contain;
+                    }
+                }
+                .date {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    width: fit-content;
+                    .month {
+                        font-size: 0.7rem;
+                    }
+                    .day {
+                        font-size: 1.2rem;
+                        font-family: "Libre Caslon Text", serif;
+                    }
+                }
+            }
+        }
+    }
+</style>