diff --git a/.gitignore b/.gitignore index a0dddc6..8563680 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,6 @@ yarn-error.log* *.njsproj *.sln *.sw? + +# assets +src/assets/videos* diff --git a/firebase.md b/firebase.md index 448b186..c8e4a38 100644 --- a/firebase.md +++ b/firebase.md @@ -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. +## Router -To do +When linking to routes, you should use ``: + +```html + + Sign In + +``` + +You can apply transitions on a route change: + +```html + + + +``` + +## 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 + + + +If using the public folder (not `./assets`) then follow these instructions: + + +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 + +``` + +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: + + +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 + +``` diff --git a/package.json b/package.json index 236c5b5..451d55c 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,9 @@ }, "dependencies": { "core-js": "^3.6.4", + "mime-types": "^2.1.26", "vue": "^2.6.11", + "vue-responsive-video-background-player": "^1.0.8", "vue-router": "^3.1.5", "vuetify": "^2.2.11", "vuex": "^3.1.2" diff --git a/public/index.html b/public/index.html index bc51465..fd55472 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,7 @@ + <%= htmlWebpackPlugin.options.title %> diff --git a/src/App.vue b/src/App.vue index 45ec150..4f1f133 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,18 @@ + + diff --git a/src/assets/fonts/Gilroy-Bold.otf b/src/assets/fonts/Gilroy-Bold.otf new file mode 100644 index 0000000..f784820 Binary files /dev/null and b/src/assets/fonts/Gilroy-Bold.otf differ diff --git a/src/assets/fonts/Gilroy-Regular.otf b/src/assets/fonts/Gilroy-Regular.otf new file mode 100644 index 0000000..2056af8 Binary files /dev/null and b/src/assets/fonts/Gilroy-Regular.otf differ diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue index 472c334..17bd44e 100644 --- a/src/components/Appbar.vue +++ b/src/components/Appbar.vue @@ -1,58 +1,43 @@ @@ -64,6 +49,11 @@ export default { diff --git a/src/components/LoginFull.vue b/src/components/LoginFull.vue new file mode 100644 index 0000000..f3036ac --- /dev/null +++ b/src/components/LoginFull.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/main.js b/src/main.js index 6b9c034..3091d92 100644 --- a/src/main.js +++ b/src/main.js @@ -1,14 +1,16 @@ -import Vue from 'vue' -import App from './App.vue' -import router from './router' -import store from './store' -import vuetify from './plugins/vuetify'; +import Vue from "vue"; +import App from "./App.vue"; +import router from "./router"; +import store from "./store"; +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({ router, store, vuetify, render: h => h(App) -}).$mount('#app') +}).$mount("#app"); diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js index b572a42..7bc8864 100644 --- a/src/plugins/vuetify.js +++ b/src/plugins/vuetify.js @@ -9,10 +9,10 @@ export default new Vuetify({ iconfont: "mdi" }, theme: { - themes: { - light: { - background: "#EEEEEE" - } + themes: { + light: { + background: "#fff" } + } } }); diff --git a/src/router/index.js b/src/router/index.js index d36779e..0835157 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,29 +1,36 @@ -import Vue from 'vue' -import VueRouter from 'vue-router' -import Home from '../views/Home.vue' +import Vue from "vue"; +import VueRouter from "vue-router"; +import Home from "../views/Home.vue"; -Vue.use(VueRouter) +Vue.use(VueRouter); const routes = [ { - path: '/', - name: 'Home', + path: "/", + name: "Home", component: Home }, { - path: '/about', - name: 'About', + path: "/about", + name: "About", // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // 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({ - mode: 'history', + mode: "history", base: process.env.BASE_URL, routes -}) +}); -export default router +export default router; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..c84907f --- /dev/null +++ b/src/scss/_variables.scss @@ -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; +} diff --git a/src/store/index.js b/src/store/index.js index 332b916..aa76367 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,15 +1,22 @@ -import Vue from 'vue' -import Vuex from 'vuex' +import Vue from "vue"; +import Vuex from "vuex"; -Vue.use(Vuex) +Vue.use(Vuex); export default new Vuex.Store({ state: { + fullScreen: false + }, + getters: { + fullScreen: state => { + return state.fullScreen + } }, mutations: { + fullScreen(state, fullScreen) { + state.fullScreen = fullScreen; + } }, - actions: { - }, - modules: { - } -}) + actions: {}, + modules: {} +}); diff --git a/src/views/Home.vue b/src/views/Home.vue index 2829975..e009329 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,11 +1,11 @@