savvy-firebase/temp.md

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/

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)

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

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 Liquidlight (using big headers)

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.