Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| acc587cf8b | |||
| a60d33f7ef | |||
| 9cae57ffbd |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -19,3 +19,6 @@ yarn-error.log*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# assets
|
||||
src/assets/videos*
|
||||
|
||||
1174
firebase.md
Normal file
1174
firebase.md
Normal file
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@@ -8,12 +8,22 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.28",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.13.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.13.0",
|
||||
"@fortawesome/vue-fontawesome": "^0.1.9",
|
||||
"aos": "^3.0.0-beta.6",
|
||||
"core-js": "^3.6.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-page-transition": "^0.2.2",
|
||||
"vue-responsive-video-background-player": "^1.1.0",
|
||||
"vue-router": "^3.1.6",
|
||||
"vue-stripe-menu": "^1.2.8",
|
||||
"vuetify": "^2.2.11",
|
||||
"vuex": "^3.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mdi/font": "^5.1.45",
|
||||
"@vue/cli-plugin-babel": "~4.3.0",
|
||||
"@vue/cli-plugin-eslint": "~4.3.0",
|
||||
"@vue/cli-plugin-router": "~4.3.0",
|
||||
@@ -25,7 +35,9 @@
|
||||
"lint-staged": "^9.5.0",
|
||||
"sass": "^1.26.3",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"vue-cli-plugin-vuetify": "~2.0.5",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vuetify-loader": "^1.3.0"
|
||||
},
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<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://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
63
src/App.vue
63
src/App.vue
@@ -1,32 +1,57 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
<div>
|
||||
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
|
||||
<v-content>
|
||||
<Appbar></Appbar>
|
||||
<vue-page-transition name="fade">
|
||||
<router-view></router-view>
|
||||
</vue-page-transition>
|
||||
<v-row> </v-row>
|
||||
</v-content>
|
||||
</v-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Appbar from "@/components/Appbar";
|
||||
import Welcome from "./views/stripe-appbar/Welcome";
|
||||
import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
|
||||
import Random from "./views/stripe-appbar/Random"
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: { Appbar },
|
||||
data() {
|
||||
return {
|
||||
menu: [
|
||||
{
|
||||
title: "Welcome",
|
||||
dropdown: "welcome",
|
||||
content: Welcome,
|
||||
secondary: WelcomeSecondary,
|
||||
element: "span"
|
||||
},
|
||||
{
|
||||
title: "Random",
|
||||
dropdown: "random",
|
||||
content: Random
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
.content--secondary {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/assets/fonts/Gilroy-Black.otf
Normal file
BIN
src/assets/fonts/Gilroy-Black.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-Bold.otf
Normal file
BIN
src/assets/fonts/Gilroy-Bold.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-BoldItalic.otf
Normal file
BIN
src/assets/fonts/Gilroy-BoldItalic.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-Light.otf
Normal file
BIN
src/assets/fonts/Gilroy-Light.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-LightItalic.otf
Normal file
BIN
src/assets/fonts/Gilroy-LightItalic.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-Medium.otf
Normal file
BIN
src/assets/fonts/Gilroy-Medium.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-MediumItalic.otf
Normal file
BIN
src/assets/fonts/Gilroy-MediumItalic.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-Regular.otf
Normal file
BIN
src/assets/fonts/Gilroy-Regular.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-RegularItalic.otf
Normal file
BIN
src/assets/fonts/Gilroy-RegularItalic.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Gilroy-Thin.otf
Normal file
BIN
src/assets/fonts/Gilroy-Thin.otf
Normal file
Binary file not shown.
BIN
src/assets/images/11-Casino chip.png
Normal file
BIN
src/assets/images/11-Casino chip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/images/12-Casino chip.png
Normal file
BIN
src/assets/images/12-Casino chip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
src/assets/images/BG_04.jpg
Normal file
BIN
src/assets/images/BG_04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
9
src/assets/images/background.svg
Normal file
9
src/assets/images/background.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 297 KiB |
BIN
src/assets/images/newbackground.png
Normal file
BIN
src/assets/images/newbackground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 KiB |
1123
src/assets/images/pipebackground.svg
Normal file
1123
src/assets/images/pipebackground.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 275 KiB |
1127
src/assets/images/pipebackground_1.svg
Normal file
1127
src/assets/images/pipebackground_1.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 262 KiB |
1145
src/assets/images/space-wheel.svg
Normal file
1145
src/assets/images/space-wheel.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 350 KiB |
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
124
src/components/Appbar.vue
Normal file
124
src/components/Appbar.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-app-bar
|
||||
flat
|
||||
app
|
||||
hide-on-scroll
|
||||
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
||||
v-if="!this.$store.getters.fullScreen"
|
||||
style="z-index: 15;"
|
||||
width="100%"
|
||||
>
|
||||
<v-row class="hidden-sm-and-down">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col
|
||||
cols="4"
|
||||
class="d-flex justify-start align-center align-content-center"
|
||||
>
|
||||
<router-link :to="{ name: 'Home' }" class="routerLink">
|
||||
<v-toolbar-title class="title">
|
||||
<p class="mb-0">Savvy Firebase Tutorial</p>
|
||||
</v-toolbar-title>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col cols="4" class="d-flex justify-end align-center">
|
||||
<vsm-menu
|
||||
ref="header"
|
||||
:menu="menu"
|
||||
:screen-offset="25"
|
||||
:base-width="380"
|
||||
:base-height="400"
|
||||
>
|
||||
<template #default="data">
|
||||
<component :is="data.item.content" class="content" />
|
||||
<component :is="data.item.secondary" class="content--secondary" />
|
||||
</template>
|
||||
<template #title="menu" class="ma-0 pa-0">
|
||||
<router-link
|
||||
:to="menu.item.routerLink"
|
||||
v-if="menu.item.routerLink"
|
||||
style="padding-bottom: -20px;"
|
||||
>
|
||||
<p class="ma-0 pa-0 underline routerLink">
|
||||
{{ menu.item.title }}
|
||||
</p>
|
||||
</router-link>
|
||||
</template>
|
||||
</vsm-menu>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
<v-row class="hidden-md-and-up">
|
||||
<v-col cols="2" class="d-flex justify-start" style="margin-left: -12px;">
|
||||
<v-app-bar-nav-icon class="d-flex"></v-app-bar-nav-icon>
|
||||
</v-col>
|
||||
<v-col cols="10" class="d-flex align-center justify-end">
|
||||
<v-toolbar-title class="title">
|
||||
<p class="mb-0">Savvy Firebase Tutorial</p>
|
||||
</v-toolbar-title>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-app-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Welcome from "../views/stripe-appbar/Welcome";
|
||||
import WelcomeSecondary from "../views/stripe-appbar/WelcomeSecondary";
|
||||
import Random from "../views/stripe-appbar/Random";
|
||||
|
||||
export default {
|
||||
name: "Appbar",
|
||||
data() {
|
||||
return {
|
||||
menu: [
|
||||
{
|
||||
title: "Welcome",
|
||||
dropdown: "welcome",
|
||||
content: Welcome,
|
||||
secondary: WelcomeSecondary
|
||||
},
|
||||
{
|
||||
title: "Random",
|
||||
dropdown: "random",
|
||||
content: Random
|
||||
},
|
||||
{
|
||||
title: "Triangle",
|
||||
routerLink: { name: "Triangle" }
|
||||
},
|
||||
{
|
||||
title: "Playground",
|
||||
routerLink: { name: "Playground" }
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.routerLink {
|
||||
text-decoration: none;
|
||||
color: $mainColor;
|
||||
}
|
||||
.underline {
|
||||
position: relative;
|
||||
}
|
||||
.underline::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 0.1em;
|
||||
top: 100%;
|
||||
background: currentColor;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
|
||||
}
|
||||
.underline:hover::after {
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
</style>
|
||||
86
src/components/AppbarOld.vue
Normal file
86
src/components/AppbarOld.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-app-bar
|
||||
flat
|
||||
app
|
||||
hide-on-scroll
|
||||
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
||||
v-if="!this.$store.getters.fullScreen"
|
||||
>
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="d-flex justify-start align-content-center">
|
||||
<router-link :to="{ name: 'Home' }" class="routerLink">
|
||||
<v-toolbar-title class="title">
|
||||
<p class="mb-0">Savvy Firebase Tutorial</p>
|
||||
</v-toolbar-title>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col cols="4" class="d-flex justify-end align-self-center">
|
||||
<router-link
|
||||
:to="{ name: 'Playground' }"
|
||||
class="routerLink ma-0 pr-2"
|
||||
>
|
||||
<p class="mb-0 underline">
|
||||
Playground
|
||||
</p>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'Backgrounds' }"
|
||||
class="routerLink ma-0 pr-2"
|
||||
>
|
||||
<p class="mb-0 underline">
|
||||
Backgrounds
|
||||
</p>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
|
||||
<p class="mb-0 underline">
|
||||
Triangle
|
||||
</p>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
|
||||
<p class=" mb-0 underline">
|
||||
Sign In
|
||||
</p>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Login' }" class="routerLink ma-0">
|
||||
<p class="mb-0 underline">Register</p>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-app-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Appbar"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.routerLink {
|
||||
text-decoration: none;
|
||||
color: $mainColor;
|
||||
}
|
||||
.underline {
|
||||
position: relative;
|
||||
}
|
||||
.underline::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 0.1em;
|
||||
top: 100%;
|
||||
background: currentColor;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
|
||||
}
|
||||
.underline:hover::after {
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
||||
31
src/components/LoginFull.vue
Normal file
31
src/components/LoginFull.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<video-background
|
||||
:src="video"
|
||||
style="height: 100vh;"
|
||||
overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
|
||||
>
|
||||
<LoginForm class=""></LoginForm>
|
||||
</video-background>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoginForm from "../views/forms/LoginForm";
|
||||
export default {
|
||||
components: {
|
||||
LoginForm,
|
||||
},
|
||||
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>
|
||||
15
src/components/StripeAppbar.vue
Normal file
15
src/components/StripeAppbar.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
36
src/main.js
36
src/main.js
@@ -1,12 +1,36 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
import vuetify from "./plugins/vuetify";
|
||||
// Video Background
|
||||
import VideoBackground from "vue-responsive-video-background-player";
|
||||
// Page Transitions
|
||||
import VuePageTransition from "vue-page-transition";
|
||||
// Animations
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
// Stripe Appbar Menu
|
||||
import VueStripeMenu from "vue-stripe-menu";
|
||||
import "./scss/_appbar.scss";
|
||||
// Fontawesome
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.component("font-awesome-icon", FontAwesomeIcon);
|
||||
|
||||
Vue.component("video-background", VideoBackground);
|
||||
|
||||
Vue.use(VuePageTransition);
|
||||
Vue.use(VueStripeMenu);
|
||||
|
||||
new Vue({
|
||||
created() {
|
||||
AOS.init();
|
||||
},
|
||||
router,
|
||||
store,
|
||||
vuetify,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
}).$mount("#app");
|
||||
|
||||
21
src/plugins/vuetify.js
Normal file
21
src/plugins/vuetify.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import Vue from "vue";
|
||||
import Vuetify from "vuetify/lib";
|
||||
import "@mdi/font/css/materialdesignicons.css";
|
||||
|
||||
Vue.use(Vuetify);
|
||||
|
||||
export default new Vuetify({
|
||||
icons: {
|
||||
iconfont: "mdi"
|
||||
},
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
primary: "#051937",
|
||||
secondary: "#374366",
|
||||
accent: "#d4a418",
|
||||
background: "#e8e8e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,29 +1,72 @@
|
||||
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',
|
||||
component: 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"),
|
||||
},
|
||||
{
|
||||
path: "/hello",
|
||||
name: "Hello",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "hello" */ "../components/HelloWorld.vue"),
|
||||
},
|
||||
{
|
||||
path: "/triangle",
|
||||
name: "Triangle",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue"),
|
||||
},
|
||||
{
|
||||
path: "/backgrounds",
|
||||
name: "Backgrounds",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue"),
|
||||
},
|
||||
{
|
||||
path: "/playground",
|
||||
name: "Playground",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "playground" */ "../views/Playground.vue"),
|
||||
},
|
||||
{
|
||||
path: "/spacewheel",
|
||||
name: "SpaceWheel",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "spaceweel" */ "../views/SpaceWheel.vue"),
|
||||
},
|
||||
{
|
||||
path: "/picaro",
|
||||
name: "Picaro",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "spaceweel" */ "../views/Picaro.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
mode: "history",
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
11
src/scss/_appbar.scss
Normal file
11
src/scss/_appbar.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@import "../scss/_variables.scss";
|
||||
|
||||
$vsm-menu-link-height: 35px !default;
|
||||
$vsm-color: $mainColor !default;
|
||||
$vsm-color-hover: $mainColor !default;
|
||||
$vsm-media: 768px !default;
|
||||
// $vsm-menu-border-radius: 15px !default;
|
||||
$vsm-menu-border-radius: 15px !default;
|
||||
$vsm-menu-transform-content: 150px !default;
|
||||
|
||||
@import "~vue-stripe-menu/src/scss/index";
|
||||
143
src/scss/_variables.scss
Normal file
143
src/scss/_variables.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
// Import custom fonts
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-Thin";
|
||||
src: url("~@/assets/fonts/Gilroy-Thin.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-Regular";
|
||||
src: url("~@/assets/fonts/Gilroy-Regular.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-Medium";
|
||||
src: url("~@/assets/fonts/Gilroy-Medium.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-Light";
|
||||
src: url("~@/assets/fonts/Gilroy-Light.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-Condensed-Light";
|
||||
src: url("~@/assets/fonts/Gilroy-Light.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-Bold";
|
||||
src: url("~@/assets/fonts/Gilroy-Bold.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-Black";
|
||||
src: url("~@/assets/fonts/Gilroy-Black.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-Italic";
|
||||
src: url("~@/assets/fonts/Gilroy-RegularItalic.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-LightItalic";
|
||||
src: url("~@/assets/fonts/Gilroy-LightItalic.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-MediumItalic";
|
||||
src: url("~@/assets/fonts/Gilroy-MediumItalic.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy-BoldItalic";
|
||||
src: url("~@/assets/fonts/Gilroy-BoldItalic.otf") format("opentype");
|
||||
}
|
||||
|
||||
// Set font variables
|
||||
|
||||
$Gilroy-Thin: "Gilroy-Thin", sans-serif !default;
|
||||
$Gilroy-Regular: "Gilroy-Regular", sans-serif !default;
|
||||
$Gilroy-Medium: "Gilroy-Medium", sans-serif !default;
|
||||
$Gilroy-Light: "Gilroy-Light", sans-serif !default;
|
||||
$Gilroy-Condensed-Light: "Gilroy-Condensed-Light", sans-serif !default;
|
||||
$Gilroy-Bold: "Gilroy-Bold", sans-serif !default;
|
||||
$Gilroy-Black: "Gilroy-Black", sans-serif !default;
|
||||
$Gilroy-Italic: "Gilroy-Italic", sans-serif !default;
|
||||
$Gilroy-LightItalic: "Gilroy-LightItalic", sans-serif !default;
|
||||
$Gilroy-MediumItalic: "Gilroy-MediumItalic", sans-serif !default;
|
||||
$Gilroy-BoldItalic: "Gilroy-BoldItalic", sans-serif !default;
|
||||
|
||||
// Replace default body fonts
|
||||
|
||||
// @import "../../node_modules/vuetify/src/styles/styles.sass";
|
||||
// $body-font-family: $Gilroy-Regular;
|
||||
// $heading-font-family: $Gilroy-Regular;
|
||||
|
||||
// @import "~vuetify/src/styles/settings/variables";
|
||||
// $body-font-family: $Gilroy-Regular;
|
||||
// $heading-font-family: $Gilroy-Regular;
|
||||
|
||||
// Replace typography fonts
|
||||
|
||||
.v-application {
|
||||
font-family: $Gilroy-Regular !important;
|
||||
.display-4,
|
||||
.display-3 {
|
||||
font-family: $Gilroy-Light !important;
|
||||
}
|
||||
.display-2,
|
||||
.display-1,
|
||||
.headline,
|
||||
.subtitle-1,
|
||||
.body-1,
|
||||
.body-2,
|
||||
.caption,
|
||||
.overline,
|
||||
.font-regular,
|
||||
.font-weight-regular {
|
||||
font-family: $Gilroy-Regular !important;
|
||||
}
|
||||
.title,
|
||||
.subtitle-2,
|
||||
.font-weight-medium {
|
||||
font-family: $Gilroy-Medium !important;
|
||||
}
|
||||
.font-weight-light {
|
||||
font-family: $Gilroy-Condensed-Light !important;
|
||||
}
|
||||
.font-weight-thin {
|
||||
font-family: $Gilroy-Thin !important;
|
||||
}
|
||||
.font-weight-bold {
|
||||
font-family: $Gilroy-Bold !important;
|
||||
}
|
||||
.font-weight-black {
|
||||
font-family: $Gilroy-Black !important;
|
||||
}
|
||||
.font-italic {
|
||||
font-family: $Gilroy-Italic !important;
|
||||
}
|
||||
.font-italic.font-weight-light {
|
||||
font-family: $Gilroy-LightItalic !important;
|
||||
}
|
||||
.font-italic.font-weight-medium {
|
||||
font-family: $Gilroy-MediumItalic !important;
|
||||
}
|
||||
.font-italic.font-weight-bold {
|
||||
font-family: $Gilroy-BoldItalic !important;
|
||||
}
|
||||
}
|
||||
|
||||
$body-font-family: $Gilroy-Regular !important;
|
||||
|
||||
// Change default font colour
|
||||
|
||||
$mainColor: #323947;
|
||||
|
||||
.theme--light.v-application,
|
||||
.fontColor,
|
||||
.theme--light.v-sheet {
|
||||
color: $mainColor !important;
|
||||
}
|
||||
@@ -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: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
fullScreen(state, fullScreen) {
|
||||
state.fullScreen = fullScreen;
|
||||
}
|
||||
})
|
||||
},
|
||||
actions: {},
|
||||
modules: {}
|
||||
});
|
||||
|
||||
162
src/views/Backgrounds.vue
Normal file
162
src/views/Backgrounds.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1>Backgrounds</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1440 320"
|
||||
style="width: 500px;"
|
||||
>
|
||||
<path
|
||||
fill="#0099ff"
|
||||
fill-opacity="1"
|
||||
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||
></path>
|
||||
</svg>
|
||||
</v-row>
|
||||
<v-row class="mt-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path
|
||||
fill="#0099ff"
|
||||
fill-opacity="0.5"
|
||||
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||
transform="rotate(-10 50 100)"
|
||||
></path>
|
||||
<path
|
||||
fill="#0099ff"
|
||||
fill-opacity="0.6"
|
||||
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||
transform="rotate(10 50 100)"
|
||||
></path>
|
||||
</svg>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<svg
|
||||
width="200"
|
||||
height="200"
|
||||
viewBox="0 0 600 600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g transform="translate(300,300)">
|
||||
<path
|
||||
d="M154.5,-209.4C196.2,-182.4,223.2,-131.8,227.9,-82.3C232.7,-32.8,215.3,15.8,199.3,64.8C183.4,113.8,169,163.3,136,199.9C103.1,236.5,51.5,260.3,3.5,255.4C-44.5,250.5,-89,217.1,-129.7,183C-170.4,148.9,-207.4,114.2,-226.4,70.2C-245.4,26.2,-246.3,-27.1,-228.4,-71.7C-210.5,-116.4,-173.7,-152.4,-132.5,-179.6C-91.3,-206.7,-45.7,-224.8,5.4,-232.2C56.4,-239.7,112.9,-236.3,154.5,-209.4Z"
|
||||
fill="#FFB4BC"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-img src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg">
|
||||
<v-col class="fill-height d-flex align-center justify-center">
|
||||
<h1 class="display-4 black--text">Text</h1>
|
||||
</v-col>
|
||||
</v-img>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container fluid class="newtriangle">
|
||||
<v-row class="fill-height d-flex align-center">
|
||||
<v-col class="">
|
||||
<h1 class="display-2 white--text">
|
||||
CSS polygon background with clip-path.
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col class="fill-height d-flex justify-center">
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="Gradient"
|
||||
cx="0.5"
|
||||
cy="0.5"
|
||||
r="0.5"
|
||||
fx="0.25"
|
||||
fy="0.25"
|
||||
>
|
||||
<stop offset="0%" stop-color="red" />
|
||||
<stop offset="100%" stop-color="blue" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<rect
|
||||
x="10"
|
||||
y="10"
|
||||
rx="15"
|
||||
ry="15"
|
||||
width="100"
|
||||
height="100"
|
||||
fill="url(#Gradient)"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="60"
|
||||
cy="60"
|
||||
r="50"
|
||||
fill="transparent"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle cx="35" cy="35" r="2" fill="white" stroke="white" />
|
||||
<circle cx="60" cy="60" r="2" fill="white" stroke="white" />
|
||||
<text
|
||||
x="38"
|
||||
y="40"
|
||||
fill="white"
|
||||
font-family="sans-serif"
|
||||
font-size="10pt"
|
||||
>
|
||||
(fx,fy)
|
||||
</text>
|
||||
<text
|
||||
x="63"
|
||||
y="63"
|
||||
fill="white"
|
||||
font-family="sans-serif"
|
||||
font-size="10pt"
|
||||
>
|
||||
(cx,cy)
|
||||
</text>
|
||||
</svg>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.newtriangle {
|
||||
width: 105vw;
|
||||
height: 50vh;
|
||||
background-image: radial-gradient(
|
||||
circle farthest-corner at 7.5% 54.1%,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(39, 0, 89, 1) 74.9%
|
||||
);
|
||||
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,19 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
Hello
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-btn color="primary">Hello</v-btn>
|
||||
<v-btn color="secondary">Hello</v-btn>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
0
src/views/Picaro
Normal file
0
src/views/Picaro
Normal file
33
src/views/Picaro.vue
Normal file
33
src/views/Picaro.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<v-container fluid class="ma-0 pa-0 full-screen d-flex">
|
||||
<img
|
||||
src="../assets/images/BG_04.jpg"
|
||||
class="d-flex align-end ma-0 pa-0 background-image"
|
||||
/>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~vuetify/src/styles/styles.sass";
|
||||
|
||||
.full-screen {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.background-image {
|
||||
position: absolute;
|
||||
height: calc(100vh);
|
||||
// width: calc(100wh);
|
||||
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
||||
top: -64px;
|
||||
object-fit: cover;
|
||||
}
|
||||
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||
top: -56px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
119
src/views/Playground.vue
Normal file
119
src/views/Playground.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container fluid class="ma-0 pa-0 full-screen d-flex">
|
||||
<img
|
||||
src="../assets/images/pipebackground_1.svg"
|
||||
style=""
|
||||
class="d-flex align-end ma-0 pa-0 new-background-image"
|
||||
/>
|
||||
<v-container
|
||||
fill-height
|
||||
class="d-flex align-center"
|
||||
style="position: static; z-index: 10;"
|
||||
>
|
||||
<v-row>
|
||||
<v-col class="d-flex justify-center">
|
||||
<h1 class="display-2">Playground</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1 class="display-2">Playground</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1 class="display-2">{{ viewportHeight - 64 }}</h1>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 class="display-2">{{ viewportWidth }}</h1>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 class="display-2">{{ backgroundWidth }}</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
viewportHeight: window.innerHeight,
|
||||
viewportWidth: window.innerWidth,
|
||||
backgroundWidth: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
window.addEventListener("resize", this.updateHeight);
|
||||
window.addEventListener("resize", this.updateWidth);
|
||||
this.querySelectorsPlayground();
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("resize", this.updateHeight);
|
||||
window.addEventListener("resize", this.updateWidth);
|
||||
},
|
||||
mounted() {
|
||||
// this.getBackgroundWidth();
|
||||
},
|
||||
methods: {
|
||||
updateHeight() {
|
||||
this.viewportHeight = window.innerHeight;
|
||||
},
|
||||
updateWidth() {
|
||||
this.viewportWidth = window.innerWidth;
|
||||
},
|
||||
getBackgroundWidth() {
|
||||
var background = document.querySelector("#backgroundsvg");
|
||||
this.backgroundWidth = background.clientWidth;
|
||||
},
|
||||
querySelectorsPlayground() {
|
||||
console.log(document.images);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~vuetify/src/styles/styles.sass";
|
||||
$background-width: 795px;
|
||||
|
||||
.full-screen {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
img.new-background-image {
|
||||
height: calc(100vh);
|
||||
width: calc(100vw);
|
||||
position: absolute;
|
||||
@media screen and (min-width: $background-width) {
|
||||
object-fit: scale-down;
|
||||
object-position: right;
|
||||
}
|
||||
@media screen and (max-width: $background-width) {
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
||||
top: -64px;
|
||||
}
|
||||
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||
top: -56px;
|
||||
}
|
||||
}
|
||||
|
||||
.background-image {
|
||||
position: absolute;
|
||||
height: calc(100vh - 64px);
|
||||
// width: 100%;
|
||||
max-width: 1115px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
border-style: dashed;
|
||||
object-fit: cover;
|
||||
object-position: right top;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
75
src/views/SpaceWheel.vue
Normal file
75
src/views/SpaceWheel.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
fill-height
|
||||
style="background-color: #151726;"
|
||||
class="full-screen d-flex align-content-start"
|
||||
>
|
||||
<v-row>
|
||||
<v-col class="d-flex justify-center">
|
||||
<v-img
|
||||
src="../assets/images/space-wheel.svg"
|
||||
aspect-ratio="1"
|
||||
max-height="650px"
|
||||
max-width="650px"
|
||||
class="d-flex align-start justify-start space-image"
|
||||
position="top"
|
||||
></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="mt-10">
|
||||
<v-col class="d-flex align-center justify-center align-content-center">
|
||||
<h1 class="white--text display-2">
|
||||
<font-awesome-icon :icon="['fas', 'space-shuttle']" />
|
||||
Space Wheel
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faSpaceShuttle } from "@fortawesome/free-solid-svg-icons";
|
||||
library.add(faSpaceShuttle);
|
||||
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.full-screen {
|
||||
min-height: calc(100vh);
|
||||
max-height: 920px;
|
||||
}
|
||||
|
||||
.space-image {
|
||||
animation: spin 40s linear infinite;
|
||||
-webkit-animation: spin 40s linear infinite;
|
||||
-moz-animation: spin 40s linear infinite;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.space-image:hover {
|
||||
-webkit-animation-play-state: paused;
|
||||
-moz-animation-play-state: paused;
|
||||
-o-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
100% {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
src/views/Triangle.vue
Normal file
145
src/views/Triangle.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container fluid class="pa-0">
|
||||
<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
|
||||
<v-col
|
||||
class="d-flex align-center pt-0 ml-8"
|
||||
style="position: relative; z-index: 10;"
|
||||
>
|
||||
<v-card flat color="rgb(0, 0, 0, 0)">
|
||||
<h1 class="display" style="position: relative;">
|
||||
Welcome to Savvy Firebox Tutorial
|
||||
</h1>
|
||||
<v-btn
|
||||
x-large
|
||||
color="primary"
|
||||
style="position: relative; z-index: 10;"
|
||||
class="lighten-1"
|
||||
>Click Here</v-btn
|
||||
>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
|
||||
<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"
|
||||
data-aos-duration="3000"
|
||||
>
|
||||
<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;"
|
||||
>
|
||||
More information about what we do and why.
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="secondary" medium>Click here</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<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="test-roll"
|
||||
data-aos-duration="3000"
|
||||
data-aos-easing="new-easing"
|
||||
>
|
||||
<v-card-title>
|
||||
<span class="display-2 font-weight-bold">See more</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex flex-column justify-center align-center">
|
||||
<v-img
|
||||
src="@/assets/images/12-Casino chip.png"
|
||||
max-height="150px"
|
||||
max-width="150px"
|
||||
class="mb-5"
|
||||
></v-img>
|
||||
<span
|
||||
class="d-flex justify-center display body-1"
|
||||
style="color: black;"
|
||||
>
|
||||
Additional things about what it is.
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="secondary" medium>Click here</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- <v-col md="1" xs="0"></v-col> -->
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
animate: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.newtriangle {
|
||||
width: 105vw;
|
||||
height: 50vh;
|
||||
background-image: radial-gradient(
|
||||
circle farthest-corner at 7.5% 54.1%,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(39, 0, 89, 1) 74.9%
|
||||
);
|
||||
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
[data-aos="test-roll"] {
|
||||
-webkit-transform: translateX(-1000px) rotate(-720deg);
|
||||
transform: translateX(-1000px) rotate(-720deg);
|
||||
-webkit-filter: blur(50px);
|
||||
filter: blur(50px);
|
||||
opacity: 0;
|
||||
transition-property: transform, opacity, filter;
|
||||
&.aos-animate {
|
||||
-webkit-transform: translateX(0) rotate(0deg);
|
||||
transform: translateX(0) rotate(0deg);
|
||||
-webkit-filter: blur(0);
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-aos] {
|
||||
body[data-aos-easing="new-easing"] &,
|
||||
&[data-aos][data-aos-easing="new-easing"] {
|
||||
transition-timing-function: cubic-bezier(0.25, 1, 0.57, 0.55);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
218
src/views/forms/LoginForm.vue
Normal file
218
src/views/forms/LoginForm.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<v-container fluid fill-height class="d-flex align-center justify-center">
|
||||
<v-row>
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12"
|
||||
align-self="stretch"
|
||||
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-center justify-center flex-column"
|
||||
width="100%"
|
||||
>
|
||||
<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 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="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"
|
||||
>
|
||||
<v-icon color="white" size="3em" class="pb-4"
|
||||
>mdi-account-circle</v-icon
|
||||
>
|
||||
<v-form
|
||||
v-model="valid"
|
||||
ref="form"
|
||||
class="pt-4 d-flex flex-column align-center justify-start"
|
||||
>
|
||||
<v-text-field
|
||||
v-for="field in formFields"
|
||||
:key="field.name"
|
||||
outlined
|
||||
rounded
|
||||
required
|
||||
:type="field.password ? 'password' : 'text'"
|
||||
background-color="rgb(100%, 100%, 100%, 10%)"
|
||||
color="rgb(100%, 100%, 100%, 20%)"
|
||||
class="white-placeholder full-width"
|
||||
v-model="field.value"
|
||||
:rules="field.rules"
|
||||
:label="field.placeholder"
|
||||
:success="!!field.value"
|
||||
@click:append="field.showIconData = !field.showIconData"
|
||||
>
|
||||
<template #prepend-inner>
|
||||
<v-icon color="white" class="pr-3">
|
||||
{{ field.prependIcon }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<div class="innerIcon">
|
||||
<v-btn
|
||||
v-if="field.appendIconShow"
|
||||
icon
|
||||
text
|
||||
x-small
|
||||
@click="
|
||||
() => {
|
||||
field.showIconData = !field.showIconData;
|
||||
field.password = !field.password;
|
||||
}
|
||||
"
|
||||
>
|
||||
<v-icon color="white">
|
||||
{{
|
||||
field.showIconData
|
||||
? field.appendIconShow
|
||||
: field.appendIconHide
|
||||
}}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<v-btn
|
||||
depressed
|
||||
large
|
||||
color="primary"
|
||||
class="lighten-3"
|
||||
:loading="load"
|
||||
@click="submit"
|
||||
>Submit</v-btn
|
||||
>
|
||||
</v-form>
|
||||
<p class="whiteText mb-0 pt-5">Forgot password?</p>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LoginForm",
|
||||
data() {
|
||||
return {
|
||||
valid: false,
|
||||
load: false,
|
||||
formFields: [
|
||||
{
|
||||
name: "Email",
|
||||
rules: [
|
||||
v => !!v || "You must enter an email address.",
|
||||
v => /.+@.+/.test(v) || "Email is not valid."
|
||||
],
|
||||
placeholder: "Email",
|
||||
successmessage: "Email is valid.",
|
||||
prependIcon: "mdi-at",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
name: "Password",
|
||||
rules: [
|
||||
v => !!v || "You must enter a password.",
|
||||
v => (v && v.length >= 8) || "Minimum 8 characters."
|
||||
],
|
||||
placeholder: "Password",
|
||||
successmessage: "Password is valid.",
|
||||
prependIcon: "mdi-lock",
|
||||
appendIconShow: "mdi-eye",
|
||||
appendIconHide: "mdi-eye-off",
|
||||
showIconData: false,
|
||||
value: "",
|
||||
password: true
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async submit() {
|
||||
this.load = !this.load;
|
||||
console.log("loading");
|
||||
if (this.$refs.form.validate()) {
|
||||
console.log(`Email: ${this.formFields[0].value}`);
|
||||
console.log(`Password: ${this.formFields[1].value}`);
|
||||
} else {
|
||||
console.log("Not valid");
|
||||
this.load = !this.load;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
alignOnViewport() {
|
||||
return this.$vuetify.breakpoint.xsOnly
|
||||
? "text-align-center"
|
||||
: "text-align-right";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// @import "../../scss/_variables.scss";
|
||||
|
||||
.whiteText {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.white-placeholder ::v-deep input::placeholder {
|
||||
color: white !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.white-placeholder ::v-deep input {
|
||||
color: white !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.white-placeholder ::v-deep .v-label {
|
||||
color: white !important;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
36
src/views/stripe-appbar/Random.vue
Normal file
36
src/views/stripe-appbar/Random.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<v-container style="width: 300px; height: 300px;">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-card flat>
|
||||
<p class="ma-0 pa-0 headline">Animations</p>
|
||||
Demo components showing animations.
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-card flat>
|
||||
<router-link :to="{ name: 'SpaceWheel' }" class="routerLink">
|
||||
Spacewheel
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link :to="{ name: 'Picaro' }" class="routerLink">
|
||||
Picaro
|
||||
</router-link>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.routerLink {
|
||||
text-decoration: none;
|
||||
color: $mainColor;
|
||||
}
|
||||
</style>
|
||||
21
src/views/stripe-appbar/Welcome.vue
Normal file
21
src/views/stripe-appbar/Welcome.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-card flat class="ma-0 pa-0">
|
||||
<p class="headline">Welcome Pages</p>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.centre-text {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
19
src/views/stripe-appbar/WelcomeSecondary.vue
Normal file
19
src/views/stripe-appbar/WelcomeSecondary.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col style="width: 300px;">
|
||||
Welcome Secondary Content
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
840
temp.md
Normal file
840
temp.md
Normal file
@@ -0,0 +1,840 @@
|
||||
# Temp notes
|
||||
|
||||
## React to height change
|
||||
|
||||
### Get current height of page
|
||||
|
||||
To create content based on viewport height change you should use an event listener: `window.addEventListener`.
|
||||
|
||||
A list of all events you can listen for is here: <https://developer.mozilla.org/en-US/docs/Web/Events>
|
||||
|
||||
The current height can be obtained from `window.innerHeight`.
|
||||
|
||||
You should add `created` and `destroyed` to the script, and create a method to do something on the trigger:
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
viewportHeight: window.innerHeight,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
window.addEventListener("resize", this.updateHeight);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("resize", this.updateHeight);
|
||||
},
|
||||
methods: {
|
||||
updateHeight() {
|
||||
this.viewportHeight = window.innerHeight;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
This can be useful if you need to pass the current height to a prop for an image component that you might want to fill the page:
|
||||
|
||||
```html
|
||||
<v-img
|
||||
src="../assets/images/newbackground.png"
|
||||
:height="this.viewportHeight - 64"
|
||||
width="auto"
|
||||
contain
|
||||
position="bottom 0px right 0px"
|
||||
class="ma-0 pa-0"
|
||||
id="backgroundsvg"
|
||||
></v-img>
|
||||
```
|
||||
|
||||
You can also get the height in the css. This way you can have an image set its own width or height as css parameters.
|
||||
|
||||
```css
|
||||
.full-screen {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
```
|
||||
|
||||
You might also want to add browser compatibility options:
|
||||
|
||||
Opera:
|
||||
`height: -o-calc(100% - 65px);`
|
||||
|
||||
Google/Safari:
|
||||
`height: -webkit-calc(100% - 65px);`
|
||||
|
||||
### Get current height of an object
|
||||
|
||||
Simiarly, you can add a watcher to get the width of any element. You should add a css class to the object you want to get the width of. Then you can use a `querySelector` to get it:
|
||||
|
||||
```javascript
|
||||
getBackgroundWidth() {
|
||||
var background = document.querySelector("#backgroundsvg");
|
||||
this.backgroundWidth = background.clientWidth;
|
||||
}
|
||||
```
|
||||
|
||||
Documentation for `querySelector`: <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>
|
||||
|
||||
You can see all the methods and properties for document here:
|
||||
<https://developer.mozilla.org/en-US/docs/Web/API/Document>
|
||||
|
||||
## Using `<v-content>` to fill the page
|
||||
|
||||
`fill-height` is useful for child components if you want them to fill to the height of the parent.
|
||||
|
||||
To make a fullscreen element use fluid with 0 margins, and set the height to 100vh. Then any children `<v-component>` can use the `fill-height` prop.
|
||||
|
||||
## v-for for n times repetition
|
||||
|
||||
You can repeat things n times using a `v-for`:
|
||||
|
||||
```html
|
||||
<v-container v-for="index in 10" :key="index"></v-container>
|
||||
```
|
||||
|
||||
Use `<v-container fill-height class="d-flex justify-center align-content-center">`
|
||||
to get content like - screenshot of central content with pipe background
|
||||
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
|
||||
## Images as backgrounds
|
||||
|
||||
You can use `background-size: cover;` in the css to dynamically have a background image adjust to the viewport.
|
||||
<https://www.webfx.com/blog/web-design/responsive-background-image/>
|
||||
|
||||
Demo: <https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html>
|
||||
|
||||
You can use aditional controls to set how the image should scale itself:
|
||||
<https://css-tricks.com/perfect-full-page-background-image/>
|
||||
|
||||
Cropping images with `object-fit: cover;`
|
||||
<https://alligator.io/css/cropping-images-object-fit/>
|
||||
|
||||
### SVG elements as a background
|
||||
|
||||
You can use an svg (from envato) as a fullscreen background image. To do this you should decide if you need a transparent appbar or not.
|
||||
|
||||
If you do not need a transparent appbar:
|
||||
|
||||
- Set an image
|
||||
- with `position: absolute;`
|
||||
- with `height: calc(100vh - 64px)`
|
||||
|
||||
## Images that autoscale (zoom)
|
||||
|
||||
This is a good example on how you can dynamically zoom in/out of an image:
|
||||
<https://css-tricks.com/crop-top/>
|
||||
|
||||
Quick method:
|
||||
|
||||
To set an image to auto scale (zoom style)
|
||||
|
||||
Use `max-width` to the value you want the image to be
|
||||
Use `width: 100%;`
|
||||
Use `height: auto;`
|
||||
Use `max-height` to the value you want the image to be
|
||||
|
||||
## Using envato EPS
|
||||
|
||||
Open the EPS file in Graphic. Hide and delete all the layers you don't need. When finished, create a new canvas and copy and paste the images to it. Position it accordingly and resize everything. Export as svg and edit the svg to remove the height and width.
|
||||
|
||||
## Transparent appbar
|
||||
|
||||
You can have the appbar be transparent to have a background image fullscreen. To do this you should:
|
||||
|
||||
- Set an image
|
||||
- with `position: absolute;`
|
||||
-
|
||||
|
||||
## Stripe appbar menu
|
||||
|
||||
## React to height change
|
||||
|
||||
### Get current height of page
|
||||
|
||||
To create content based on viewport height change you should use an event listener: `window.addEventListener`.
|
||||
|
||||
A list of all events you can listen for is here: <https://developer.mozilla.org/en-US/docs/Web/Events>
|
||||
|
||||
The current height can be obtained from `window.innerHeight`.
|
||||
|
||||
You should add `created` and `destroyed` to the script, and create a method to do something on the trigger:
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
viewportHeight: window.innerHeight,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
window.addEventListener("resize", this.updateHeight);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("resize", this.updateHeight);
|
||||
},
|
||||
methods: {
|
||||
updateHeight() {
|
||||
this.viewportHeight = window.innerHeight;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
This can be useful if you need to pass the current height to a prop for an image component that you might want to fill the page:
|
||||
|
||||
```html
|
||||
<v-img
|
||||
src="../assets/images/newbackground.png"
|
||||
:height="this.viewportHeight - 64"
|
||||
width="auto"
|
||||
contain
|
||||
position="bottom 0px right 0px"
|
||||
class="ma-0 pa-0"
|
||||
id="backgroundsvg"
|
||||
></v-img>
|
||||
```
|
||||
|
||||
You can also get the height in the css. This way you can have an image set its own width or height as css parameters.
|
||||
|
||||
```css
|
||||
.full-screen {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
```
|
||||
|
||||
You might also want to add browser compatibility options:
|
||||
|
||||
Opera:
|
||||
`height: -o-calc(100% - 65px);`
|
||||
|
||||
Google/Safari:
|
||||
`height: -webkit-calc(100% - 65px);`
|
||||
|
||||
### Get current height of an object
|
||||
|
||||
Simiarly, you can add a watcher to get the width of any element. You should add a css class to the object you want to get the width of. Then you can use a `querySelector` to get it:
|
||||
|
||||
```javascript
|
||||
getBackgroundWidth() {
|
||||
var background = document.querySelector("#backgroundsvg");
|
||||
this.backgroundWidth = background.clientWidth;
|
||||
}
|
||||
```
|
||||
|
||||
Documentation for `querySelector`: <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>
|
||||
|
||||
You can see all the methods and properties for document here:
|
||||
<https://developer.mozilla.org/en-US/docs/Web/API/Document>
|
||||
|
||||
## Using `<v-content>` to fill the page
|
||||
|
||||
`fill-height` is useful for child components if you want them to fill to the height of the parent.
|
||||
|
||||
To make a fullscreen element use fluid with 0 margins, and set the height to 100vh. Then any children `<v-component>` can use the `fill-height` prop.
|
||||
|
||||
## v-for for n times repetition
|
||||
|
||||
You can repeat things n times using a `v-for`:
|
||||
|
||||
```html
|
||||
<v-container v-for="index in 10" :key="index"></v-container>
|
||||
```
|
||||
|
||||
Use `<v-container fill-height class="d-flex justify-center align-content-center">`
|
||||
to get content like - screenshot of central content with pipe background
|
||||
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
|
||||
## Images as backgrounds
|
||||
|
||||
You can use `background-size: cover;` in the css to dynamically have a background image adjust to the viewport.
|
||||
<https://www.webfx.com/blog/web-design/responsive-background-image/>
|
||||
|
||||
Demo: <https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html>
|
||||
|
||||
You can use aditional controls to set how the image should scale itself:
|
||||
<https://css-tricks.com/perfect-full-page-background-image/>
|
||||
|
||||
Cropping images with `object-fit: cover;`
|
||||
<https://alligator.io/css/cropping-images-object-fit/>
|
||||
|
||||
### SVG elements as a background
|
||||
|
||||
You can use an svg (from envato) as a fullscreen background image. To do this you should decide if you need a transparent appbar or not.
|
||||
|
||||
If you do not need a transparent appbar:
|
||||
|
||||
- Set an image
|
||||
- with `position: absolute;`
|
||||
- with `height: calc(100vh - 64px)`
|
||||
|
||||
## Images that autoscale (zoom)
|
||||
|
||||
This is a good example on how you can dynamically zoom in/out of an image:
|
||||
<https://css-tricks.com/crop-top/>
|
||||
|
||||
Quick method:
|
||||
|
||||
To set an image to auto scale (zoom style)
|
||||
|
||||
Use `max-width` to the value you want the image to be
|
||||
Use `width: 100%;`
|
||||
Use `height: auto;`
|
||||
Use `max-height` to the value you want the image to be
|
||||
|
||||
## Using envato EPS
|
||||
|
||||
Open the EPS file in Graphic. Hide and delete all the layers you don't need. When finished, create a new canvas and copy and paste the images to it. Position it accordingly and resize everything. Export as svg and edit the svg to remove the height and width.
|
||||
|
||||
## Fullscreen image as a background
|
||||
|
||||
The image should set a class:
|
||||
|
||||
```html
|
||||
<img
|
||||
src="../assets/images/pipebackground_1.svg"
|
||||
style=""
|
||||
class="d-flex align-end ma-0 pa-0 new-background-image"
|
||||
/>
|
||||
```
|
||||
|
||||
### Transparent appbar
|
||||
|
||||
You can have the appbar be transparent to have a background image fullscreen.
|
||||
|
||||
```html
|
||||
<v-app-bar
|
||||
flat
|
||||
app
|
||||
hide-on-scroll
|
||||
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
||||
v-if="!this.$store.getters.fullScreen"
|
||||
style="z-index: 15;"
|
||||
></v-app-bar>
|
||||
```
|
||||
|
||||
### Adjust image position to match that of dynamic appbar
|
||||
|
||||
To adjust the image to account for the height of the appbar dynamically you should use media queries and vuetify sass variables:
|
||||
|
||||
```scss
|
||||
img.new-background-image {
|
||||
height: calc(100vh);
|
||||
width: calc(100vw);
|
||||
position: absolute;
|
||||
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
||||
top: -64px;
|
||||
}
|
||||
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||
top: -56px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Here we offset the image from the top by the size of the appbar based on the viewports.
|
||||
|
||||
Alternatively if you don't want the image to extend behind the appbar don't adjust the `top` attribute. You should instead subtract the height of the appbar from the image:
|
||||
|
||||
```scss
|
||||
img.new-background-image {
|
||||
width: calc(100vw);
|
||||
position: absolute;
|
||||
@media screen and (min-width: $background-width) {
|
||||
object-fit: scale-down;
|
||||
object-position: right;
|
||||
}
|
||||
@media screen and (max-width: $background-width) {
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Using CSS media queries for dynamic classes
|
||||
|
||||
The appbar will adjust its own height based on the viewport.
|
||||
On medium and above it will be 64px, on small and below it will be 56px.
|
||||
|
||||
On the image itself you should set a class. This class should set the `height` and `width` to 100% of the viewheight/viewwidth and `position: absolute`.
|
||||
|
||||
You should set a `$background-width` variable - this should be the width of the image. We can use this to know if the current screen is less than the width of the actual image and apply alternative styling.
|
||||
|
||||
We can use media queries to set the position of the image on different background widths:
|
||||
|
||||
```javascript
|
||||
$background-width: 795px;
|
||||
img.new-background-image {
|
||||
height: calc(100vh);
|
||||
width: calc(100vw);
|
||||
position: absolute;
|
||||
@media screen and (min-width: $background-width) {
|
||||
object-fit: scale-down;
|
||||
object-position: right;
|
||||
}
|
||||
@media screen and (max-width: $background-width) {
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
||||
top: -64px;
|
||||
}
|
||||
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||
top: -56px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
To have an SVG image automatically adjust itself for dynamic viewports:
|
||||
|
||||
#### Fullscreen
|
||||
|
||||
Set `object-fit` to `scale-down` and `object-position` to `right`.
|
||||
|
||||
This will ensure that the image fills the viewport entirely, and is algined to the right.
|
||||
|
||||
#### On mobile breakpoint
|
||||
|
||||
Set `object-fit` to `cover` and `object-position` to `left`.
|
||||
|
||||
Using `cover` will ensure the image _fills_ the page and we align it to the left/right for scrolling. Setting the `object-position` to `left` will make sure the image cuts from the right hand side (and vice-versa).
|
||||
|
||||
## Stripe appbar menu
|
||||
|
||||
Example: <https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/components/Appbar.vue>
|
||||
|
||||
Install with yarn:
|
||||
`yarn add vue-stripe-menu`
|
||||
|
||||
Add to `main.js`:
|
||||
|
||||
```javascript
|
||||
import Vue from "Vue";
|
||||
import VueStripeMenu from "vue-stripe-menu";
|
||||
Vue.use(VueStripeMenu);
|
||||
// Import build styles
|
||||
import "vue-stripe-menu/dist/vue-stripe-menu.css";
|
||||
```
|
||||
|
||||
You should create Vue components for the content you want to display on hover.
|
||||
|
||||
To use these in the appbar component, import the components:
|
||||
|
||||
```javascript
|
||||
import Welcome from "./views/stripe-appbar/Welcome";
|
||||
import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
|
||||
```
|
||||
|
||||
Then you should create a menu object in `data`:
|
||||
|
||||
```javascript
|
||||
data() {
|
||||
return {
|
||||
menu: [
|
||||
{
|
||||
title: "Welcome",
|
||||
dropdown: "welcome",
|
||||
content: Welcome,
|
||||
secondary: WelcomeSecondary,
|
||||
element: "span"
|
||||
},
|
||||
{
|
||||
title: "Welcome",
|
||||
dropdown: "welcome",
|
||||
content: Welcome,
|
||||
secondary: WelcomeSecondary
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
Then in the html you should create the appbar layout you need:
|
||||
|
||||
```html
|
||||
<vsm-menu ref="header" :menu="menu" :screen-offset="25">
|
||||
<template #default="data">
|
||||
<component :is="data.item.content" class="content" />
|
||||
<component :is="data.item.secondary" class="content--secondary" />
|
||||
</template>
|
||||
</vsm-menu>
|
||||
```
|
||||
|
||||
The `ref` is so you can refer to the menu object in javascript using `this.$header` later on. The menu prop should point to the list which contains the objects for each component you want to render.
|
||||
|
||||
You can use css to control how the components should be rendered:
|
||||
|
||||
```css
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
.content--secondary {
|
||||
padding: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
To control the width, you should set the `width` in the css in the components themsevles:
|
||||
|
||||
```html
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col style="width: 300px;">
|
||||
Welcome Secondary Content
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
```
|
||||
|
||||
To have two menu content sections top and bottom: use `content` and `secondary`.
|
||||
To have two menu content sections side by side: create the full layout in the Vue component.
|
||||
|
||||
If you just want a link and no component as a dropdown, you should reference a `routerLink` object inside the list's object.
|
||||
|
||||
```javascript
|
||||
{
|
||||
title: "Playground",
|
||||
routerLink: { name: "Playground" }
|
||||
}
|
||||
```
|
||||
|
||||
Then you can use a `<router-link>` component with a `v-if="data.item.routerLink"`:
|
||||
|
||||
```html
|
||||
<template #default="data">
|
||||
<component :is="data.item.content" class="content" />
|
||||
<component :is="data.item.secondary" class="content--secondary" />
|
||||
</template>
|
||||
<template #title="menu" class="ma-0 pa-0">
|
||||
<router-link
|
||||
:to="menu.item.routerLink"
|
||||
v-if="menu.item.routerLink"
|
||||
style="padding-bottom: -20px;"
|
||||
>
|
||||
<p class="ma-0 pa-0 underline routerLink">
|
||||
{{ menu.item.title }}
|
||||
</p>
|
||||
</router-link>
|
||||
</template>
|
||||
```
|
||||
|
||||
Using the title prop controls what text should be rendered for each object's title. We can use an if with a router-link to control whether it should be a link or not.
|
||||
|
||||
To control the scss variables you should create an appbar.scss file in the `./scss/` folder. This file should override the default scss variables of the component.
|
||||
|
||||
<https://github.com/Alexeykhr/vue-stripe-menu/blob/master/src/scss/_variables.scss>
|
||||
|
||||
```scss
|
||||
@import "../scss/_variables.scss";
|
||||
|
||||
$vsm-menu-link-height: 35px !default;
|
||||
$vsm-color: $mainColor !default;
|
||||
$vsm-color-hover: $mainColor !default;
|
||||
$vsm-media: 768px !default;
|
||||
$vsm-menu-border-radius: 15px !default;
|
||||
$vsm-menu-transform-content: 150px !default;
|
||||
|
||||
@import "~vue-stripe-menu/src/scss/index";
|
||||
```
|
||||
|
||||
We can import the default `_variables.scss` to use the font colour variable. Once we have overwritten the variables we should import the default scss file. Then in your `main.js` file you should import this scss file instead:
|
||||
|
||||
```javascript
|
||||
import "./scss/appbar.scss";
|
||||
```
|
||||
|
||||
You can use this file to set the breakpoint width that Vuetify uses. If your appbar changes on sm and below, you can set the `$vsm-media` variable to this pixel viewport.
|
||||
|
||||
To allow the appbar to function in a Vuetify appbar component, you should set the `z-index` in the css of the element:
|
||||
|
||||
```html
|
||||
<v-app-bar
|
||||
flat
|
||||
app
|
||||
hide-on-scroll
|
||||
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
||||
v-if="!this.$store.getters.fullScreen"
|
||||
style="z-index: 15;"
|
||||
></v-app-bar>
|
||||
```
|
||||
|
||||
## Getting sass to talk to javascript
|
||||
|
||||
<https://css-tricks.com/making-sass-talk-to-javascript-with-json/>
|
||||
|
||||
## Using Vuetify Sass variables for dynamic css
|
||||
|
||||
## Using SASS variables for viewport
|
||||
|
||||
Vuetify has SASS variables that you can use in your css blocks.
|
||||
|
||||
<https://vuetifyjs.com/en/customization/sass-variables/>
|
||||
|
||||
To control CSS based on the viewport, you can either set the class dynamically, or you can use SCSS itself.
|
||||
|
||||
You can use `$display-breakpoints` with a `map-get` in the sass to set a css property dynamically (check the documentation for the options that `$display-breakpoints` offers).
|
||||
|
||||
For example, you can apply css to a class based on whether or not the viewport is met:
|
||||
|
||||
```scss
|
||||
img.new-background-image {
|
||||
height: calc(100vh);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -64px;
|
||||
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you want to break on a specific width (say when the background image width is met to align it), you can use a scss variable:
|
||||
|
||||
```scss
|
||||
$background-width: 795px;
|
||||
|
||||
img.new-background-image {
|
||||
height: calc(100vh);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -64px;
|
||||
@media screen and (max-width: $background-width) {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Using custom scss files
|
||||
|
||||
You can use custom scss files to set variables/classes to be used in multiple projects. Create an scss file in `./src/scss` with a leader underscore.
|
||||
|
||||
In this file you can scss as normal. If you're setting scss variables for a custom project remember to import the scss file at the end so your values will be applied.
|
||||
|
||||
### Import scss files
|
||||
|
||||
Use `@import`. Then you can access the variables directly.
|
||||
|
||||
```scss
|
||||
@import "../scss/_variables.scss";
|
||||
```
|
||||
|
||||
## Fontawesome in Vue
|
||||
|
||||
<https://github.com/FortAwesome/vue-fontawesome>
|
||||
|
||||
If using Vuetify you can use the `<v-icon>` component instead and register Fontawesome as a plugin <https://vuetifyjs.com/en/customization/icons/#install-font-awesome-5-icons>
|
||||
|
||||
### Installation
|
||||
|
||||
`yarn add @fortawesome/fontawesome-svg-core`
|
||||
`yarn add @fortawesome/free-solid-svg-icons`
|
||||
`yarn add @fortawesome/vue-fontawesome`
|
||||
`yarn add @fortawesome/free-regular-svg-icons`
|
||||
|
||||
In `main.js` you should import the package:
|
||||
|
||||
```javascript
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
Vue.component("font-awesome-icon", FontAwesomeIcon);
|
||||
```
|
||||
|
||||
Then in any component you should import the library and the icon name you want:
|
||||
|
||||
```javascript
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faSpaceShuttle } from "@fortawesome/free-solid-svg-icons";
|
||||
library.add(faSpaceShuttle);
|
||||
```
|
||||
|
||||
Then in the html you can use the component and pass the `icon` prop:
|
||||
|
||||
```html
|
||||
<font-awesome-icon :icon="['fas', 'space-shuttle']" />
|
||||
```
|
||||
|
||||
## Bootstrap new package
|
||||
|
||||
`npx @vue/cli create base-examples`
|
||||
`vue add vuetify`
|
||||
|
||||
## Rotate image 360 degrees
|
||||
|
||||
Create a css class that defines the animation. This should define what animation, the duration and any additional properties you want to apply to a spin.
|
||||
|
||||
```scss
|
||||
.space-image {
|
||||
animation: spin 30s linear infinite;
|
||||
-webkit-animation: spin 30s linear infinite;
|
||||
-moz-animation: spin 30s linear infinite;
|
||||
}
|
||||
```
|
||||
|
||||
Write the keyframes that specify what the final position should be for a spin animation:
|
||||
|
||||
```scss
|
||||
@-moz-keyframes spin {
|
||||
100% {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Pause on hover
|
||||
|
||||
To pause on hover you can use a css selector:
|
||||
|
||||
```scss
|
||||
.space-image {
|
||||
animation-play-state: running;
|
||||
animation: spin 30s linear infinite;
|
||||
-webkit-animation: spin 30s linear infinite;
|
||||
-moz-animation: spin 30s linear infinite;
|
||||
}
|
||||
|
||||
.space-image:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
```
|
||||
|
||||
### Pause as default, run on hover
|
||||
|
||||
To resume on hover you can simply set the animations state to paused:
|
||||
|
||||
```scss
|
||||
.space-image {
|
||||
animation: spin 40s linear infinite;
|
||||
-webkit-animation: spin 40s linear infinite;
|
||||
-moz-animation: spin 40s linear infinite;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.space-image:hover {
|
||||
-webkit-animation-play-state: paused;
|
||||
-moz-animation-play-state: paused;
|
||||
-o-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
```
|
||||
|
||||
### Height of container
|
||||
|
||||
Because the image is rotating, you need to make sure the container has enough height. A 650px image will need 920px height and width to allow the square image enough room to rotate.
|
||||
|
||||
One way is to set a `.full-screen` sass class that accounts for this:
|
||||
|
||||
```scss
|
||||
.full-screen {
|
||||
min-height: calc(100vh);
|
||||
max-height: 1400px;
|
||||
}
|
||||
```
|
||||
|
||||
Here the max-height is 1400px, which accounts for the height of elements above the image. This will make sure the page has enough height (for rendering a background etc) for the rotation.
|
||||
|
||||
## CSS Selectors
|
||||
|
||||
Some selectors you can use with the `.class-name:selector` syntax:
|
||||
|
||||
```text
|
||||
:hover - when the mouse cursor hovers over the element
|
||||
:focus - which reacts to user input
|
||||
:active - when the element is clicked
|
||||
:target - when a different element is clicked
|
||||
```
|
||||
|
||||
## SVG images in v-img
|
||||
|
||||
If you want to use an svg `<v-img>` you need to set the `aspect-ratio`, `max-height` and `max-width` props. This is because `<v-img>` uses `background-image` to render the underlying image.
|
||||
|
||||
```html
|
||||
<v-img
|
||||
src="../assets/images/space-wheel.svg"
|
||||
aspect-ratio="1"
|
||||
max-height="650px"
|
||||
max-width="650px"
|
||||
class="d-flex align-start justify-start space-image"
|
||||
position="top"
|
||||
></v-img>
|
||||
```
|
||||
|
||||
## SCSS/SASS
|
||||
|
||||
### Getting started guide
|
||||
|
||||
<https://alistapart.com/article/getting-started-with-sass/>
|
||||
|
||||
### Using variables
|
||||
|
||||
<https://stackoverflow.com/questions/17598996/sass-use-variables-across-multiple-files>
|
||||
|
||||
## Dynamic Appbar
|
||||
|
||||
We can set two different appbars which can change on the viewport.
|
||||
|
||||
You should use `<v-row>`, `<v-col>` and `<v-spacer>` inside the `<v-app-bar>`. You can use the helper classes `hidden-sm-and-down` etc to display a row for different viewports.
|
||||
|
||||
Example of a dynamic appbar:
|
||||
<https://git.panaetius.co.uk/web-development/base-examples/src/branch/develop/src/components/Appbar.vue>
|
||||
|
||||
### Subcomponents
|
||||
|
||||
You can use `<v-toolbar-title>` for a title in the appbar:
|
||||
|
||||
```html
|
||||
<v-toolbar-title class="title">
|
||||
<p class="mb-0">Savvy Firebase Tutorial</p>
|
||||
</v-toolbar-title>
|
||||
```
|
||||
|
||||
You can use `<v-app-bar-nav-icon>` for a hamburger button (for mobile layouts):
|
||||
|
||||
```html
|
||||
<v-app-bar-nav-icon class="d-flex"></v-app-bar-nav-icon>
|
||||
```
|
||||
|
||||
## To Do
|
||||
|
||||
Organise these notes!
|
||||
Document all up and move into firebase.md
|
||||
|
||||
Do waves/headers with backgrounds
|
||||
Do a fullscreen blob landing page
|
||||
Do Tailwind layout (moveable side content)
|
||||
Do <https://elements.envato.com/masty-business-html-landing-page-template-WQGEWXK> (using clippath on an image with an overlay colour?)
|
||||
Do Liquidlight (using big headers)
|
||||
Do <https://elements.envato.com/appstorm-app-startup-template-L74LLT> (use 100vh on background image as in playground with transparent appbar)
|
||||
Position a triangle top right as in <https://elements.envato.com/set-of-medical-web-page-design-templates-5RRCL9>
|
||||
And position random blobs as in <https://elements.envato.com/set-of-web-page-design-templates-EHNRLP>
|
||||
More images: <https://elements.envato.com/set-of-medical-web-page-design-templates-VYMDPA>
|
||||
|
||||
Do buttons: <https://www.gatsbyjs.org>
|
||||
|
||||
Doc setting an image as background without transparent appbar
|
||||
Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
|
||||
|
||||
Tomorrow:
|
||||
|
||||
- Finish appbar (modal to popout)
|
||||
12
vue.config.js
Normal file
12
vue.config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
scss: {
|
||||
prependData: `
|
||||
@import "@/scss/_variables.scss";
|
||||
`
|
||||
}
|
||||
}
|
||||
},
|
||||
transpileDependencies: ["vuetify"]
|
||||
};
|
||||
130
yarn.lock
130
yarn.lock
@@ -796,6 +796,37 @@
|
||||
lodash "^4.17.13"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@fortawesome/fontawesome-common-types@^0.2.28":
|
||||
version "0.2.28"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
|
||||
integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
|
||||
|
||||
"@fortawesome/fontawesome-svg-core@^1.2.28":
|
||||
version "1.2.28"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
|
||||
integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.28"
|
||||
|
||||
"@fortawesome/free-regular-svg-icons@^5.13.0":
|
||||
version "5.13.0"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz#925a13d8bdda0678f71551828cac80ab47b8150c"
|
||||
integrity sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.28"
|
||||
|
||||
"@fortawesome/free-solid-svg-icons@^5.13.0":
|
||||
version "5.13.0"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739"
|
||||
integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.28"
|
||||
|
||||
"@fortawesome/vue-fontawesome@^0.1.9":
|
||||
version "0.1.9"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.9.tgz#d3af6d4e50f337327de90447fe35fa1e117a2fbe"
|
||||
integrity sha512-h/emhmZz+DfB2zOGLWawNwXq82UYhn9waTfUjLLmeaIqtnIyNt6kYlpQT/vzJjLZRDRvY2IEJAh1di5qKpKVpA==
|
||||
|
||||
"@hapi/address@2.x.x":
|
||||
version "2.1.4"
|
||||
resolved "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
|
||||
@@ -837,6 +868,11 @@
|
||||
cssnano-preset-default "^4.0.0"
|
||||
postcss "^7.0.0"
|
||||
|
||||
"@mdi/font@^5.1.45":
|
||||
version "5.1.45"
|
||||
resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.1.45.tgz#58edff65985cc5a350eb95ff2974273a285ea9ad"
|
||||
integrity sha512-7H1UMwUpEp8mthdPlpAi7bhEyvTbvtK1TlA89scc0cXMpQy0UFygdkaf+6fveIxpBcRNgw0gnGSEonlsfYocXg==
|
||||
|
||||
"@mrmlnc/readdir-enhanced@^2.2.1":
|
||||
version "2.2.1"
|
||||
resolved "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
|
||||
@@ -1469,6 +1505,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"
|
||||
@@ -2162,6 +2207,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"
|
||||
@@ -3942,7 +3992,7 @@ glob-to-regexp@^0.3.0:
|
||||
resolved "https://registry.npm.taobao.org/glob-to-regexp/download/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
|
||||
integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
|
||||
|
||||
glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
|
||||
glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
|
||||
version "7.1.6"
|
||||
resolved "https://registry.npm.taobao.org/glob/download/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
|
||||
integrity sha1-FB8zuBp8JJLhJVlDB0gMRmeSeKY=
|
||||
@@ -4473,6 +4523,11 @@ internal-ip@^4.3.0:
|
||||
default-gateway "^4.2.0"
|
||||
ipaddr.js "^1.9.0"
|
||||
|
||||
interpret@^1.0.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.npm.taobao.org/interpret/download/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
|
||||
integrity sha1-1QYaYiS+WOgIOYX1AU2EQ1lXYpY=
|
||||
|
||||
invariant@^2.2.2, invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
@@ -5112,7 +5167,7 @@ loader-utils@^0.2.16:
|
||||
json5 "^0.5.0"
|
||||
object-assign "^4.0.1"
|
||||
|
||||
loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
|
||||
loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.npm.taobao.org/loader-utils/download/loader-utils-1.4.0.tgz?cache=0&sync_timestamp=1584445207623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floader-utils%2Fdownload%2Floader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
|
||||
integrity sha1-xXm140yzSxp07cbB+za/o3HVphM=
|
||||
@@ -5144,6 +5199,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"
|
||||
@@ -5164,6 +5224,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"
|
||||
@@ -6847,6 +6912,13 @@ readdirp@~3.3.0:
|
||||
dependencies:
|
||||
picomatch "^2.0.7"
|
||||
|
||||
rechoir@^0.6.2:
|
||||
version "0.6.2"
|
||||
resolved "https://registry.npm.taobao.org/rechoir/download/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
|
||||
integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
|
||||
dependencies:
|
||||
resolve "^1.1.6"
|
||||
|
||||
regenerate-unicode-properties@^8.2.0:
|
||||
version "8.2.0"
|
||||
resolved "https://registry.npm.taobao.org/regenerate-unicode-properties/download/regenerate-unicode-properties-8.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerate-unicode-properties%2Fdownload%2Fregenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
|
||||
@@ -7032,7 +7104,7 @@ resolve-url@^0.2.1:
|
||||
resolved "https://registry.npm.taobao.org/resolve-url/download/resolve-url-0.2.1.tgz?cache=0&sync_timestamp=1585438700247&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve-url%2Fdownload%2Fresolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
|
||||
integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
|
||||
|
||||
resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1:
|
||||
resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1:
|
||||
version "1.16.1"
|
||||
resolved "https://registry.npm.taobao.org/resolve/download/resolve-1.16.1.tgz#49fac5d8bacf1fd53f200fa51247ae736175832c"
|
||||
integrity sha1-SfrF2LrPH9U/IA+lEkeuc2F1gyw=
|
||||
@@ -7229,6 +7301,11 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.3.0:
|
||||
resolved "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1586886225130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
|
||||
integrity sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=
|
||||
|
||||
semver@^7.1.2:
|
||||
version "7.3.2"
|
||||
resolved "https://registry.npm.taobao.org/semver/download/semver-7.3.2.tgz?cache=0&sync_timestamp=1586886225130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
|
||||
integrity sha1-YElisFK4HtB4aq6EOJ/7pw/9OTg=
|
||||
|
||||
send@0.17.1:
|
||||
version "0.17.1"
|
||||
resolved "https://registry.npm.taobao.org/send/download/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
|
||||
@@ -7350,6 +7427,15 @@ shell-quote@^1.6.1:
|
||||
resolved "https://registry.npm.taobao.org/shell-quote/download/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
|
||||
integrity sha1-Z6fQLHbJ2iT5nSCAj8re0ODgS+I=
|
||||
|
||||
shelljs@^0.8.3:
|
||||
version "0.8.3"
|
||||
resolved "https://registry.npm.taobao.org/shelljs/download/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
|
||||
integrity sha1-p/MxlSDr8J7oEnWyNorbKGZZsJc=
|
||||
dependencies:
|
||||
glob "^7.0.0"
|
||||
interpret "^1.0.0"
|
||||
rechoir "^0.6.2"
|
||||
|
||||
signal-exit@^3.0.0, signal-exit@^3.0.2:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
|
||||
@@ -8327,6 +8413,14 @@ vm-browserify@^1.0.1:
|
||||
resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
|
||||
integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
|
||||
|
||||
vue-cli-plugin-vuetify@~2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.npm.taobao.org/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.0.5.tgz#09ba78928653fc7e3801ea37e5120f957413dda4"
|
||||
integrity sha1-Cbp4koZT/H44Aeo35RIPlXQT3aQ=
|
||||
dependencies:
|
||||
semver "^7.1.2"
|
||||
shelljs "^0.8.3"
|
||||
|
||||
vue-eslint-parser@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6"
|
||||
@@ -8355,11 +8449,29 @@ vue-loader@^15.9.1:
|
||||
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.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.1.0.tgz#8e07cc5c310437c699c9a6f2aaf60452b05f64fc"
|
||||
integrity sha512-Ywjim8iuZWgF83iNKFQIFAikF7XhhHAFikXZB/+hfwYFr0GmFWjSJcsVnz9pcSqYNpDTyE+Dp5+FZDWZ4RsvHQ==
|
||||
|
||||
vue-router@^3.1.6:
|
||||
version "3.1.6"
|
||||
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
|
||||
integrity sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k=
|
||||
|
||||
vue-stripe-menu@^1.2.8:
|
||||
version "1.2.8"
|
||||
resolved "https://registry.yarnpkg.com/vue-stripe-menu/-/vue-stripe-menu-1.2.8.tgz#435b992fc4dd519f5711c0d882b32ed7bf883151"
|
||||
integrity sha512-4btZ1/s8+fFGQexcgCMVGoIW6zxUg1jJ+sYgM/gcCYPtrWVMvcHQ2Hx2gBcAQaCat9WD/Hy/ddx2pgzXvljBNg==
|
||||
dependencies:
|
||||
core-js "^3.6.4"
|
||||
vue "^2.6.11"
|
||||
|
||||
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
||||
@@ -8386,6 +8498,18 @@ vue@^2.6.11:
|
||||
resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1587136015566&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
|
||||
integrity sha1-dllNh31LEiNEBuhONSdcbVFBJcU=
|
||||
|
||||
vuetify-loader@^1.3.0:
|
||||
version "1.4.3"
|
||||
resolved "https://registry.npm.taobao.org/vuetify-loader/download/vuetify-loader-1.4.3.tgz#df1323c558be09890877e5fbe817b3a71a6c538d"
|
||||
integrity sha1-3xMjxVi+CYkId+X76BezpxpsU40=
|
||||
dependencies:
|
||||
loader-utils "^1.2.0"
|
||||
|
||||
vuetify@^2.2.11:
|
||||
version "2.2.22"
|
||||
resolved "https://registry.npm.taobao.org/vuetify/download/vuetify-2.2.22.tgz#a5bc5814a16472d719acb45d2cb5fb5605d2e12e"
|
||||
integrity sha1-pbxYFKFkctcZrLRdLLX7VgXS4S4=
|
||||
|
||||
vuex@^3.1.3:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.npm.taobao.org/vuex/download/vuex-3.1.3.tgz?cache=0&sync_timestamp=1584268708627&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.1.3.tgz#f2ad73e3fb73691698b38c93f66e58e267947180"
|
||||
|
||||
Reference in New Issue
Block a user