130 lines
3.5 KiB
Markdown
130 lines
3.5 KiB
Markdown
# Temp notes
|
|
|
|
## React to height change
|
|
|
|
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);`
|
|
|
|
## 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/>
|
|
|
|
## Images that autoscale (zoom)
|
|
|
|
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
|
|
|
|
## To Do
|
|
|
|
Organise these notes!
|
|
|
|
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 Liquidlight (using big headers)
|
|
|
|
Do buttons: <https://www.gatsbyjs.org>
|
|
|
|
|
|
|
|
Use media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
|
|
|
|
Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
|