web-development/savvy-firebase
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest

Browse Source
This commit is contained in:
dtomlinson
2020-04-04 01:14:39 +01:00
parent 5ad6a640e7
commit 7052ade2ab
8 changed files with 281 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
firebase.md
View File

@@ -754,3 +754,169 @@ The following is a codepen showing how you can dynamically populate a hint to sh
### Designs ### Designs
Dual image: <https://codepen.io/eddyerburgh/pen/EPYVVX> Dual image: <https://codepen.io/eddyerburgh/pen/EPYVVX>
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
<https://github.com/Orlandster/vue-page-transition>
`yarn add vue-page-transition`
```javascript
import VuePageTransition from "vue-page-transition";
Vue.use(VuePageTransition);
```
You should wrap the `<router-view>`:
```html
<vue-page-transition name="fade-in-right">
<router-view />
</vue-page-transition>
```
A list of all transitions is here: <https://orlandster.github.io/vue-page-transition/#/>
### Animate on scroll
You can use vue transitions or you can use a helper library.
<https://michalsnik.github.io/aos/> 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:
<https://www.yasminzy.com/nuxt/aos.html#steps>
## Alternative to fill-height
Using `fill-height` prop on a `<v-container>` 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 `<v-container>`:
```html
<v-container
fluid
class="d-flex align-center"
style="height: 100vh;"
></v-container>
```
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
<https://vuetifyjs.com/en/styles/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
<https://michaelnthiessen.com/dynamically-add-class-name/>
### Apply classes based on viewport
You can use the breakpoint variables:
<https://vuetifyjs.com/en/customization/breakpoints/#breakpoint-service-object>
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
<div
class="d-flex flex-column align-sm-end align-center justify-center"
:class="[isXSmall ? 'text-align-center' : 'text-align-right']"
></div>
```
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.
<https://michaelnthiessen.com/dynamically-add-class-name/>
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
<div
class="d-flex flex-column align-sm-end align-center justify-center"
:class="alignOnViewport"
></div>
```

2
package.json
View File

@@ -8,9 +8,11 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"aos": "^3.0.0-beta.6",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"mime-types": "^2.1.26", "mime-types": "^2.1.26",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-page-transition": "^0.2.2",
"vue-responsive-video-background-player": "^1.0.8", "vue-responsive-video-background-player": "^1.0.8",
"vue-router": "^3.1.5", "vue-router": "^3.1.5",
"vuetify": "^2.2.11", "vuetify": "^2.2.11",

10
src/App.vue
View File

@@ -3,9 +3,10 @@
<v-app :style="{ background: $vuetify.theme.themes.light.background }"> <v-app :style="{ background: $vuetify.theme.themes.light.background }">
<v-content> <v-content>
<Appbar></Appbar> <Appbar></Appbar>
<transition name="slide"> <!-- <vue-page-transition name="fade-in-right"> -->
<vue-page-transition name="fade">
<router-view></router-view> <router-view></router-view>
</transition> </vue-page-transition>
<v-row> </v-row> <v-row> </v-row>
</v-content> </v-content>
</v-app> </v-app>
@@ -16,12 +17,7 @@
import Appbar from "@/components/Appbar"; import Appbar from "@/components/Appbar";
export default { export default {
name: "App", name: "App",
components: { Appbar } components: { Appbar }
// data: () => {
// video: require("./assets/videos/optical.mp4")
// }
}; };
</script> </script>

1
src/components/LoginFull.vue
View File

@@ -4,7 +4,6 @@
style=" height: 100vh;" style=" height: 100vh;"
overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)" overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
> >
<!-- <LoginForm class="hidden-xs-only"></LoginForm> -->
<LoginForm class=""></LoginForm> <LoginForm class=""></LoginForm>
</video-background> </video-background>
</template> </template>

8
src/main.js
View File

