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
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"
},
"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",

10
src/App.vue
View File

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

1
src/components/LoginFull.vue
View File

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

8
src/main.js
View File

@@ -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,

21
src/views/Triangle.vue
View File

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

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

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

29
yarn.lock
View File

@@ -1445,6 +1445,15 @@ anymatch@~3.1.1:
normalize-path "^3.0.0"
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:
version "1.2.0"
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"
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:
version "4.2.3"
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:
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:
version "4.6.1"
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"
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:
version "4.6.0"
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-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:
version "1.0.8"
resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.0.8.tgz#c0c95b82aa48a13e92f72c6051cc7ec8ff44058d"