Compare commits
17 Commits
develop
...
stripe-app
| Author | SHA1 | Date | |
|---|---|---|---|
| 957a504397 | |||
| 70aeed88c1 | |||
| 6c8484420b | |||
| 08b383fdd4 | |||
| ceff5de958 | |||
| 22c8bb8ed1 | |||
| a082bfb4c0 | |||
| fa7308339b | |||
| 7052ade2ab | |||
| 5ad6a640e7 | |||
| 0d52bbd092 | |||
| be959db125 | |||
| 52a1d9fe4a | |||
| 9da6579cba | |||
| 2fb62006b7 | |||
| dfd489480e | |||
| bd1bbc284d |
984
firebase.md
984
firebase.md
File diff suppressed because it is too large
Load Diff
@@ -8,11 +8,14 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"aos": "^3.0.0-beta.6",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
"mime-types": "^2.1.26",
|
"mime-types": "^2.1.26",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
|
"vue-page-transition": "^0.2.2",
|
||||||
"vue-responsive-video-background-player": "^1.0.8",
|
"vue-responsive-video-background-player": "^1.0.8",
|
||||||
"vue-router": "^3.1.5",
|
"vue-router": "^3.1.5",
|
||||||
|
"vue-stripe-menu": "^1.2.8",
|
||||||
"vuetify": "^2.2.11",
|
"vuetify": "^2.2.11",
|
||||||
"vuex": "^3.1.2"
|
"vuex": "^3.1.2"
|
||||||
},
|
},
|
||||||
|
|||||||
45
src/App.vue
45
src/App.vue
@@ -1,14 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<v-app
|
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
|
||||||
:style="{ background: $vuetify.theme.themes.light.background }"
|
|
||||||
class="fontColor"
|
|
||||||
>
|
|
||||||
<v-content>
|
<v-content>
|
||||||
<Appbar></Appbar>
|
<Appbar></Appbar>
|
||||||
<transition name="slide">
|
<vue-page-transition name="fade">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</transition>
|
</vue-page-transition>
|
||||||
<v-row> </v-row>
|
<v-row> </v-row>
|
||||||
</v-content>
|
</v-content>
|
||||||
</v-app>
|
</v-app>
|
||||||
@@ -17,26 +14,44 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Appbar from "@/components/Appbar";
|
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 {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
|
|
||||||
components: { Appbar },
|
components: { Appbar },
|
||||||
|
data() {
|
||||||
data: () => ({
|
return {
|
||||||
video: require("./assets/videos/optical.mp4")
|
menu: [
|
||||||
})
|
{
|
||||||
|
title: "Welcome",
|
||||||
|
dropdown: "welcome",
|
||||||
|
content: Welcome,
|
||||||
|
secondary: WelcomeSecondary,
|
||||||
|
element: "span"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Random",
|
||||||
|
dropdown: "random",
|
||||||
|
content: Random
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app {
|
#app {
|
||||||
font-family: $gilroy, sans-serif, Arial, Helvetica;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fontColor, .theme--light.v-application, .theme--light.v-sheet {
|
.content {
|
||||||
// color: $mainColor !important;
|
padding: 20px;
|
||||||
color: $mainColor !important;
|
}
|
||||||
|
.content--secondary {
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</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-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-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 |
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 |
@@ -1,59 +1,117 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- <v-app-bar flat color="indigo" app class="hidden-md-and-up">
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="8" class="d-flex justify-start">
|
|
||||||
<v-toolbar-title>
|
|
||||||
Savvy Firebase
|
|
||||||
</v-toolbar-title>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="4" class="d-flex justify-end">
|
|
||||||
<v-btn color="white">
|
|
||||||
Sign In
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-app-bar> -->
|
|
||||||
<!-- <v-app-bar flat app class="hidden-sm-and-down" color="#EEEEEE"> -->
|
|
||||||
<v-app-bar
|
<v-app-bar
|
||||||
flat
|
flat
|
||||||
app
|
app
|
||||||
class="hidden-sm-and-down"
|
hide-on-scroll
|
||||||
color="#EEEEEE"
|
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
||||||
v-if="!this.$store.getters.fullScreen"
|
v-if="!this.$store.getters.fullScreen"
|
||||||
|
style="z-index: 15;"
|
||||||
>
|
>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="2"></v-col>
|
<v-spacer></v-spacer>
|
||||||
<v-col cols="4" class="d-flex justify-start">
|
<v-col
|
||||||
<v-toolbar-title class="appTitle">
|
cols="4"
|
||||||
Savvy Firebase Tutorial
|
class="d-flex justify-start align-center align-content-center"
|
||||||
</v-toolbar-title>
|
>
|
||||||
</v-col>
|
<router-link :to="{ name: 'Home' }" class="routerLink">
|
||||||
<v-col cols="4" class="d-flex justify-end align-self-center">
|
<v-toolbar-title class="title">
|
||||||
<router-link :to="{ name: 'Login' }" class="routerLink">
|
<p class="mb-0">Savvy Firebase Tutorial</p>
|
||||||
<span class="mr-3">Sign In</span>
|
</v-toolbar-title>
|
||||||
</router-link>
|
</router-link>
|
||||||
<span class="mr-3">Register</span>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="2"></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="data"
|
||||||
|
class="ma-0 pa-0"
|
||||||
|
style="margin-bottom: -20px;"
|
||||||
|
>
|
||||||
|
<router-link
|
||||||
|
:to="data.item.routerLink"
|
||||||
|
v-if="data.item.routerLink"
|
||||||
|
style="padding-bottom: -20px;"
|
||||||
|
>
|
||||||
|
<p class="ma-0 pa-0 underline routerLink">
|
||||||
|
{{ data.item.title }}
|
||||||
|
</p>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
</vsm-menu>
|
||||||
|
</v-col>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Welcome from "../views/stripe-appbar/Welcome";
|
||||||
|
import WelcomeSecondary from "../views/stripe-appbar/WelcomeSecondary";
|
||||||
|
import Random from "../views/stripe-appbar/Random";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Appbar"
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.appTitle {
|
|
||||||
font-family: $gilroy-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.routerLink {
|
.routerLink {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $mainColor
|
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>
|
</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,151 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-container>
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-img
|
|
||||||
:src="require('../assets/logo.svg')"
|
|
||||||
class="my-3"
|
|
||||||
contain
|
|
||||||
height="200"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col class="mb-4">
|
|
||||||
<h1 class="display-2 font-weight-bold mb-3">
|
|
||||||
Welcome to Vuetify
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="subheading font-weight-regular">
|
|
||||||
For help and collaboration with other Vuetify developers,
|
|
||||||
<br>please join our online
|
|
||||||
<a
|
|
||||||
href="https://community.vuetifyjs.com"
|
|
||||||
target="_blank"
|
|
||||||
>Discord Community</a>
|
|
||||||
</p>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
What's next?
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(next, i) in whatsNext"
|
|
||||||
:key="i"
|
|
||||||
:href="next.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ next.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
Important Links
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(link, i) in importantLinks"
|
|
||||||
:key="i"
|
|
||||||
:href="link.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ link.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
Ecosystem
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(eco, i) in ecosystem"
|
|
||||||
:key="i"
|
|
||||||
:href="eco.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ eco.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
ecosystem: [
|
|
||||||
{
|
|
||||||
text: 'vuetify-loader',
|
|
||||||
href: 'https://github.com/vuetifyjs/vuetify-loader',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'github',
|
|
||||||
href: 'https://github.com/vuetifyjs/vuetify',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'awesome-vuetify',
|
|
||||||
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
importantLinks: [
|
|
||||||
{
|
|
||||||
text: 'Documentation',
|
|
||||||
href: 'https://vuetifyjs.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Chat',
|
|
||||||
href: 'https://community.vuetifyjs.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Made with Vuetify',
|
|
||||||
href: 'https://madewithvuejs.com/vuetify',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Twitter',
|
|
||||||
href: 'https://twitter.com/vuetifyjs',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Articles',
|
|
||||||
href: 'https://medium.com/vuetify',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
whatsNext: [
|
|
||||||
{
|
|
||||||
text: 'Explore components',
|
|
||||||
href: 'https://vuetifyjs.com/components/api-explorer',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Select a layout',
|
|
||||||
href: 'https://vuetifyjs.com/layout/pre-defined',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Frequently Asked Questions',
|
|
||||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -1,14 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<video-background
|
<video-background
|
||||||
:src="video"
|
:src="video"
|
||||||
style=" height: 100vh;"
|
style="height: 100vh;"
|
||||||
overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
|
overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
|
||||||
>
|
>
|
||||||
|
<LoginForm class=""></LoginForm>
|
||||||
</video-background>
|
</video-background>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import LoginForm from "../views/forms/LoginForm";
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
LoginForm,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
video: require("../assets/videos/optical.mp4")
|
video: require("../assets/videos/optical.mp4")
|
||||||
|
|||||||
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>
|
||||||
16
src/main.js
16
src/main.js
@@ -3,12 +3,28 @@ import App from "./App.vue";
|
|||||||
import router from "./router";
|
import router from "./router";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
import vuetify from "./plugins/vuetify";
|
import vuetify from "./plugins/vuetify";
|
||||||
|
// Video Background
|
||||||
import VideoBackground from "vue-responsive-video-background-player";
|
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 "vue-stripe-menu/dist/vue-stripe-menu.css";
|
||||||
|
import "./scss/appbar.scss"
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
Vue.component("video-background", VideoBackground);
|
Vue.component("video-background", VideoBackground);
|
||||||
|
|
||||||
|
Vue.use(VuePageTransition);
|
||||||
|
Vue.use(VueStripeMenu);
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
|
created() {
|
||||||
|
AOS.init();
|
||||||
|
},
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
vuetify,
|
vuetify,
|
||||||
|
|||||||
@@ -11,7 +11,10 @@ export default new Vuetify({
|
|||||||
theme: {
|
theme: {
|
||||||
themes: {
|
themes: {
|
||||||
light: {
|
light: {
|
||||||
background: "#fff"
|
primary: "#051937",
|
||||||
|
secondary: "#374366",
|
||||||
|
accent: "#d4a418",
|
||||||
|
background: "#e8e8e8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,6 +24,30 @@ const routes = [
|
|||||||
name: "Login",
|
name: "Login",
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "login" */ "../components/LoginFull.vue")
|
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")
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -1,27 +1,143 @@
|
|||||||
|
// Import custom fonts
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Gilroy";
|
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");
|
src: url("~@/assets/fonts/Gilroy-Regular.otf") format("opentype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Gilroy-bold";
|
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");
|
src: url("~@/assets/fonts/Gilroy-Bold.otf") format("opentype");
|
||||||
}
|
}
|
||||||
|
|
||||||
$gilroy: "Gilroy", sans-serif !default;
|
@font-face {
|
||||||
$gilroy-bold: "Gilroy-bold", sans-serif !default;
|
font-family: "Gilroy-Black";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-Black.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
@import "../../node_modules/vuetify/src/styles/styles.sass";
|
@font-face {
|
||||||
$body-font-family: $gilroy;
|
font-family: "Gilroy-Italic";
|
||||||
$heading-font-family: $gilroy;
|
src: url("~@/assets/fonts/Gilroy-RegularItalic.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
@import "~vuetify/src/styles/settings/variables";
|
@font-face {
|
||||||
$body-font-family: $gilroy;
|
font-family: "Gilroy-LightItalic";
|
||||||
$heading-font-family: $gilroy;
|
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;
|
$mainColor: #323947;
|
||||||
|
|
||||||
.fontColor, .theme--light.v-application, .theme--light.v-sheet {
|
.theme--light.v-application,
|
||||||
// color: $mainColor !important;
|
.fontColor,
|
||||||
color: red !important;
|
.theme--light.v-sheet {
|
||||||
|
color: $mainColor !important;
|
||||||
}
|
}
|
||||||
|
|||||||
10
src/scss/appbar.scss
Normal file
10
src/scss/appbar.scss
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
@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";
|
||||||
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,11 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<v-container>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col>
|
<v-col>
|
||||||
Hello
|
Hello
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
<v-row>
|
||||||
|
<v-btn color="primary">Hello</v-btn>
|
||||||
|
<v-btn color="secondary">Hello</v-btn>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
109
src/views/Playground.vue
Normal file
109
src/views/Playground.vue
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
<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 justify-end 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>
|
||||||
|
.full-screen {
|
||||||
|
// height: calc(100vh - 64px);
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
}
|
||||||
|
|
||||||
|
img.new-background-image {
|
||||||
|
// height: calc(100vh - 64px);
|
||||||
|
height: calc(100vh);
|
||||||
|
position: absolute;
|
||||||
|
// height: 100%;
|
||||||
|
// width: 1115px;
|
||||||
|
// left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: -64px;
|
||||||
|
// left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
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>
|
||||||
28
src/views/stripe-appbar/Random.vue
Normal file
28
src/views/stripe-appbar/Random.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<v-container style="width: 300px; height: 300px;">
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-card flat>
|
||||||
|
<p class="ma-0 pa-0 headline">Random Content</p>
|
||||||
|
Random content that doesn't fit.
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-card flat>
|
||||||
|
<ul>
|
||||||
|
<li>Item one</li>
|
||||||
|
<li>Item two</li>
|
||||||
|
</ul>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></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>
|
||||||
556
temp.md
Normal file
556
temp.md
Normal file
@@ -0,0 +1,556 @@
|
|||||||
|
# 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;`
|
||||||
|
-
|
||||||
|
|
||||||
|
## To Do
|
||||||
|
|
||||||
|
Image looks good on `left: 50%;`
|
||||||
|
|
||||||
|
Organise these notes!
|
||||||
|
|
||||||
|
Set dynamic navbar content (cols)
|
||||||
|
|
||||||
|
Get image cropping from more than one direction
|
||||||
|
|
||||||
|
Document all up and move into firebase.md
|
||||||
|
|
||||||
|
Do stripe menu
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
|
||||||
|
<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
|
||||||
|
|
||||||
|
Can use dynamic classes with vuetify.
|
||||||
|
|
||||||
|
Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
|
||||||
|
|
||||||
|
56 on small breakpoint
|
||||||
|
64 on medium and up
|
||||||
|
|
||||||
|
List of breakpoints:
|
||||||
|
<https://vuetifyjs.com/en/customization/breakpoints/#breakpoints>
|
||||||
|
|
||||||
|
Small: `600px >< 960px`
|
||||||
|
Medium: `960px >< 1264px`
|
||||||
|
|
||||||
|
When at width of image background, can set to right:0 to crop from left, and left:0 to crop from right.
|
||||||
|
|
||||||
|
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)
|
||||||
|
|
||||||
|
Doc setting an image with transparent appbar
|
||||||
|
Rather than change height you need to set top to negative
|
||||||
|
|
||||||
|
Have examples of both of these to refer back to^
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
## 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;`
|
||||||
|
-
|
||||||
|
|
||||||
|
## To Do
|
||||||
|
|
||||||
|
Image looks good on `left: 50%;`
|
||||||
|
|
||||||
|
Organise these notes!
|
||||||
|
|
||||||
|
Set dynamic navbar content (cols)
|
||||||
|
|
||||||
|
Get image cropping from more than one direction
|
||||||
|
|
||||||
|
Document all up and move into firebase.md
|
||||||
|
|
||||||
|
Do stripe menu
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
|
||||||
|
<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
|
||||||
|
|
||||||
|
Can use dynamic classes with vuetify.
|
||||||
|
|
||||||
|
Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
|
||||||
|
|
||||||
|
56 on small breakpoint
|
||||||
|
64 on medium and up
|
||||||
|
|
||||||
|
List of breakpoints:
|
||||||
|
<https://vuetifyjs.com/en/customization/breakpoints/#breakpoints>
|
||||||
|
|
||||||
|
Small: `600px >< 960px`
|
||||||
|
Medium: `960px >< 1264px`
|
||||||
|
|
||||||
|
When at width of image background, can set to right:0 to crop from left, and left:0 to crop from right.
|
||||||
|
|
||||||
|
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)
|
||||||
|
|
||||||
|
Doc setting an image with transparent appbar
|
||||||
|
Rather than change height you need to set top to negative
|
||||||
|
|
||||||
|
Have examples of both of these to refer back to^
|
||||||
|
|
||||||
|
## Stripe appbar menu
|
||||||
|
|
||||||
|
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="data" class="ma-0 pa-0" style="margin-bottom: -20px;">
|
||||||
|
<router-link
|
||||||
|
:to="data.item.routerLink"
|
||||||
|
v-if="data.item.routerLink"
|
||||||
|
style="padding-bottom: -20px;"
|
||||||
|
>
|
||||||
|
<p class="ma-0 pa-0 underline routerLink">
|
||||||
|
{{ data.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.
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
css: {
|
css: {
|
||||||
loaderOptions: {
|
loaderOptions: {
|
||||||
scss: {
|
// scss: {
|
||||||
prependData: `
|
// prependData: `
|
||||||
@import "@/scss/_variables.scss";
|
// @import "@/scss/_variables.scss";
|
||||||
`
|
// `
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
transpileDependencies: ["vuetify"]
|
transpileDependencies: ["vuetify"]
|
||||||
|
|||||||
37
yarn.lock
37
yarn.lock
@@ -1445,6 +1445,15 @@ anymatch@~3.1.1:
|
|||||||
normalize-path "^3.0.0"
|
normalize-path "^3.0.0"
|
||||||
picomatch "^2.0.4"
|
picomatch "^2.0.4"
|
||||||
|
|
||||||
|
aos@^3.0.0-beta.6:
|
||||||
|
version "3.0.0-beta.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/aos/-/aos-3.0.0-beta.6.tgz#75148e3be4bb1add53f5a1828623bf82b67691e9"
|
||||||
|
integrity sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==
|
||||||
|
dependencies:
|
||||||
|
classlist-polyfill "^1.2.0"
|
||||||
|
lodash.debounce "^4.0.8"
|
||||||
|
lodash.throttle "^4.1.1"
|
||||||
|
|
||||||
aproba@^1.1.1:
|
aproba@^1.1.1:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
resolved "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
|
resolved "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
|
||||||
@@ -2133,6 +2142,11 @@ class-utils@^0.3.5:
|
|||||||
isobject "^3.0.0"
|
isobject "^3.0.0"
|
||||||
static-extend "^0.1.1"
|
static-extend "^0.1.1"
|
||||||
|
|
||||||
|
classlist-polyfill@^1.2.0:
|
||||||
|
version "1.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
|
||||||
|
integrity sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=
|
||||||
|
|
||||||
clean-css@4.2.x:
|
clean-css@4.2.x:
|
||||||
version "4.2.3"
|
version "4.2.3"
|
||||||
resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
|
resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
|
||||||
@@ -4914,6 +4928,11 @@ locate-path@^5.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
p-locate "^4.1.0"
|
p-locate "^4.1.0"
|
||||||
|
|
||||||
|
lodash.debounce@^4.0.8:
|
||||||
|
version "4.0.8"
|
||||||
|
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||||
|
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
|
||||||
|
|
||||||
lodash.defaultsdeep@^4.6.1:
|
lodash.defaultsdeep@^4.6.1:
|
||||||
version "4.6.1"
|
version "4.6.1"
|
||||||
resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
|
resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
|
||||||
@@ -4934,6 +4953,11 @@ lodash.memoize@^4.1.2:
|
|||||||
resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
|
resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
|
||||||
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
|
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
|
||||||
|
|
||||||
|
lodash.throttle@^4.1.1:
|
||||||
|
version "4.1.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
|
||||||
|
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
|
||||||
|
|
||||||
lodash.transform@^4.6.0:
|
lodash.transform@^4.6.0:
|
||||||
version "4.6.0"
|
version "4.6.0"
|
||||||
resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
|
resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
|
||||||
@@ -8020,6 +8044,11 @@ vue-loader@^15.8.3:
|
|||||||
vue-hot-reload-api "^2.3.0"
|
vue-hot-reload-api "^2.3.0"
|
||||||
vue-style-loader "^4.1.0"
|
vue-style-loader "^4.1.0"
|
||||||
|
|
||||||
|
vue-page-transition@^0.2.2:
|
||||||
|
version "0.2.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue-page-transition/-/vue-page-transition-0.2.2.tgz#a7c607ccc8dc67e7c05e66a5a9d54bd27d252d56"
|
||||||
|
integrity sha512-qOx+llJ28XX0VwJNJ4GVaeNBPRmPMZac2QQgrIHVUhpXyJx2CQ2XvoQOpGD1ge7QMY3PjZ6fwTbdBwZkA3I9qA==
|
||||||
|
|
||||||
vue-responsive-video-background-player@^1.0.8:
|
vue-responsive-video-background-player@^1.0.8:
|
||||||
version "1.0.8"
|
version "1.0.8"
|
||||||
resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.0.8.tgz#c0c95b82aa48a13e92f72c6051cc7ec8ff44058d"
|
resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.0.8.tgz#c0c95b82aa48a13e92f72c6051cc7ec8ff44058d"
|
||||||
@@ -8030,6 +8059,14 @@ vue-router@^3.1.5:
|
|||||||
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1584203224109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
|
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1584203224109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
|
||||||
integrity sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k=
|
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:
|
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
|
||||||
version "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"
|
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
||||||
|
|||||||
Reference in New Issue
Block a user