adding latest

temp.md

@@ -0,0 +1,129 @@
+# 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?