diff options
Diffstat (limited to 'iridescence/src')
| -rw-r--r-- | iridescence/src/App.vue | 9 | ||||
| -rw-r--r-- | iridescence/src/components/Navbar.vue | 50 | ||||
| -rw-r--r-- | iridescence/src/components/admin/NewProduct.vue | 27 | ||||
| -rw-r--r-- | iridescence/src/components/admin/ProductEditCard.vue | 17 | ||||
| -rw-r--r-- | iridescence/src/main.js | 1 |
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; |