started data uri parsing with dichroism

5 files changed, 60 insertions, 44 deletions

diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index 81a549c..a586f83 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -2,7 +2,13 @@
   <div id="app">
     <Navbar></Navbar>
     <BusyBar></BusyBar>
-    <router-view />
+    <transition
+      mode="out-in"
+      enter-active-class="animate__animated animate__fadeInRight animate__faster"
+      leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
+    >
+      <router-view />
+    </transition>
     <Footer></Footer>
   </div>
 </template>
@@ -24,5 +30,4 @@ export default {
 
 <style lang="scss">
 @use "../node_modules/bulma/bulma.sass";
-@use "../node_modules/animate.css/animate.min.css";
 </style>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index c4e9c35..0a66fa8 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -29,34 +29,44 @@
           </router-link>
         </div>
 
-        <div class="navbar-end" v-if="routeName == 'Administration'">
-          <div class="navbar-item">
-            <NewProduct></NewProduct>
-          </div>
-        </div>
-        <div class="navbar-end" v-else>
+        <transition
+          mode="out-in"
+          enter-active-class="animate__animated animate__flipInX"
+          leave-active-class="animate__animated animate__flipOutX"
+        >
           <div
-            class="navbar-item has-dropdown is-active"
-            v-for="category in categories.keys()"
-            :key="category"
+            class="navbar-end"
+            v-if="routeName == 'Administration'"
+            key="newProduct"
           >
-            <div class="navbar-link">
-              {{ category }}
+            <div class="navbar-item">
+              <NewProduct></NewProduct>
             </div>
-
+          </div>
+          <div class="navbar-end" v-else key="cartCheckout">
             <div
-              class="navbar-dropdown"
-              v-for="subcategory in categories.get(category)"
-              :key="subcategory"
+              class="navbar-item has-dropdown is-active"
+              v-for="category in categories.keys()"
+              :key="category"
             >
-              {{ subcategory }}
+              <div class="navbar-link">
+                {{ category }}
+              </div>
+
+              <div
+                class="navbar-dropdown"
+                v-for="subcategory in categories.get(category)"
+                :key="subcategory"
+              >
+                {{ subcategory }}
+              </div>
             </div>
-          </div>
 
-          <div class="navbar-item">
-            <CartCheckout></CartCheckout>
+            <div class="navbar-item">
+              <CartCheckout></CartCheckout>
+            </div>
           </div>
-        </div>
+        </transition>
       </div>
     </nav>
   </div>
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
index 1cc43cd..8c45f0b 100644
--- a/iridescence/src/components/admin/NewProduct.vue
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -3,20 +3,15 @@
     <button class="button is-primary" @click="toggleModal">
       + Add New
     </button>
-    <div class="modal is-active" v-if="modalEnabled">
-      <transition
-        name="modalTransition"
-        enter-active-class="animate__animated animate__animate__fadeIn animate__faster"
-        leave-active-class="animate__animated animate__animate__fadeOut animate__faster"
-      >
-        <div class="modal-background" v-if="modalEnabled"></div>
-      </transition>
-      <transition
-        name="cardTransition"
-        enter-active-class="animate__animated animate__fadeInDownBig animate__faster"
-        leave-active-class="animate__animated animate__animate__fadeOut animate__faster"
-      >
-        <div class="modal-card" v-if="modalEnabled">
+    <transition
+      enter-active-class="animate__animated animate__fadeIn animate__faster"
+      leave-active-class="animate__animated animate__fadeOut animate__faster"
+    >
+      <div class="modal is-active" v-if="modalEnabled">
+        <div class="modal-background"></div>
+        <div
+          class="modal-card animate__animated animate__slideInDown animate__faster"
+        >
           <header class="modal-card-head">
             <p class="modal-card-title">Add a new product</p>
             <button class="delete" @click="toggleModal"></button>
@@ -26,8 +21,8 @@
           </section>
           <footer class="modal-card-foot"></footer>
         </div>
-      </transition>
-    </div>
+      </div>
+    </transition>
   </div>
 </template>
 
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index eb4958d..8d1eb3d 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -102,13 +102,18 @@
           >{{ fileProgress }}%</progress
         >
       </div>
-      <div class="card-footer">
-        <div class="card-footer-item" v-if="isDifferent && isValid">
-          <button class="button is-primary is-fullwidth" @click="saveProduct">
-            Save
-          </button>
+      <transition
+        enter-active-class="animate__animated animate__fadeIn"
+        leave-active-class="animate__animated animate__fadeOut"
+      >
+        <div class="card-footer" v-if="isDifferent && isValid">
+          <div class="card-footer-item">
+            <button class="button is-primary is-fullwidth" @click="saveProduct">
+              Save
+            </button>
+          </div>
         </div>
-      </div>
+      </transition>
     </div>
   </div>
 </template>
diff --git a/iridescence/src/main.js b/iridescence/src/main.js
index 3a47006..62e6485 100644
--- a/iridescence/src/main.js
+++ b/iridescence/src/main.js
@@ -2,6 +2,7 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import "animate.css";
 
 Vue.config.productionTip = false;