adding latest

firebase.md

@@ -322,6 +322,16 @@ A container should be used whenever you want to use `<v-col>` and `<v-row>`. To
 - `fill-height`
 - `fluid`.
 
+To make content fill the width of the element it is in, you can use the following css:
+
+```css
+.full-width {
+  width: 100%;
+}
+```
+
+`width` sets the element to the percentage of its parent. So to have a textbox fill the width of the v-card element it is in you should set the `<v-card>`, `<v-form>` and `<v-text-field>` to `width: 100%;`. As long as the parent elements have 100%, you can set the text input to be a percentage of this, say 50%.
+
 ## Multi column layouts
 
 An example can be found here:
@@ -513,7 +523,7 @@ You can change the background colour, and the highlight colour (when clicked) wi
 ></v-text-field>
 ```
 
-To change the placeholder colour you should use a custom class that overwrites this colour:
+To change the placeholder (text) colour you should use a custom class that overwrites this colour:
 
 ```css
 .white-placeholder ::v-deep input::placeholder {
@@ -522,7 +532,7 @@ To change the placeholder colour you should use a custom class that overwrites t
 }
 ```
 
-To change the label colour:
+To change the label (text) colour:
 
 ```css
 .white-placeholder ::v-deep .v-label {
@@ -541,3 +551,57 @@ To change the input colour (the text that is typed in by the user) we should use
 ```
 
 We have to use `::v-deep` because we are in a scoped component. Any nested css classes/variables in a scoped component will have a random id attached to them (vue does this dynamically). The `::v-deep` will make sure that the nested css gets the formatting applied. See <https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors> for details.
+
+## Overwriting sass/scss variables
+
+<https://vuetifyjs.com/en/customization/sass-variables/>
+
+Create a `_variables.scss` in `./src/scss`.
+
+If Vuetify is installed through the Vuetify CLI then this `scss` file will be automatically bootstrapped into the App. If you want to write additional sheets then you should edit the `vue.config.js` file and add the following to `module.exports`:
+
+```scss
+module.exports = {
+  css: {
+    loaderOptions: {
+      scss: {
+        prependData: `
+          @import "@/scss/_variables.scss";
+        `
+      }
+    }
+  },
+  transpileDependencies: ["vuetify"]
+};
+```
+
+Overwriting `sass` variables is easy. You need to simply define them in this `_variables.scss` file and they will be used in the main app.
+
+You can find a list of default variables <https://vuetifyjs.com/en/customization/sass-variables/>.
+
+Or you can use the variables defined in the `sass` section of the components api documentation.
+
+## Slots
+
+When using slots in Vuetify find the slot name from the api documentation.
+
+To use a slot, you should create a `<template>` inside the component and pass a `v-slot:$NAME` directive.
+
+For example:
+`<template v-slot:prepend-inner>`
+
+You can also use `#` as a keybinding for `v-slot`:
+`<template #prepend-inner>`
+
+An example of passing a prepend icon to a `<v-text-field>`:
+
+```html
+<template #prepend-inner>
+  <v-icon>
+    mdi-account-circle
+  </v-icon>
+</template>
+```
+
+Expects the v-img component. Scoped props should be applied with
+v-bind="props".

src/components/LoginFull.vue

@@ -4,7 +4,8 @@
     style=" height: 100vh;"
     overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
   >
-  <LoginForm></LoginForm>
+  <!-- <LoginForm class="hidden-xs-only"></LoginForm> -->
+  <LoginForm class=""></LoginForm>
   </video-background>
 </template>
 

src/scss/_variables.scss

@@ -140,5 +140,3 @@ $mainColor: #323947;
   color: $mainColor !important;
 }
 
-$text-field-outlined-fieldset-border: white;
-$btn-font-weight: 1400;

src/views/forms/LoginForm.vue

@@ -1,56 +1,65 @@
 <template>
   <v-container fill-height fluid>
-    <!-- <v-form v-model="valid"> -->
     <v-row>
       <v-spacer></v-spacer>
-      <v-col cols="5" align-self="stretch" class="">
+      <v-col
-        <v-card
+        cols="4"
-          color="rgb(0, 0, 0, 0)"
+        align-self="stretch"
-          flat
+        class="d-flex flex-column justify-space-around align-end"
-          class="d-flex align-end flex-column"
+      >
-          height="150px"
-        >
-          <h1 class="whiteText display-2 font-weight-bold">
-            Savvy Firebase Tutorial
-          </h1>
-          <p class="whiteText mb-0">Log in or create an account.</p>
-        </v-card>
         <v-card
           color="rgb(0, 0, 0, 0)"
           flat
           class="d-flex align-end flex-column"
         >
