summaryrefslogtreecommitdiff
path: root/iridescence/src
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src')
-rw-r--r--iridescence/src/App.vue9
-rw-r--r--iridescence/src/components/Navbar.vue50
-rw-r--r--iridescence/src/components/admin/NewProduct.vue27
-rw-r--r--iridescence/src/components/admin/ProductEditCard.vue17
-rw-r--r--iridescence/src/main.js1
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;