adding latest

src/views/Playground.vue

@@ -50,13 +50,14 @@ export default {
   created() {
     window.addEventListener("resize", this.updateHeight);
     window.addEventListener("resize", this.updateWidth);
+    this.querySelectorsPlayground();
   },
   destroyed() {
     window.removeEventListener("resize", this.updateHeight);
     window.addEventListener("resize", this.updateWidth);
   },
   mounted() {
-    this.getBackgroundWidth();
+    // this.getBackgroundWidth();
   },
   methods: {
     updateHeight() {
@@ -68,6 +69,9 @@ export default {
     getBackgroundWidth() {
       var background = document.querySelector("#backgroundsvg");
       this.backgroundWidth = background.clientWidth;
+    },
+    querySelectorsPlayground() {
+      console.log(document.images);
     }
   }
 };
@@ -78,17 +82,13 @@ export default {
   height: calc(100vh - 64px);
 }
 
-.image-wrapper {
-  overflow: hidden;
-}
-
 img.new-background-image {
   max-height: calc(100vh - 64px);
   position: absolute;
   height: 100%;
   max-width: 1115px;
-  right: 0;
+  // right: 0;
-  // left: 500px;
+  left: 50%;
 }
 
 .background-image {

temp.md

@@ -2,6 +2,8 @@
 
 ## 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>
@@ -61,6 +63,22 @@ Opera:
 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.
@@ -98,6 +116,11 @@ Cropping images with `object-fit: cover;`
 
 ## 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
@@ -107,8 +130,12 @@ 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
@@ -122,8 +149,20 @@ 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.
-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?
+
+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.