[build] added animations

dhonus · May 12, 2023 · 49430fa · 49430fa
1 parent daea1db
commit 49430fa
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 54 deletions.
diff --git a/src/lib/Home.svelte b/src/lib/Home.svelte
@@ -185,8 +185,8 @@
     postDate = value.pub_date;
     postLink = value.link;
     postAuthor = value.author;
-    if (postAuthor == undefined) postAuthor = value.dublin_core_ext.creators[0];
-    if (postAuthor == undefined) postAuthor = value.dublin_core.publisher;
+    if (postAuthor == undefined && value.dublin_core_ext != null) postAuthor = value.dublin_core_ext.creators[0];
+    if (postAuthor == undefined && value.dublin_core != null) postAuthor = value.dublin_core.publisher;
     if (postAuthor == undefined) postAuthor = "";
 
     //readBuffer.push(value.guid.value);
@@ -317,39 +317,42 @@
     id="center"
   >
     {#if currentFeed.title !== ""}
-      <div class="meta-head">
-        <b>{currentFeed.title}</b>
-        {currentFeed.description}
-      </div>
-      <div class="meta-control">
-        <span>
-          <button
-            class="update"
-            on:click={updateFeed(currentFeed.filename)}
-            title="Update feed"
-          >
-            <img src="/iconmonstr-refresh-lined.svg" alt="refresh" />
-            <p>Update</p>
-          </button>
+      {#key currentFeed}
+        <div transition=fadeIn class="meta-head">
+          <b>{currentFeed.title}</b>
+          {currentFeed.description}
+        </div>
+        <div transition=fadeIn class="meta-control">
+          <span>
+            <button
+              class="update"
+              on:click={updateFeed(currentFeed.filename)}
+              title="Update feed"
+            >
+              <img src="/iconmonstr-refresh-lined.svg" alt="refresh" />
+              <p>Update</p>
+            </button>
+            <button
+              class="update"
+              on:click={readFeed(currentFeed.filename)}
+              title="Mark all as read"
+            >
+              <img src="/iconmonstr-eye-check-lined.svg" alt="mark read" />
+            </button>
+          </span>
           <button
             class="update"
-            on:click={readFeed(currentFeed.filename)}
-            title="Mark all as read"
+            on:click={deleteFeed(currentFeed.filename)}
+            title="Delete feed"
           >
-            <img src="/iconmonstr-eye-check-lined.svg" alt="mark read" />
+            <img src="/iconmonstr-trash-can-28.svg" alt="delete" />
           </button>
-        </span>
-        <button
-          class="update"
-          on:click={deleteFeed(currentFeed.filename)}
-          title="Delete feed"
-        >
-          <img src="/iconmonstr-trash-can-28.svg" alt="delete" />
-        </button>
-      </div>
+        </div>
+      {/key}
     {/if}
     {#each Object.entries(feedBody) as [key, value]}
-      <div
+    {#key value}
+      <div transition=fadeIn
         on:click={(event) => renderPost(event, value)}
         class={value.guid.value === __guid__ ? "entry active" : "entry"}
       >
@@ -361,35 +364,38 @@
         </div>
         {value.title}
       </div>
+      {/key}
     {/each}
     <div class="end">All caught up!</div>
   </div>
-  <div
-    bind:this={y_scroll}
-    id="right"
-    class={vim && selected_column === "right"
-      ? "right selected_column"
-      : "right"}
-  >
-    <article>
-      {#if postDate !== ""}
-        <div class="meta">
-          <p>{postDate}</p>
-          <div class="visit">
-            <a href={postLink} title="Visit the original site" target={browser ? "_blank" : ""}>
-              <img src="/iconmonstr-globe-3.svg" class="globe" alt="globe" />
-            </a>
+    <div
+      bind:this={y_scroll}
+      id="right"
+      class={vim && selected_column === "right"
+        ? "right selected_column"
+        : "right"}
+    >
+    {#key postBody}
+      <article transition=fadeIn>
+        {#if postDate !== ""}
+          <div class="meta">
+            <p>{postDate}</p>
+            <div class="visit">
+              <a href={postLink} title="Visit the original site" target={browser ? "_blank" : ""}>
+                <img src="/iconmonstr-globe-3.svg" class="globe" alt="globe" />
+              </a>
+            </div>
           </div>
-        </div>
-      {/if}
-      {#if postAuthor !== "" && postAuthor !== null && postAuthor !== undefined}
-          <div class="author"><span>by </span>{postAuthor}</div>
-      {/if}
-      {#if postTitle !== ""}
-        <h2 class="title">{postTitle}</h2>
-      {/if}
-      {@html postBody}
-    </article>
+        {/if}
+        {#if postAuthor !== "" && postAuthor !== null && postAuthor !== undefined}
+            <div class="author"><span>by </span>{postAuthor}</div>
+        {/if}
+        {#if postTitle !== ""}
+          <h2 class="title">{postTitle}</h2>
+        {/if}
+        {@html postBody}
+      </article>
+    {/key}
   </div>
 </div>
 

diff --git a/src/style.sass b/src/style.sass
@@ -196,6 +196,11 @@ div.layout
       border: 1px solid transparent
       //border-bottom: 1px solid $border-color
       //border-left: 2px solid transparent
+      // add fade in animation
+      -webkit-animation: fadein .2s
+      animation: fadein .2s
+      animation-iteration-count: 1
+      animation-duration: .2s
       &.active
         background: #2f2f2f
         border: 1px solid $border-color
@@ -234,6 +239,9 @@ div.layout
       border-radius: 7px 7px 0 0
       border: 1px solid $border-color
       word-wrap: break-word
+      animation-duration: .2s
+      animation: fadein .2s
+      -webkit-animation: fadein .2s
     div.meta-control
       display: flex
       flex-direction: row
@@ -245,6 +253,9 @@ div.layout
       border-radius: 0 0 7px 7px
       border: 1px solid $border-color
       border-top: 0px
+      animation-duration: .2s
+      animation: fadein .2s
+      -webkit-animation: fadein .2s
       span
         display: flex
         flex-direction: row
@@ -287,6 +298,8 @@ div.layout
       width: 92%
       margin: auto
       display: block
+      animation: fadein .1s
+      -webkit-animation: fadein .1s
       p
         line-height: 1.4rem
         font-size: 1rem
@@ -375,3 +388,16 @@ main.container div.right::-webkit-scrollbar
 @media screen and (min-width: 2000px)
   div.layout div.right
     padding: 0 10%
+
+
+@keyframes fadein 
+  from
+    border-radius: 0
+  to
+    border-radius: 1
+
+@-webkit-keyframes fadein
+  from
+    opacity: 0
+  to 
+    opacity: 1