From 695162c43baf755e0872c8ad608f7c5b8dad79e8 Mon Sep 17 00:00:00 2001
From: Bobby <bobby@fiery.me>
Date: Sat, 8 Oct 2022 18:12:15 +0700
Subject: [PATCH] feat: use fade-in css class where applicable

---
 src/css/home.scss   | 17 ++++-------------
 views/dashboard.njk |  2 +-
 views/home.njk      |  4 ++--
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/css/home.scss b/src/css/home.scss
index d2bba30..2656f81 100644
--- a/src/css/home.scss
+++ b/src/css/home.scss
@@ -9,8 +9,7 @@
   border-radius: 100%;
   display: inline-block;
   margin-bottom: 40px;
-  vertical-align: top;
-  animation: fade-in-opacity 0.5s
+  vertical-align: top
 }
 
 .logo {
@@ -59,7 +58,6 @@
   }
 
   > div {
-    animation: fade-in-opacity 0.5s;
     margin: 0.75rem !important;
 
     &:first-child {
@@ -106,19 +104,14 @@
   margin-top: 5px
 }
 
-#albumDiv {
-  animation: fade-in-opacity 0.5s;
-
-  .control {
-    text-align: inherit
-  }
+#albumDiv .control {
+  text-align: inherit
 }
 
 #linksColumn {
   margin-top: -0.25rem;
   margin-left: -0.25rem;
   margin-right: -0.25rem;
-  animation: fade-in-opacity 0.5s;
 
   .column {
     padding: 0.25rem
@@ -141,11 +134,9 @@
 
 #tabs {
   margin-bottom: 1rem;
-  animation: fade-in-opacity 0.5s;
 
   .tab-content {
-    margin-bottom: -0.75rem;
-    animation: fade-in-opacity 0.5s
+    margin-bottom: -0.75rem
   }
 }
 
diff --git a/views/dashboard.njk b/views/dashboard.njk
index 127b1d3..8f75a5d 100644
--- a/views/dashboard.njk
+++ b/views/dashboard.njk
@@ -35,7 +35,7 @@
 
 {% block content %}
 {{ super() }}
-<section id="dashboard" class="section is-hidden">
+<section id="dashboard" class="section is-hidden anim-fade-in">
   <div id="panel" class="container">
     <h1 class="title">
       Dashboard
diff --git a/views/home.njk b/views/home.njk
index b9f5f67..221e56d 100644
--- a/views/home.njk
+++ b/views/home.njk
@@ -68,7 +68,7 @@
         <div class="column is-hidden-mobile"></div>
         <div class="column">
           <a id="loginToUpload" class="button is-danger is-outlined is-fullwidth is-loading is-wrappable"></a>
-          <div id="albumDiv" class="field has-addons is-hidden">
+          <div id="albumDiv" class="field has-addons is-hidden anim-fade-in">
             <div class="control is-expanded">
               <div class="select is-fullwidth">
                 <select id="albumSelect">
@@ -157,7 +157,7 @@
       </div>
 
       <div id="tpl" class="is-hidden">
-        <div class="field">
+        <div class="field anim-fade-in">
           <i class="icon is-hidden"></i>
           <img class="is-unselectable is-hidden">
           <p class="name"></p>