adding latest

src/components/Appbar.vue

@@ -7,8 +7,9 @@
       color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
       v-if="!this.$store.getters.fullScreen"
       style="z-index: 15;"
+      width="100%"
     >
-      <v-row>
+      <v-row class="hidden-sm-and-down">
         <v-spacer></v-spacer>
         <v-col
           cols="4"
@@ -32,18 +33,14 @@
               <component :is="data.item.content" class="content" />
               <component :is="data.item.secondary" class="content--secondary" />
             </template>
-            <template
+            <template #title="menu" class="ma-0 pa-0">
-              #title="data"
-              class="ma-0 pa-0"
-              style="margin-bottom: -20px;"
-            >
               <router-link
-                :to="data.item.routerLink"
+                :to="menu.item.routerLink"
-                v-if="data.item.routerLink"
+                v-if="menu.item.routerLink"
                 style="padding-bottom: -20px;"
               >
                 <p class="ma-0 pa-0 underline routerLink">
-                  {{ data.item.title }}
+                  {{ menu.item.title }}
                 </p>
               </router-link>
             </template>
@@ -51,6 +48,13 @@
         </v-col>
         <v-spacer></v-spacer>
       </v-row>
+      <v-row class="hidden-md-and-up">
+        <v-app-bar-nav-icon class="d-flex"></v-app-bar-nav-icon>
+        <v-spacer></v-spacer>
+        <v-toolbar-title class="title d-flex justify-end align-center">
+          <p class="mb-0">Savvy Firebase Tutorial</p>
+        </v-toolbar-title>
+      </v-row>
     </v-app-bar>
   </div>
 </template>

src/views/Playground.vue

