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-03-24 02:04:43 +00:00
parent 77be707311
commit 44aaddd3bc
17 changed files with 284 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -19,3 +19,6 @@ yarn-error.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
# assets
src/assets/videos*

103
firebase.md
View File

@@ -163,5 +163,106 @@ If you want to apply a fade gradient colour on top of the image, you should use
If you want to just use a gradient (no img), then apply a solid colour image and then use a scoped slot with the gradient you want. If you want to just use a gradient (no img), then apply a solid colour image and then use a scoped slot with the gradient you want.
## Router
To do When linking to routes, you should use `<router-link>`:
```html
<router-link :to="{ name: 'Login' }">
<span class="mr-3">Sign In</span>
</router-link>
```
You can apply transitions on a route change:
```html
<transition name="slide">
<router-view></router-view>
</transition>
```
## vue-responsive-video-background-player
<https://github.com/avidofood/vue-responsive-video-background-player>
yarn add vue-responsive-video-background-player
ffmpeg -an -i Optical\ Fibers\ 1.mov -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 optical.mp4
<https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation>
If using the public folder (not `./assets`) then follow these instructions:
<https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder>
For videos in ./assets do the following:
```javascript
export default {
data() {
return {
video: require("../assets/videos/optical.mp4")
}
},
};
```
and reference it in the component:
```html
<video-background :src="video" style=" height: 100vh;"> </video-background>
```
This is done this way because webpack will apply custom names to the assets - this is so it can handle caching.
You can find full props to customise the video:
<https://github.com/avidofood/vue-responsive-video-background-player#props>
You can set a gradient to the image to improve visibility:
```javascript
style=" height: 100vh;"
overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
```
## Dynamically hide app bar
Use the Vuex store to determine when you want to hide the app bar:
```javascript
state: {
fullScreen: false
},
getters: {
fullScreen: state => {
return state.fullScreen
}
},
mutations: {
fullScreen(state, fullScreen) {
state.fullScreen = fullScreen;
}
},
```
and create the lifecycle actions in the component that houses the appbar:
```javascript
created () {
this.$store.commit("fullScreen", true);
},
beforeDestroy () {
this.$store.commit("fullScreen", false);
},
```
Then you can wrap the appbar in a `v-if`:
```html
<v-app-bar
flat
app
class="hidden-sm-and-down"
color="#EEEEEE"
v-if="!this.$store.getters.fullScreen"
>
```

2
package.json
View File

@@ -9,7 +9,9 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.4", "core-js": "^3.6.4",
"mime-types": "^2.1.26",
"vue": "^2.6.11", "vue": "^2.6.11",
"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",
"vuex": "^3.1.2" "vuex": "^3.1.2"

1
public/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

35
src/App.vue
View File

@@ -1,10 +1,18 @@
<template> <template>
<v-app :style="{ background: $vuetify.theme.themes.light.background }"> <div>
<v-content> <v-app
<Appbar></Appbar> :style="{ background: $vuetify.theme.themes.light.background }"
<router-view></router-view> class="fontColor"
</v-content> >
</v-app> <v-content>
<Appbar></Appbar>
<transition name="slide">
<router-view></router-view>
</transition>
<v-row> </v-row>
</v-content>
</v-app>
</div>
</template> </template>
<script> <script>
@@ -15,7 +23,20 @@ export default {
components: { Appbar }, components: { Appbar },
data: () => ({ data: () => ({
// video: require("./assets/videos/optical.mp4")
}) })
}; };
</script> </script>
<style lang="scss">
#app {
font-family: $gilroy, sans-serif, Arial, Helvetica;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fontColor, .theme--light.v-application, .theme--light.v-sheet {
// color: $mainColor !important;
color: $mainColor !important;
}
</style>

BIN
src/assets/fonts/Gilroy-Bold.otf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Gilroy-Regular.otf Normal file
View File

Binary file not shown.

52
src/components/Appbar.vue
View File

@@ -1,58 +1,43 @@
<template> <template>
<!-- <v-container class="pb-0"> -->
<div> <div>
<v-app-bar flat color="indigo" app class="hidden-md-and-up"> <!-- <v-app-bar flat color="indigo" app class="hidden-md-and-up">
<v-row> <v-row>
<v-col cols="8" class="appTitle d-flex justify-start"> <v-col cols="8" class="d-flex justify-start">
<v-toolbar-title> <v-toolbar-title>
Savvy Firebase Savvy Firebase
</v-toolbar-title> </v-toolbar-title>
</v-col> </v-col>
<v-col cols="4" class="d-flex justify-end"> <v-col cols="4" class="d-flex justify-end">
<v-btn color="primary"> <v-btn color="white">
Sign In Sign In
</v-btn> </v-btn>
</v-col> </v-col>
<!-- <v-col>
<v-btn color="primary">
Register
</v-btn>
</v-col> -->
</v-row> </v-row>
</v-app-bar> </v-app-bar> -->
<!-- <v-app-bar flat app class="hidden-sm-and-down" color="#EEEEEE"> -->
<v-app-bar <v-app-bar
flat flat
app app
class="hidden-sm-and-down" class="hidden-sm-and-down"
src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg" color="#EEEEEE"
v-if="!this.$store.getters.fullScreen"
> >
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
></v-img>
</template>
<v-row> <v-row>
<v-col cols="2"></v-col> <v-col cols="2"></v-col>
<v-col cols="4" class="appTitle d-flex justify-start"> <v-col cols="4" class="d-flex justify-start">
<v-toolbar-title> <v-toolbar-title class="appTitle">
Savvy Firebase Tutorial Savvy Firebase Tutorial
</v-toolbar-title> </v-toolbar-title>
</v-col> </v-col>
<v-col> <v-col cols="4" class="d-flex justify-end align-self-center">
<v-spacer> </v-spacer> <router-link :to="{ name: 'Login' }" class="routerLink">
</v-col> <span class="mr-3">Sign In</span>
<v-col cols="2"> </router-link>
<v-btn color="primary" class="mr-2"> <span class="mr-3">Register</span>
Sign In
</v-btn>
<v-btn color="primary">
Register
</v-btn>
</v-col> </v-col>
<v-col cols="2"></v-col>
</v-row> </v-row>
</v-app-bar> </v-app-bar>
<!-- </v-container> -->
</div> </div>
</template> </template>
@@ -64,6 +49,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.appTitle { .appTitle {
color: white; font-family: $gilroy-bold;
}
.routerLink {
text-decoration: none;
color: $mainColor
} }
</style> </style>

