most of it

2023-09-18 17:31:11 +00:00
parent 5f27fe0c5b
commit 481308522f
380 changed files with 3015 additions and 2480 deletions
--- a/frontend/src/lib/components/pagebuilder/iconInfoBoard.svelte
+++ b/frontend/src/lib/components/pagebuilder/iconInfoBoard.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    import { fly } from "svelte/transition"
+    import inView from "../../functions/observer"
+    let visible = false
+    let node
+    export let col: Column
+    export let pageId: string
+    export let i: number
+</script>
+
+{#key visible}
+    <div
+        class="infoBoard"
+        bind:this="{node}"
+        use:inView="{{ threshold: 0 }}"
+        on:enter="{() => {
+            visible = true
+        }}"
+        in:fly="{{ duration: 600, delay: 100 + 100 * (i + 1), x: 300 + i * 200, opacity: 0 }}"
+    >
+        <div class="header">
+            <div class="icon">
+                <svg
+                    id="mySvgObject{i}"
+                    fill="var(--link-font-color)"
+                    data-src="{`${apiBaseURL}content/${pageId}/${col.iconInfoBoard.icon?.src}`}"></svg>
+            </div>
+            <div class="title">
+                {col.iconInfoBoard.title}
+                <div></div>
+            </div>
+        </div>
+        <div class="content">
+            {@html col.iconInfoBoard.text}
+        </div>
+    </div>
+{/key}
+
+<style lang="less">
+    @import "../../assets/css/variables.less";
+    .infoBoard {
+        display: flex;
+        flex-direction: column;
+        padding: 15px;
+        gap: 40px;
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            .icon {
+                width: 64px;
+                height: 64px;
+                svg {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                }
+            }
+            .title {
+                font-size: 1.5rem;
+                display: flex;
+                flex-direction: column;
+                color: var(--link-font-color);
+                div {
+                    border-bottom: 1px solid var(--normal-font-color);
+                    width: 50px;
+                }
+            }
+        }
+        .content {
+            text-align: left;
+        }
+    }
+</style>