8.6 KiB
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:
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:
<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.
.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:
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:
<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/
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)
- with
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;
- with
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:
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:
import Welcome from "./views/stripe-appbar/Welcome";
import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
Then you should create a menu object in data:
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:
<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>
You can use css to control how the components should be rendered:
.content {
padding: 20px;
}
.content--secondary {
padding: 20px;
}
To control the width, you should set the width in the css in the components themsevles:
<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.
<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>
Tried inserting the appbar natively into App.vue not as a component
Doesn't seem to like it when you move mouse into a <router-view>
Try: Inserting appbar into each page component.
Doesn't like d-flex on the parent
Doesn't like anything before (use slots?)
Likes being in a <v-row>