26
src/components/LoginFull.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<video-background
:src="video"
style=" height: 100vh;"
overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
>
</video-background>
</template>
<script>
export default {
data() {
return {
video: require("../assets/videos/optical.mp4")
};
},
created () {
this.$store.commit("fullScreen", true);
},
beforeDestroy () {
this.$store.commit("fullScreen", false);
},
};
</script>
<style lang="scss" scoped></style>

16
src/main.js
View File

@@ -1,14 +1,16 @@
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import router from './router' 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";
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.component("video-background", VideoBackground);
new Vue({ new Vue({
router, router,
store, store,
vuetify, vuetify,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount("#app");

8
src/plugins/vuetify.js
View File

@@ -9,10 +9,10 @@ export default new Vuetify({
iconfont: "mdi" iconfont: "mdi"
}, },
theme: { theme: {
themes: { themes: {
light: { light: {
background: "#EEEEEE" background: "#fff"
}
} }
}
} }
}); });

33
src/router/index.js
View File

@@ -1,29 +1,36 @@
import Vue from 'vue' import Vue from "vue";
import VueRouter from 'vue-router' import VueRouter from "vue-router";
import Home from '../views/Home.vue' import Home from "../views/Home.vue";
Vue.use(VueRouter) Vue.use(VueRouter);
const routes = [ const routes = [
{ {
path: '/', path: "/",
name: 'Home', name: "Home",
component: Home component: Home
}, },
{ {
path: '/about', path: "/about",
name: 'About', name: "About",
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
},
{
path: "/login",
name: "Login",
component: () =>
import(/* webpackChunkName: "login" */ "../components/LoginFull.vue")
} }
] ];
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: "history",
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes routes
}) });
export default router export default router;

27
src/scss/_variables.scss Normal file
View File

@@ -0,0 +1,27 @@
@font-face {
font-family: "Gilroy";
src: url("~@/assets/fonts/Gilroy-Regular.otf") format("opentype");
}
@font-face {
font-family: "Gilroy-bold";
src: url("~@/assets/fonts/Gilroy-Bold.otf") format("opentype");
}
$gilroy: "Gilroy", sans-serif !default;
$gilroy-bold: "Gilroy-bold", sans-serif !default;
@import "../../node_modules/vuetify/src/styles/styles.sass";
$body-font-family: $gilroy;
$heading-font-family: $gilroy;
@import "~vuetify/src/styles/settings/variables";
$body-font-family: $gilroy;
$heading-font-family: $gilroy;
$mainColor: #323947;
.fontColor, .theme--light.v-application, .theme--light.v-sheet {
// color: $mainColor !important;
color: red !important;
}

23
src/store/index.js
View File

@@ -1,15 +1,22 @@
import Vue from 'vue' import Vue from "vue";
import Vuex from 'vuex' import Vuex from "vuex";
Vue.use(Vuex) Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
fullScreen: false
},
getters: {
fullScreen: state => {
return state.fullScreen
}
}, },
mutations: { mutations: {
fullScreen(state, fullScreen) {
state.fullScreen = fullScreen;
}
}, },
actions: { actions: {},
}, modules: {}
modules: { });
}
})

14
src/views/Home.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<v-container> <v-container>
<v-row> <v-row>
<v-col> <v-col>
Hello Hello
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
</template> </template>
<script> <script>

15
vue.config.js
View File

@@ -1,5 +1,12 @@
module.exports = { module.exports = {
"transpileDependencies": [ css: {
"vuetify" loaderOptions: {
] scss: {
} prependData: `
@import "@/scss/_variables.scss";
`
}
}
},
transpileDependencies: ["vuetify"]
};

11
yarn.lock
View File

@@ -5130,10 +5130,10 @@ mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
resolved "https://registry.npm.taobao.org/mime-db/download/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58" resolved "https://registry.npm.taobao.org/mime-db/download/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
integrity sha1-ChLgUCZQ5HPXNVNQUOfI9OtPrlg= integrity sha1-ChLgUCZQ5HPXNVNQUOfI9OtPrlg=
mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24: mime-types@^2.1.12, mime-types@^2.1.26, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
version "2.1.26" version "2.1.26"
resolved "https://registry.npm.taobao.org/mime-types/download/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
integrity sha1-nJIfwJt+FJpl39wNpNIJlyALCgY= integrity sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==
dependencies: dependencies:
mime-db "1.43.0" mime-db "1.43.0"
@@ -8020,6 +8020,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-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"
integrity sha512-jwRrfEIu7Qjzzmuzb+5kzCKc+lKWEgTSm2aZUlhHmm+CjAH7/8fgGQApUWRVY8g9tn6qN0QQijb1ke69eP6YIA==
vue-router@^3.1.5: vue-router@^3.1.5:
version "3.1.6" version "3.1.6"
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1584203224109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89" resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1584203224109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"