# 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?