228 lines
6.6 KiB
Markdown
228 lines
6.6 KiB
Markdown
# 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
|
|
|
|
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'
|
|
```
|