@@ -77,21 +77,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$background-width: 795px;
+
 .full-screen {
-  // height: calc(100vh - 64px);
   height: calc(100vh - 64px);
 }
 
 img.new-background-image {
-  // height: calc(100vh - 64px);
   height: calc(100vh);
   position: absolute;
-  // height: 100%;
+  object-fit: cover;
-  // width: 1115px;
+  // object-position: left;
-  // left: 0;
+  // width: 100%;
+  // max-width: 100%;
   right: 0;
+  // overflow: hidden;
+  @media screen and (max-width: $background-width) {
+    left: 0px;
+  }
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
     top: -64px;
-  // left: 50%;
+  }
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    top: -56px;
+  }
 }
 
 .background-image {

temp.md

@@ -349,71 +349,54 @@ Use `max-height` to the value you want the image to be
 
 Open the EPS file in Graphic. Hide and delete all the layers you don't need. When finished, create a new canvas and copy and paste the images to it. Position it accordingly and resize everything. Export as svg and edit the svg to remove the height and width.
 
-## Transparent appbar
+## Fullscreen image as a background
 
-You can have the appbar be transparent to have a background image fullscreen. To do this you should:
+### Transparent appbar
 
-- Set an image
+You can have the appbar be transparent to have a background image fullscreen.
-  - with `position: absolute;`
-  -
 
-## To Do
+```html
+<v-app-bar
+  flat
+  app
+  hide-on-scroll
+  color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
+  v-if="!this.$store.getters.fullScreen"
+  style="z-index: 15;"
+></v-app-bar>
+```
 
-Image looks good on `left: 50%;`
+### Adjust image height to match that of dynamic appbar
 
-Organise these notes!
+### Using CSS media queries for dynamic classes
 
-Set dynamic navbar content (cols)
+The appbar will adjust its own height based on the viewport.
 
-Get image cropping from more than one direction
+On medium and above it will be 64px, on small and below it will be 56px.
 
-Document all up and move into firebase.md
+On the image itself you should adjust the `top` css property to account for this:
 
-Do stripe menu
+```scss
-
+img.new-background-image {
-Do waves/headers with backgrounds
+  height: calc(100vh);
-Do a fullscreen blob landing page
+  position: absolute;
-Do Tailwind layout (moveable side content)
+  right: 0;
-Do <https://elements.envato.com/masty-business-html-landing-page-template-WQGEWXK> (using clippath on an image with an overlay colour?)
+  @media screen and (max-width: $background-width) {
-Do Liquidlight (using big headers)
+    left: 0px;
-Do <https://elements.envato.com/appstorm-app-startup-template-L74LLT> (use 100vh on background image as in playground with transparent appbar)
+  }
-
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
-Position a triangle top right as in <https://elements.envato.com/set-of-medical-web-page-design-templates-5RRCL9>
+    top: -64px;
-
+  }
-And position random blobs as in <https://elements.envato.com/set-of-web-page-design-templates-EHNRLP>
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
-
+    top: -56px;
-More images: <https://elements.envato.com/set-of-medical-web-page-design-templates-VYMDPA>
+  }
-
+}
-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.
-
-Doc setting an image as background without transparent appbar
-Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
-
-Doc setting an image with transparent appbar
-Rather than change height you need to set top to negative
-
-Have examples of both of these to refer back to^
 
 ## Stripe appbar menu
 
+Example: <https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/components/Appbar.vue>
+
 Install with yarn:
 `yarn add vue-stripe-menu`
 
@@ -515,14 +498,14 @@ Then you can use a `<router-link>` component with a `v-if="data.item.routerLink"
   <component :is="data.item.content" class="content" />
   <component :is="data.item.secondary" class="content--secondary" />
 </template>
-<template #title="data" class="ma-0 pa-0" style="margin-bottom: -20px;">
+<template #title="menu" class="ma-0 pa-0">
   <router-link
-    :to="data.item.routerLink"
+    :to="menu.item.routerLink"
-    v-if="data.item.routerLink"
+    v-if="menu.item.routerLink"
     style="padding-bottom: -20px;"
   >
     <p class="ma-0 pa-0 underline routerLink">
-      {{ data.item.title }}
+      {{ menu.item.title }}
     </p>
   </router-link>
 </template>
@@ -554,3 +537,117 @@ import "./scss/appbar.scss";
 ```
 
 You can use this file to set the breakpoint width that Vuetify uses. If your appbar changes on sm and below, you can set the `$vsm-media` variable to this pixel viewport.
+
+To allow the appbar to function in a Vuetify appbar component, you should set the `z-index` in the css of the element:
+
+```html
+<v-app-bar
+  flat
+  app
+  hide-on-scroll
+  color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
+  v-if="!this.$store.getters.fullScreen"
+  style="z-index: 15;"
+></v-app-bar>
+```
+
+## Getting sass to talk to javascript
+
+<https://css-tricks.com/making-sass-talk-to-javascript-with-json/>
+
+## Using Vuetify Sass variables for dynamic css
+
+## Using SASS variables for viewport
+
+Vuetify has SASS variables that you can use in your css blocks.
+
+<https://vuetifyjs.com/en/customization/sass-variables/>
+
+To control CSS based on the viewport, you can either set the class dynamically, or you can use SCSS itself.
+
+You can use `$display-breakpoints` with a `map-get` in the sass to set a css property dynamically (check the documentation for the options that `$display-breakpoints` offers).
+
+For example, you can apply css to a class based on whether or not the viewport is met:
+
+```scss
+img.new-background-image {
+  height: calc(100vh);
+  position: absolute;
+  right: 0;
+  top: -64px;
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    left: 0px;
+  }
+}
+```
+
+If you want to break on a specific width (say when the background image width is met to align it), you can use a scss variable:
+
+```scss
+$background-width: 795px;
+
+img.new-background-image {
+  height: calc(100vh);
+  position: absolute;
+  right: 0;
+  top: -64px;
+  @media screen and (max-width: $background-width) {
+    left: 0px;
+  }
+}
+```
+
+## 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 <https://elements.envato.com/masty-business-html-landing-page-template-WQGEWXK> (using clippath on an image with an overlay colour?)
+Do Liquidlight (using big headers)
+Do <https://elements.envato.com/appstorm-app-startup-template-L74LLT> (use 100vh on background image as in playground with transparent appbar)
+
+Position a triangle top right as in <https://elements.envato.com/set-of-medical-web-page-design-templates-5RRCL9>
+
+And position random blobs as in <https://elements.envato.com/set-of-web-page-design-templates-EHNRLP>
+
+More images: <https://elements.envato.com/set-of-medical-web-page-design-templates-VYMDPA>
+
+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.
+
+Doc setting an image as background without transparent appbar
+Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
+
+Doc setting an image with transparent appbar
+Rather than change height you need to set top to negative
+
+Have examples of both of these to refer back to^