From 7052ade2ab378a8d13ee10c6cef0a29892f009f1 Mon Sep 17 00:00:00 2001 From: dtomlinson Date: Sat, 4 Apr 2020 01:14:39 +0100 Subject: [PATCH] adding latest --- firebase.md | 166 ++++++++++++++++++++++++++++++++++ package.json | 2 + src/App.vue | 10 +- src/components/LoginFull.vue | 1 - src/main.js | 8 ++ src/views/Triangle.vue | 33 ++++--- src/views/forms/LoginForm.vue | 84 ++++++++++------- yarn.lock | 29 ++++++ 8 files changed, 281 insertions(+), 52 deletions(-) diff --git a/firebase.md b/firebase.md index 761ced1..97a49aa 100644 --- a/firebase.md +++ b/firebase.md @@ -754,3 +754,169 @@ The following is a codepen showing how you can dynamically populate a hint to sh ### Designs Dual image: +background-image: linear-gradient( 109.6deg, rgba(113,14,51,0.83) 15.2%, rgba(217,43,23,0.95) 96.8% ); + +## Animations + +### Router Animations + + + +`yarn add vue-page-transition` + +```javascript +import VuePageTransition from "vue-page-transition"; +Vue.use(VuePageTransition); +``` + +You should wrap the ``: + +```html + + + +``` + +A list of all transitions is here: + +### Animate on scroll + +You can use vue transitions or you can use a helper library. + + can be used to quickly apply animations on scroll. + +To use install with yarn: +`yarn add aos@next` + +Then, in `main.js` add: + +```javascript +import AOS from "aos"; +import "aos/dist/aos.css"; +``` + +And then add to the Vue instance the `AOS.init`: + +```javascript +new Vue({ + created() { + AOS.init(); + }, + router, + store, + vuetify, + render: h => h(App) +}).$mount("#app"); +``` + +You can then in any component add any of the animations from the documentation: +`data-aos="zoom-in"` + +To use with nuxt install as a plugin: + + +## Alternative to fill-height + +Using `fill-height` prop on a `` can result in a bug where the width of the container doesn't reach all the way to the right hand side. + +An alternative is to use `d-flex` on the ``: + +```html + +``` + +document usign align with viewport +set a default which applies to all, set the one you want to apply for upwards + +document setting a default cols (check this with triangle) + +## CSS Spacing + + + +You can use the helper classes `pa-10` to control padding/margins. + +You can also viewport widths in these too: +`pb-xs-10 pr-sm-10` + +When wanting to use a default value and only apply another one on a certain viewport: + +`class="d-flex justify-sm-end justify-center pb-10 pb-sm-0 pr-sm-10"` + +This will set a padding on the bottom of 10 for xs and then 0 for anything higher. + +## Dynamically Apply Classes + + + +### Apply classes based on viewport + +You can use the breakpoint variables: + + +In javascript to determine what the breakpoint/size/dimension etc is. You should prepend: +`$vuetify.breakpoint` +before each breakpoint service object. + +You can also use a neat javascript check with `switch` and `case` to create a computed variable: + +```javascript +computed: { + imageHeight () { + switch (this.$vuetify.breakpoint.name) { + case 'xs': return '220px' + case 'sm': return '400px' + case 'md': return '500px' + case 'lg': return '600px' + case 'xl': return '800px' + } + }, +} +``` + +Alternatively, you can create a normal computed variable and reference it in your props: + +```javascript +computed: { + isXSmall() { + return this.$vuetify.breakpoint.xsOnly; + } +} +``` + +You can then dynamically set classes with the `:class` prop: + +```html +
+``` + +You can use both `class` and the prop `:class` together. You can use different methods to do this, here we used an array, but you can also use a javascript object. + + +A cleaner way to do this is to use computed properties exclusively, either returning a single value, or an array as above: + +```javascript +computed: { + alignOnViewport() { + return this.$vuetify.breakpoint.xsOnly + ? "text-align-center" + : "text-align-right"; + } +} +``` + +Using the `:class` prop: + +```html +
+``` diff --git a/package.json b/package.json index 451d55c..174fa21 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,11 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "aos": "^3.0.0-beta.6", "core-js": "^3.6.4", "mime-types": "^2.1.26", "vue": "^2.6.11", + "vue-page-transition": "^0.2.2", "vue-responsive-video-background-player": "^1.0.8", "vue-router": "^3.1.5", "vuetify": "^2.2.11", diff --git a/src/App.vue b/src/App.vue index 608953d..57b5de4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,9 +3,10 @@ - + + - + @@ -16,12 +17,7 @@ import Appbar from "@/components/Appbar"; export default { name: "App", - components: { Appbar } - - // data: () => { - // video: require("./assets/videos/optical.mp4") - // } }; diff --git a/src/components/LoginFull.vue b/src/components/LoginFull.vue index a831382..1defc6c 100644 --- a/src/components/LoginFull.vue +++ b/src/components/LoginFull.vue @@ -4,7 +4,6 @@ style=" height: 100vh;" overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)" > - diff --git a/src/main.js b/src/main.js index 3091d92..f2e8c01 100644 --- a/src/main.js +++ b/src/main.js @@ -4,11 +4,19 @@ import router from "./router"; import store from "./store"; import vuetify from "./plugins/vuetify"; import VideoBackground from "vue-responsive-video-background-player"; +import VuePageTransition from "vue-page-transition"; +import AOS from "aos"; +import "aos/dist/aos.css"; Vue.config.productionTip = false; Vue.component("video-background", VideoBackground); +Vue.use(VuePageTransition); + new Vue({ + created() { + AOS.init(); + }, router, store, vuetify, diff --git a/src/views/Triangle.vue b/src/views/Triangle.vue index 3d4e659..04123cf 100644 --- a/src/views/Triangle.vue +++ b/src/views/Triangle.vue @@ -10,7 +10,7 @@ Welcome to Savvy Firebox Tutorial - - + + Learn more - + + + - + See more @@ -77,12 +81,19 @@ +