web-development/savvy-firebase
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

merge into: web-development:old-appbar
Branches Tags
web-development:develop web-development:base-template web-development:stripe-appbar web-development:old-appbar
...
pull from: web-development:base-template
Branches Tags
web-development:base-template web-development:stripe-appbar web-development:old-appbar web-development:develop

5 Commits
old-appbar ... base-templ

Author SHA1 Message Date
dtomlinson
a824795cc3 adding latest 2020-04-17 01:18:06 +01:00
dtomlinson
957ffd750d Merge branch 'stripe-appbar' into base-template 2020-04-15 23:28:55 +01:00
dtomlinson
957a504397 adding latest 2020-04-15 23:28:27 +01:00
dtomlinson
70aeed88c1 adding latest 2020-04-15 02:50:31 +01:00
dtomlinson
6c8484420b adding latest 2020-04-14 03:03:20 +01:00
12 changed files with 741 additions and 63 deletions
Expand all files Collapse all files

32
src/App.vue
View File

@@ -3,7 +3,6 @@
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
<v-content>
<Appbar></Appbar>
<!-- <vue-page-transition name="fade-in-right"> -->
<vue-page-transition name="fade">
<router-view></router-view>
</vue-page-transition>
@@ -15,9 +14,31 @@
<script>
import Appbar from "@/components/Appbar";
import Welcome from "./views/stripe-appbar/Welcome";
import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
import Random from "./views/stripe-appbar/Random"
export default {
name: "App",
components: { Appbar }
components: { Appbar },
data() {
return {
menu: [
{
title: "Welcome",
dropdown: "welcome",
content: Welcome,
secondary: WelcomeSecondary,
element: "span"
},
{
title: "Random",
dropdown: "random",
content: Random
}
]
};
}
};
</script>
@@ -26,4 +47,11 @@ export default {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.content {
padding: 20px;
}
.content--secondary {
padding: 20px;
}
</style>

91
src/components/Appbar.vue
View File

@@ -6,56 +6,91 @@
hide-on-scroll
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
v-if="!this.$store.getters.fullScreen"
style="z-index: 15;"
width="100%"
>
<v-row>
<v-row class="hidden-sm-and-down">
<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">
<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"
<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"
>
<p class="mb-0 underline">
Playground
</p>
</router-link>
<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="{ name: 'Backgrounds' }"
class="routerLink ma-0 pr-2"
:to="menu.item.routerLink"
v-if="menu.item.routerLink"
style="padding-bottom: -20px;"
>
<p class="mb-0 underline">
Backgrounds
<p class="ma-0 pa-0 underline routerLink">
{{ menu.item.title }}
</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>
</template>
</vsm-menu>
</v-col>
<v-spacer></v-spacer>
</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>
</div>
</template>
<script>
import Welcome from "../views/stripe-appbar/Welcome";
import WelcomeSecondary from "../views/stripe-appbar/WelcomeSecondary";
import Random from "../views/stripe-appbar/Random";
export default {
name: "Appbar"
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>

86
src/components/AppbarOld.vue Normal file
View 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
View File

@@ -0,0 +1,15 @@
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>

3
src/main.js
View File

@@ -12,7 +12,8 @@ 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 "vue-stripe-menu/dist/vue-stripe-menu.css";
import "./scss/appbar.scss"
Vue.config.productionTip = false;
Vue.component("video-background", VideoBackground);

0
src/scss/variables.scss → src/scss/_variables.scss
View File

10
src/scss/appbar.scss Normal file
View 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";

23
src/views/Playground.vue
View File

@@ -9,7 +9,7 @@
<v-container
fill-height
class="d-flex align-center"
style="position: relative; z-index: 10;"
style="position: static; z-index: 10;"
>
<v-row>
<v-col class="d-flex justify-center">
@@ -77,21 +77,30 @@ export default {
</script>
<style lang="scss" scoped>
$background-width: 795px;
.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;
object-fit: cover;
// object-position: left;
// width: 100%;
// max-width: 100%;
right: 0;
// overflow: hidden;
@media screen and (max-width: $background-width) {
left: 0px;
}
@media #{map-get($display-breakpoints, 'md-and-up')} {
top: -64px;
// left: 50%;
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
top: -56px;
}
}
.background-image {

28
src/views/stripe-appbar/Random.vue Normal file
View 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
View 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
View 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>

466
temp.md
View File

@@ -150,6 +150,452 @@ You can have the appbar be transparent to have a background image fullscreen. To
- 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
@@ -198,10 +644,6 @@ 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)
@@ -209,19 +651,3 @@ 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'
```