moved post details to dialog

ortwic · Feb 11, 2024 · 034097e · 034097e
1 parent d814841
commit 034097e
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 35 deletions.
diff --git a/src/components/dialogs/ConfirmDialog.svelte b/src/components/dialogs/ConfirmDialog.svelte
@@ -20,16 +20,18 @@
         <slot name='title'></slot> {title}
     </Titlebar>
     <slot></slot>
-    <div class="row">
-        <button data-target={target} 
-            on:click|stopPropagation={() => dispatch('closed', true)}>
-            { $t('dialog.confirm') }
-        </button>
-        <button data-target={target} 
-            on:click|stopPropagation={() => dispatch('closed', false)}>
-            { $t('dialog.decline') }
-        </button>
-    </div>
+    <slot name='footer'>
+        <div class="row">
+            <button data-target={target} 
+                on:click|stopPropagation={() => dispatch('closed', true)}>
+                { $t('dialog.confirm') }
+            </button>
+            <button data-target={target} 
+                on:click|stopPropagation={() => dispatch('closed', false)}>
+                { $t('dialog.decline') }
+            </button>
+        </div>
+    </slot>
 </div>
 {#if size == 'auto'}
 <div class='backdrop'></div>
@@ -46,13 +48,13 @@
     width: auto;
     height: auto;
     z-index: 121;
-    background-color: var(--primback);
 }
 
 div.dialog {
     min-width: 22.5em;
     max-width: 100vw;
     max-height: 100vh;
+    background-color: white;
 }
 
 div.full {

diff --git a/src/components/ui/PostDetails.svelte b/src/components/ui/PostDetails.svelte
@@ -1,44 +1,73 @@
 <script lang="ts">
     import { t } from 'svelte-i18n';
-    import { slide } from 'svelte/transition';
+    import ConfirmDialog from '../dialogs/ConfirmDialog.svelte';
     import { logPageView } from '../../store/notification.store';
-    import type { PostContent } from '../../model/post.model';
+    import type { Content } from '../../model/post.model';
     import { marked } from 'marked';
     
     export let title: string;
     export let excerpt: string;
-    export let content: PostContent[] = [];
-    export let collapsed = true;
+    export let content: Content[] = [];
+    export let visible = false;
     export let showMore = true;
 
     const options = { mangle: false, headerIds: false };
 
-    function toggle() {
-        collapsed = !collapsed;
-        if (!collapsed) {            
-            logPageView({ page: 'blog', title });
-        }
+    function show() {
+        visible = true;
+        logPageView({ page: 'blog', title });
+    }
+
+    function hide() {
+        visible = false;
     }
 </script>
 
 <h2>{title}</h2>
 
-{#if collapsed}
-<summary in:slide={{ duration: 200 }} out:slide={{ duration: 200 }}>
+<summary>
     <span class="content">{excerpt}</span>
     {#if showMore}
-        <button class="more" on:click|preventDefault={toggle}>{ $t('blog.more') }</button>
+        <button class="more" on:click|preventDefault={show}>{ $t('blog.more') }</button>
     {/if}
 </summary>
-{:else}
-<div in:slide={{ duration: 200 }} out:slide={{ duration: 200 }} >
+
+{#if visible}
+<ConfirmDialog size="full" on:closed={hide}>
+    <svelte:fragment slot="title">
+        <i class="bx bx-detail"></i> {title} 
+    </svelte:fragment>
+
+    <section>
     {#each content as entry}
-        <span class="content">{@html marked(entry.value, options)}</span>
+        {#if entry.type === 'youtube'}
+        <iframe loading="lazy" src="https://www.youtube.com/embed/{entry.value.id}" title={entry.value.title ?? ''}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            allowfullscreen width="560" height="315" frameborder="0"></iframe>
+            <br />
+        {:else if entry.type === 'quote'}
+        <blockquote>
+            {entry.value.text}
+            <cite>{entry.value.cite}</cite>
+        </blockquote>
+        {:else if entry.type === 'images'}
+            {#each entry.value as src}
+                <img {src} alt={src.split('/')?.at(-1)}/>
+            {/each}
+        {:else}
+        <p class="content">{@html marked(`${entry.value}`, options)}</p>
+        {/if}
     {/each}
-    <div>
-        <button class="more" on:click|preventDefault={toggle}>{ $t('blog.less') }</button>
-    </div> 
-</div>
+    </section>
+
+    <svelte:fragment slot="footer">
+        <div class="row">
+            <button on:click|preventDefault={hide}>
+                { $t('blog.back') }
+            </button>
+        </div>
+    </svelte:fragment>
+</ConfirmDialog>
 {/if}
 
 <style lang="scss">
@@ -47,6 +76,13 @@
         transition: all .2s ease-in-out;
     }
 
+    section {
+        padding: 1em 5%;
+        height: 100%;
+        
+        overflow-y: auto; 
+    }
+
     button.more {
         padding: 0;
         border: 0;

diff --git a/src/data/lang/de.json b/src/data/lang/de.json
@@ -143,7 +143,8 @@
   "blog": {
     "title": "Alles über das Musizieren",
     "less": "...weniger",
-    "more": "mehr..."
+    "more": "mehr...",
+    "back": "Zurück"
   },
   "notfound": {
     "title": "Nicht gefunden",

diff --git a/src/data/lang/en.json b/src/data/lang/en.json
@@ -143,7 +143,8 @@
   "blog": {
     "title": "Everthing about making music",
     "more": "more...",
-    "less": "...lesser"
+    "less": "...lesser",
+    "back": "Back"
   },
   "notfound": {
     "title": "Not found",

diff --git a/src/model/post.model.ts b/src/model/post.model.ts
@@ -3,7 +3,7 @@ export interface Post {
     title: string;
     excerpt: string;
     images: PostImage[];
-    content: PostContent[];
+    content: Content[];
     tags: string[];
     status: 'published' | 'draft';
     publish_date: Date;
@@ -16,7 +16,30 @@ interface PostImage {
     value: string;
 }
 
-export interface PostContent {
-    type: 'text' | 'quote' | 'youtube' | 'images';
+export type Content = MarkupContent | QuoteContent | YouTubeContent | ImagesContent;
+
+interface MarkupContent {
+    type: 'text';
     value: string;
+}
+
+interface QuoteContent {
+    type: 'quote';
+    value: {
+        text: string;
+        cite: string;
+    };
+}
+
+interface YouTubeContent {
+    type: 'youtube';
+    value: {
+        id: string;
+        title: string;
+    };
+}
+
+interface ImagesContent {
+    type: 'images';
+    value: string[];
 }
diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -234,6 +234,24 @@ a.label:hover {
     background-color: white;
 }
 
+blockquote {
+  background-color: var(--primback);
+  font-size: 14pt;
+  margin: 30px 0;
+  padding: 30px 30px 30px 40px;
+  position: relative;
+  font-style: normal;
+  border-left: 3px solid var(--primary);
+
+  cite {
+      color: gray;
+      text-transform: uppercase;
+      font-size: 10pt;
+      font-style: normal;
+      letter-spacing: 1px;
+  }
+}
+
 div.autocomplete {
   .input-container {
     width: 16em;