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:

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);

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/

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?

3.5 KiB Raw Blame History