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/extendableBox.svelte
+++ b/frontend/src/lib/components/widgets/extendableBox.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+    export let col: Column
+    export let opened = -1
+</script>
+
+<div class="boxes">
+    {#each col.extendableBoxes as box, i}
+        <div class="box" class:opened="{i == opened}">
+            <div
+                class="upper"
+                on:keydown
+                on:click="{() => {
+                    if (opened == i) opened = -1
+                    else opened = i
+                }}"
+            >
+                <h4>
+                    {box.title}
+                </h4>
+                <div>
+                    {#if i !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
+                            src="/media/up.svg"
+                            alt="arrow"
+                        />{/if}
+                </div>
+            </div>
+            <div class="content" class:closed="{i !== opened}">
+                {@html box.text}
+                {#if box.emailButton}
+                    <a href="mailto:info@fontis.de?subject={box.emailSubject || 'Bewerbung'}" class="button">
+                        <button> bewerben </button>
+                    </a>
+                {/if}
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    button {
+        margin-top: 20px;
+        background-color: @bg-color-secondary;
+        color: @font-color-secondary;
+        border: 2px solid @bg-color-secondary;
+        padding: 2px 15px;
+        font-weight: bold;
+    }
+
+    .boxes {
+        display: flex;
+        flex-direction: column;
+        .box {
+            border-bottom: 2px dotted @bg-color-secondary;
+            display: flex;
+            transition: padding-bottom 1s;
+            padding-bottom: 0px;
+            flex-direction: column;
+            padding-top: 20px;
+            gap: 20px;
+            &.opened {
+                padding-bottom: 20px;
+            }
+            .upper {
+                font-size: 1.6rem;
+                font-weight: 500;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .content {
+                max-height: 1000px;
+                overflow: hidden;
+                transition: max-height 1s ease-in-out;
+                &.closed {
+                    max-height: 0px;
+                }
+            }
+        }
+    }
+</style>