@@ -4,11 +4,19 @@ import router from "./router";
import store from "./store"; import store from "./store";
import vuetify from "./plugins/vuetify"; import vuetify from "./plugins/vuetify";
import VideoBackground from "vue-responsive-video-background-player"; 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.config.productionTip = false;
Vue.component("video-background", VideoBackground); Vue.component("video-background", VideoBackground);
Vue.use(VuePageTransition);
new Vue({ new Vue({
created() {
AOS.init();
},
router, router,
store, store,
vuetify, vuetify,

33
src/views/Triangle.vue
View File

@@ -10,7 +10,7 @@
Welcome to Savvy Firebox Tutorial Welcome to Savvy Firebox Tutorial
</h1> </h1>
<v-btn <v-btn
xlarge x-large
color="primary" color="primary"
style="position: relative; z-index: 10;" style="position: relative; z-index: 10;"
class="lighten-1" class="lighten-1"
@@ -20,23 +20,26 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row> <v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
<v-row class="d-flex justify-space-around" style="position: relative;"> <v-row class="d-flex justify-space-around">
<v-col class="d-flex justify-center" cols="4"> <v-col class="d-flex justify-center" md="6" xs="12">
<v-card <v-card
flat flat
color="rgb(0, 0, 0, 0)" color="rgb(0, 0, 0, 0)"
class="d-flex align-center justify-center flex-column pa-6" class="d-flex align-center justify-center flex-column pa-6"
data-aos="zoom-in"
> >
<v-card-title> <v-card-title>
<span class="display-2 font-weight-bold">Learn more</span> <span class="display-2 font-weight-bold">Learn more</span>
</v-card-title> </v-card-title>
<v-card-text class="d-flex justify-center flex-column align-center"> <v-card-text class="d-flex justify-center flex-column align-center">
<v-img <transition name="bounce">
src="@/assets/images/11-Casino chip.png" <v-img
max-height="150px" src="@/assets/images/11-Casino chip.png"
max-width="150px" max-height="150px"
class="mb-5" max-width="150px"
></v-img> class="mb-5"
></v-img>
</transition>
<span <span
class="d-flex justify-center display body-1" class="d-flex justify-center display body-1"
style="color: black;" style="color: black;"
@@ -49,11 +52,12 @@
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
<v-col class="d-flex justify-center" cols="4"> <v-col class="d-flex justify-center" md="6" xs="12">
<v-card <v-card
flat flat
color="rgb(0, 0, 0, 0)" color="rgb(0, 0, 0, 0)"
class="d-flex align-center justify-center flex-column pa-6" class="d-flex align-center justify-center flex-column pa-6"
data-aos="zoom-in"
> >
<v-card-title> <v-card-title>
<span class="display-2 font-weight-bold">See more</span> <span class="display-2 font-weight-bold">See more</span>
@@ -77,12 +81,19 @@
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
<!-- <v-col md="1" xs="0"></v-col> -->
</v-row> </v-row>
</v-container> </v-container>
</template> </template>
<script> <script>
export default {}; export default {
data() {
return {
animate: false
};
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

84
src/views/forms/LoginForm.vue
View File

@@ -1,41 +1,47 @@
<template> <template>
<v-container fill-height fluid> <v-container fluid class="d-flex align-center" style="height: 100vh;">
<v-row> <v-row>
<v-spacer></v-spacer>
<v-col <v-col
cols="4" sm="6"
cols="12"
align-self="stretch" align-self="stretch"
class="d-flex flex-column justify-space-around align-end" class="d-flex justify-sm-end justify-center pb-10 pb-sm-0 pr-sm-10"
> >
<v-card <div class="d-flex flex-column align-end justify-space-around">
color="rgb(0, 0, 0, 0)" <v-card
flat color="rgb(0, 0, 0, 0)"
class="d-flex align-end flex-column" flat
> class="d-flex align-center justify-center flex-column"
<div class="text-align-right"> width="100%"
<h1 class="whiteText title "> >
Savvy Firebase Tutorial <div
</h1> class="d-flex flex-column align-sm-end align-center justify-center"
<p class="whiteText mb-0 mt-2">Log in or create an account.</p> :class="alignOnViewport"
</div> >
</v-card> <h1 class="whiteText title">
<v-card color="rgb(0, 0, 0, 0)" flat> Savvy Firebase Tutorial
<div class="text-align-right"> </h1>
<p class="whiteText mb-0">Don't have an account? Create one.</p> <p class="whiteText mb-0 mt-2">Log in or create an account.</p>
</div> </div>
</v-card> </v-card>
<v-card color="rgb(0, 0, 0, 0)" flat width="100%">
<div
class="text-align-right d-flex flex-column align-sm-end align-center justify-center"
>
<p class="whiteText mb-0">Don't have an account? Create one.</p>
</div>
</v-card>
</div>
</v-col> </v-col>
<v-col cols="1"></v-col>
<v-col <v-col
xs="5" cols="12"
md="3" sm="6"
align-self="center" class="d-flex justify-sm-start justify-center pl-sm-10"
class="d-flex justify-start flex-column align-start"
> >
<v-card <v-card
color="rgb(0, 0, 0, 0)" color="rgb(0, 0, 0, 0)"
flat flat
class="d-flex align-center flex-column full-width" class="d-flex align-center flex-column"
> >
<v-icon color="white" size="3em" class="pb-4" <v-icon color="white" size="3em" class="pb-4"
>mdi-account-circle</v-icon >mdi-account-circle</v-icon
@@ -43,7 +49,7 @@
<v-form <v-form
v-model="valid" v-model="valid"
ref="form" ref="form"
class="pt-4 d-flex flex-column align-center full-width" class="pt-4 d-flex flex-column align-center justify-start"
> >
<v-text-field <v-text-field
v-for="field in formFields" v-for="field in formFields"
@@ -57,7 +63,7 @@
class="white-placeholder full-width" class="white-placeholder full-width"
v-model="field.value" v-model="field.value"
:rules="field.rules" :rules="field.rules"
:placeholder="field.placeholder" :label="field.placeholder"
:success="!!field.value" :success="!!field.value"
@click:append="field.showIconData = !field.showIconData" @click:append="field.showIconData = !field.showIconData"
> >
@@ -104,7 +110,6 @@
<p class="whiteText mb-0 pt-5">Forgot password?</p> <p class="whiteText mb-0 pt-5">Forgot password?</p>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="0" md="3"></v-col>
</v-row> </v-row>
</v-container> </v-container>
</template> </template>
@@ -151,15 +156,20 @@ export default {
this.load = !this.load; this.load = !this.load;
console.log("loading"); console.log("loading");
if (this.$refs.form.validate()) { if (this.$refs.form.validate()) {
console.log("Success"); console.log(`Email: ${this.formFields[0].value}`);
console.log(`Password: ${this.formFields[1].value}`);
} else { } else {
console.log("Not valid"); console.log("Not valid");
this.load = !this.load; this.load = !this.load;
} }
} }
}, },
showPassword() { computed: {
// alignOnViewport() {
return this.$vuetify.breakpoint.xsOnly
? "text-align-center"
: "text-align-right";
}
} }
}; };
</script> </script>
@@ -171,6 +181,10 @@ export default {
color: white; color: white;
} }
.red-text {
color: red;
}
.full-width { .full-width {
width: 100%; width: 100%;
} }
@@ -179,6 +193,10 @@ export default {
text-align: right; text-align: right;
} }
.text-align-center {
text-align: center;
}
.title { .title {
font-size: 2rem !important; font-size: 2rem !important;
} }

