Compare commits
5 Commits
old-appbar
...
base-templ
| Author | SHA1 | Date | |
|---|---|---|---|
| a824795cc3 | |||
| 957ffd750d | |||
| 957a504397 | |||
| 70aeed88c1 | |||
| 6c8484420b |
32
src/App.vue
32
src/App.vue
@@ -3,7 +3,6 @@
|
|||||||
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
|
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
|
||||||
<v-content>
|
<v-content>
|
||||||
<Appbar></Appbar>
|
<Appbar></Appbar>
|
||||||
<!-- <vue-page-transition name="fade-in-right"> -->
|
|
||||||
<vue-page-transition name="fade">
|
<vue-page-transition name="fade">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</vue-page-transition>
|
</vue-page-transition>
|
||||||
@@ -15,9 +14,31 @@
|
|||||||
|
|
||||||
<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() {
|
||||||
|
return {
|
||||||
|
menu: [
|
||||||
|
{
|
||||||
|
title: "Welcome",
|
||||||
|
dropdown: "welcome",
|
||||||
|
content: Welcome,
|
||||||
|
secondary: WelcomeSecondary,
|
||||||
|
element: "span"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Random",
|
||||||
|
dropdown: "random",
|
||||||
|
content: Random
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -26,4 +47,11 @@ export default {
|
|||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.content--secondary {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -6,56 +6,91 @@
|
|||||||
hide-on-scroll
|
hide-on-scroll
|
||||||
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
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;"
|
||||||
|
width="100%"
|
||||||
>
|
>
|
||||||
<v-row>
|
<v-row class="hidden-sm-and-down">
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-col cols="4" class="d-flex justify-start align-content-center">
|
<v-col
|
||||||
|
cols="4"
|
||||||
|
class="d-flex justify-start align-center align-content-center"
|
||||||
|
>
|
||||||
<router-link :to="{ name: 'Home' }" class="routerLink">
|
<router-link :to="{ name: 'Home' }" class="routerLink">
|
||||||
<v-toolbar-title class="title">
|
<v-toolbar-title class="title">
|
||||||
<p class="mb-0">Savvy Firebase Tutorial</p>
|
<p class="mb-0">Savvy Firebase Tutorial</p>
|
||||||
</v-toolbar-title>
|
</v-toolbar-title>
|
||||||
</router-link>
|
</router-link>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4" class="d-flex justify-end align-self-center">
|
<v-col cols="4" class="d-flex justify-end align-center">
|
||||||
<router-link
|
<vsm-menu
|
||||||
:to="{ name: 'Playground' }"
|
ref="header"
|
||||||
class="routerLink ma-0 pr-2"
|
:menu="menu"
|
||||||
|
:screen-offset="25"
|
||||||
|
:base-width="380"
|
||||||
|
:base-height="400"
|
||||||
>
|
>
|
||||||
<p class="mb-0 underline">
|
<template #default="data">
|
||||||
Playground
|
<component :is="data.item.content" class="content" />
|
||||||
</p>
|
<component :is="data.item.secondary" class="content--secondary" />
|
||||||
</router-link>
|
</template>
|
||||||
|
<template #title="menu" class="ma-0 pa-0">
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'Backgrounds' }"
|
:to="menu.item.routerLink"
|
||||||
class="routerLink ma-0 pr-2"
|
v-if="menu.item.routerLink"
|
||||||
|
style="padding-bottom: -20px;"
|
||||||
>
|
>
|
||||||
<p class="mb-0 underline">
|
<p class="ma-0 pa-0 underline routerLink">
|
||||||
Backgrounds
|
{{ menu.item.title }}
|
||||||
</p>
|
</p>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
|
</template>
|
||||||
<p class="mb-0 underline">
|
</vsm-menu>
|
||||||
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-col>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
<v-row class="hidden-md-and-up">
|
||||||
|
<v-app-bar-nav-icon class="d-flex"></v-app-bar-nav-icon>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-toolbar-title class="title d-flex justify-end align-center">
|
||||||
|
<p class="mb-0">Savvy Firebase Tutorial</p>
|
||||||
|
</v-toolbar-title>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|||||||
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>
|
||||||
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>
|
||||||
@@ -12,7 +12,8 @@ import AOS from "aos";
|
|||||||
import "aos/dist/aos.css";
|
import "aos/dist/aos.css";
|
||||||
// Stripe Appbar Menu
|
// Stripe Appbar Menu
|
||||||
import VueStripeMenu from "vue-stripe-menu";
|
import VueStripeMenu from "vue-stripe-menu";
|
||||||
import "vue-stripe-menu/dist/vue-stripe-menu.css";
|
// 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);
|
||||||
|
|||||||
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";
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
<v-container
|
<v-container
|
||||||
fill-height
|
fill-height
|
||||||
class="d-flex align-center"
|
class="d-flex align-center"
|
||||||
style="position: relative; z-index: 10;"
|
style="position: static; z-index: 10;"
|
||||||
>
|
>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col class="d-flex justify-center">
|
<v-col class="d-flex justify-center">
|
||||||
@@ -77,21 +77,30 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
$background-width: 795px;
|
||||||
|
|
||||||
.full-screen {
|
.full-screen {
|
||||||
// height: calc(100vh - 64px);
|
|
||||||
height: calc(100vh - 64px);
|
height: calc(100vh - 64px);
|
||||||
}
|
}
|
||||||
|
|
||||||
img.new-background-image {
|
img.new-background-image {
|
||||||
// height: calc(100vh - 64px);
|
|
||||||
height: calc(100vh);
|
height: calc(100vh);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// height: 100%;
|
object-fit: cover;
|
||||||
// width: 1115px;
|
// object-position: left;
|
||||||
// left: 0;
|
// width: 100%;
|
||||||
|
// max-width: 100%;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
// overflow: hidden;
|
||||||
|
@media screen and (max-width: $background-width) {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
||||||
top: -64px;
|
top: -64px;
|
||||||
// left: 50%;
|
}
|
||||||
|
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||||
|
top: -56px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-image {
|
.background-image {
|
||||||
|
|||||||
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>
|
||||||
470
temp.md
470
temp.md
@@ -150,6 +150,452 @@ You can have the appbar be transparent to have a background image fullscreen. To
|
|||||||
- with `position: absolute;`
|
- 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.
|
||||||
|
|
||||||
|
## Fullscreen image as a background
|
||||||
|
|
||||||
|
### 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 height to match that of dynamic appbar
|
||||||
|
|
||||||
|
### 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 adjust the `top` css property to account for this:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
img.new-background-image {
|
||||||
|
height: calc(100vh);
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
@media screen and (max-width: $background-width) {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
||||||
|
top: -64px;
|
||||||
|
}
|
||||||
|
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||||
|
top: -56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## To Do
|
## To Do
|
||||||
|
|
||||||
@@ -198,30 +644,10 @@ 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.
|
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
|
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)
|
Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
|
||||||
|
|
||||||
Doc setting an image with transparent appbar
|
Doc setting an image with transparent appbar
|
||||||
Rather than change height you need to set top to negative
|
Rather than change height you need to set top to negative
|
||||||
|
|
||||||
Have examples of both of these to refer back to^
|
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'
|
|
||||||
```
|
|
||||||
|
|||||||
Reference in New Issue
Block a user