-          <h1 class="whiteText title">
+          <div class="text-align-right">
-            Getting acquainted with Firebase
+            <h1 class="whiteText title ">
-          </h1>
+              Savvy Firebase Tutorial
-          <p class="whiteText font-regular text-right mb-0">
+            </h1>
-            Additional information can go here, buttons can be added if needed.
+            <p class="whiteText mb-0 mt-2">Log in or create an account.</p>
-            Additional information can go here, buttons can be added if needed.
+          </div>
-          </p>
+        </v-card>
+        <v-card color="rgb(0, 0, 0, 0" flat>
+          <div class="text-align-right">
+            <p class="whiteText mb-0">Don't have an account? Create one.</p>
+          </div>
         </v-card>
-        <!-- </div> -->
-        <!-- </v-card> -->
       </v-col>
-      <v-spacer></v-spacer>
+      <v-col cols="1"></v-col>
-      <v-col cols="5" align-self="center" class="d-flex justify-start">
+      <v-col
+        xs="5"
+        md="3"
+        align-self="center"
+        class="d-flex justify-start flex-column align-start"
+      >
         <v-card
           color="rgb(0, 0, 0, 0)"
           flat
-          class="d-flex align-center flex-column"
+          class="d-flex align-center flex-column full-width"
         >
           <v-icon color="white" size="3em" class="pb-4"
             >mdi-account-circle</v-icon
           >
-          <v-form v-model="valid" class="pt-4 d-flex flex-column align-center">
+          <v-form
+            v-model="valid"
+            class="pt-4 d-flex flex-column align-center full-width"
+          >
             <v-text-field
               v-model="username"
               outlined
               rounded
               placeholder="Username"
               background-color="rgb(100%, 100%, 100%, 10%)"
-              color="rgb(100%, 100%, 100%, 10%)"
+              color="rgb(100%, 100%, 100%, 20%)"
-              class="white-placeholder"
+              class="white-placeholder full-width"
-            ></v-text-field>
+              required
+            >
+              <template #prepend-inner>
+                <v-icon color="white" class="pr-3">
+                  mdi-account-circle
+                </v-icon>
+              </template>
+            </v-text-field>
             <v-text-field
               v-model="password"
               outlined
@@ -58,18 +67,31 @@
               type="password"
               placeholder="Password"
               background-color="rgb(100%, 100%, 100%, 10%)"
-              color="rgb(100%, 100%, 100%, 10%)"
+              color="rgb(100%, 100%, 100%, 20%)"
-              class="white-placeholder"
+              class="white-placeholder full-width"
-            ></v-text-field>
+              required
-            <v-btn depressed color="primary" class="lighten-2">Submit</v-btn>
+            >
+              <template #prepend-inner>
+                <v-icon color="white" class="pr-3">
+                  mdi-lock
+                </v-icon>
+              </template></v-text-field
+            >
+            <v-btn
+              depressed
+              large
+              color="primary"
+              class="lighten-3"
+              :loading="load"
+              @click="submit"
+              >Submit</v-btn
+            >
           </v-form>
           <p class="whiteText mb-0 pt-5">Forgot password?</p>
-          <p class="whiteText display-1">{{ username }}</p>
         </v-card>
       </v-col>
-      <v-spacer></v-spacer>
+      <v-col cols="0" md="3"></v-col>
     </v-row>
-    <!-- </v-form> -->
   </v-container>
 </template>
 
@@ -80,8 +102,18 @@ export default {
     return {
       valid: false,
       username: "",
-      password: ""
+      password: "",
+      load: false
     };
+  },
+  methods: {
+    async submit() {
+      this.load = !this.load;
+      console.log("loading");
+      if (this.$refs.form.validate()) {
+        console.log("Success");
+      }
+    }
   }
 };
 </script>
@@ -93,6 +125,14 @@ export default {
   color: white;
 }
 
+.full-width {
+  width: 100%;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
 .title {
   font-size: 2rem !important;
 }
@@ -115,4 +155,16 @@ export default {
 .v-input__slot:hover {
   border-color: #6fbd44;
 }
+
+.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)
+  > .v-input__control
+  > .v-input__slot:hover {
+  border-width: 1px !important;
+  border-style: solid !important;
+  border-color: #6fbd44 !important;
+}
+
+.align-right {
+  text-align: right;
+}
 </style>

vue.config.js

@@ -1,11 +1,11 @@
 module.exports = {
   css: {
     loaderOptions: {
-      scss: {
+      // scss: {
-        prependData: `
+      //   prependData: `
-          @import "@/scss/_variables.scss";
+      //     @import "@/scss/_variables.scss";
-        `
+      //   `
-      }
+      // }
     }
   },
   transpileDependencies: ["vuetify"]