29
yarn.lock
View File

@@ -1445,6 +1445,15 @@ anymatch@~3.1.1:
normalize-path "^3.0.0" normalize-path "^3.0.0"
picomatch "^2.0.4" picomatch "^2.0.4"
aos@^3.0.0-beta.6:
version "3.0.0-beta.6"
resolved "https://registry.yarnpkg.com/aos/-/aos-3.0.0-beta.6.tgz#75148e3be4bb1add53f5a1828623bf82b67691e9"
integrity sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==
dependencies:
classlist-polyfill "^1.2.0"
lodash.debounce "^4.0.8"
lodash.throttle "^4.1.1"
aproba@^1.1.1: aproba@^1.1.1:
version "1.2.0" version "1.2.0"
resolved "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" resolved "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -2133,6 +2142,11 @@ class-utils@^0.3.5:
isobject "^3.0.0" isobject "^3.0.0"
static-extend "^0.1.1" static-extend "^0.1.1"
classlist-polyfill@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
integrity sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=
clean-css@4.2.x: clean-css@4.2.x:
version "4.2.3" version "4.2.3"
resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78" resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -4914,6 +4928,11 @@ locate-path@^5.0.0:
dependencies: dependencies:
p-locate "^4.1.0" p-locate "^4.1.0"
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
lodash.defaultsdeep@^4.6.1: lodash.defaultsdeep@^4.6.1:
version "4.6.1" version "4.6.1"
resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6" resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
@@ -4934,6 +4953,11 @@ lodash.memoize@^4.1.2:
resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
lodash.transform@^4.6.0: lodash.transform@^4.6.0:
version "4.6.0" version "4.6.0"
resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0" resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -8020,6 +8044,11 @@ vue-loader@^15.8.3:
vue-hot-reload-api "^2.3.0" vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0" vue-style-loader "^4.1.0"
vue-page-transition@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/vue-page-transition/-/vue-page-transition-0.2.2.tgz#a7c607ccc8dc67e7c05e66a5a9d54bd27d252d56"
integrity sha512-qOx+llJ28XX0VwJNJ4GVaeNBPRmPMZac2QQgrIHVUhpXyJx2CQ2XvoQOpGD1ge7QMY3PjZ6fwTbdBwZkA3I9qA==
vue-responsive-video-background-player@^1.0.8: vue-responsive-video-background-player@^1.0.8:
version "1.0.8" version "1.0.8"
resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.0.8.tgz#c0c95b82aa48a13e92f72c6051cc7ec8ff44058d" resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.0.8.tgz#c0c95b82aa48a13e92f72c6051cc7ec8ff44058d"