next session

frontend/src/lib/components/widgets/publications.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+
+    export let col: Column
+    export let pageId: string
+
+    let displayedItems = 3
+    const itemsPerPage = 3
+
+    function showMore() {
+        displayedItems += itemsPerPage
+    }
+</script>
+
+<div class="publications">
+    {#each col.publications.slice(0, displayedItems) as publication}
+        <div class="publication">
+            <div class="left"><img src="/media/file.svg" alt="file" /></div>
+            <div class="right">
+                <div class="content">{@html publication.content}</div>
+                <div class="download">
+                    <a
+                        href="{apiBaseURL}page/{pageId}/{publication.file.src}"
+                        download="{apiBaseURL}page/{pageId}/{publication.file.src}"
+                    >
+                        <button class="download-button">zur Publikation</button>
+                    </a>
+                </div>
+            </div>
+        </div>
+    {/each}
+</div>
+{#if displayedItems < col.publications.length}
+    <button on:click="{showMore}">Weitere Publikationen</button>
+{/if}
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+
+    button {
+        padding: 2px 15px;
+        border: 2px solid @bg-color-secondary;
+        margin-top: 40px;
+        font-weight: bold;
+    }
+    .publications {
+        gap: 60px;
+        display: flex;
+        flex-direction: column;
+        @media @tablet {
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+        .publication {
+            max-width: 370px;
+            display: flex;
+            align-items: flex-start;
+            .left {
+                max-width: 75px;
+                flex: 1;
+            }
+            .right {
+                padding-left: 20px;
+                border-left: 2px solid @bg-color-secondary;
+                flex: 1;
+                button {
+                    background-color: @bg-color-secondary;
+                    color: @font-color-secondary;
+                    border: 2px solid @bg-color-secondary;
+                    padding: 2px 15px;
+                    font-weight: bold;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+</style>