adding latest

firebase.md

@@ -0,0 +1,167 @@
+# Firebase
+
+API documentation (JS): <https://firebase.google.com/docs/reference/js>
+Guides documentation: <https://firebase.google.com/docs/guides>
+
+Handling errors
+
+List of errors: <https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createuserwithemailandpassword>
+
+You can catch the error and use if/else to capture the specific error.
+
+```javascript
+firebase.auth().createUserWithEmailAndPassword(email, password)
+    .catch(function(error) {
+  // Handle Errors here.
+  var errorCode = error.code;
+  var errorMessage = error.message;
+  if (errorCode == 'auth/weak-password') {
+    alert('The password is too weak.');
+  } else {
+    alert(errorMessage);
+  }
+  console.log(error);
+});
+```
+
+Firebase User object:
+<https://firebase.google.com/docs/reference/js/firebase.User>
+
+All properties that it takes/available listed above
+
+## Create new User
+
+Use `firebase.auth().createUserWithEmailAndPassword(email, password)` to create a new user.
+
+Only an email address and password is needed to create a new account. The user itself has a few additional attributes you can attach to it - the `displayName` and the `photoURL` among a few others. You can see all of them in the properties of the user object:
+`https://firebase.google.com/docs/reference/js/firebase.User#properties`
+
+Any additional information you want to store alongside the user should use a firestore. You should have a collecton for users, then each document should be named after the `User.uid` and contain the additional data you want to store.
+
+## Update password/email
+
+The instructions to update a password/email:
+<https://firebase.google.com/docs/auth/web/manage-users#re-authenticate_a_user>
+mention using `reauthenticateWithCredential`. This is only needed if using a 3rd party auth method which returns this credential object. If using native firebase logins then simply forcing the user to resign in is sufficient.
+
+## Adding material icons to Vuetify project
+
+`yarn add @mdi/font -D`
+
+
+## Controlling layouts
+
+### Spacing
+
+<https://vuetifyjs.com/en/styles/spacing/>
+
+You can use helper classes to apply custom margins/padding to elements.
+
+You can apply padding to left: `class="pl-3"`.
+Or apply margin to all: `class="ma-4"`.
+
+You can use this to center objects without using flex:
+`class="mx-auto"`.
+
+### Display helpers
+
+The display helpers allow you to control the dispaly of content. These can be used to hide/show elements based on the current viewport, or the actual display element type.
+
+<https://vuetifyjs.com/en/styles/display/>
+
+### Hide/Display elements for different widths
+
+You can hide specific viewport sizes with:
+<https://vuetifyjs.com/en/styles/display/#visibility>
+
+`d-flex` by default without any size will apply to `xs` and above.
+
+You can make things visible only on one viewport with:
+`class="d-none d-lg-flex d-xl-none"`
+
+You can make things hide only on one viewport with:
+`class="d-lg-none d-xl-flex"`
+
+You can hide multiple by using combinations of the above, or, use the following lateral display helper classes:
+`class="hidden-md-and-up"` and `class="hidden-sm-and-down"`
+
+### flex
+
+Using flex will make the object fill the entire viewport, rather than adhering to the margins/widths by default. There is a lot more to flex - you can make things align left/right, vertical alignment and more:
+<https://vuetifyjs.com/en/styles/flex/#flex>
+
+### cols
+
+In a `<v-row>` you can have many `<v-col>`. You can have as many of these and use the `cols` prop to control how wide the content should be.
+
+```html
+<v-col cols="4" class="appTitle d-flex justify-start">
+    <v-toolbar-title>
+    Savvy Firebase tutorial
+    </v-toolbar-title>
+</v-col>
+```
+
+You can combine this with `d-flex` and justify to control the positioning and alignment:
+
+<https://vuetifyjs.com/en/styles/flex/#flex-justify>
+
+Justify classes include:
+
+- `justify-start`
+- `justify-end`
+- `justify-center`
+- `justify-space-between`
+- `justify-space-around`
+
+Using `cols`, `d-flex` and `justify` you can control precisely how things should be laid out for different screen sizes.
+
+- Use `<v-col>`, use the prop `cols=""` to control how wide it should be.
+- Use `<v-spacer>`, to dynamically fill space.
+- Use `class="d-flex"` and the justify classes.
+- Use `class="d-none d-xl-flex"` to control layouts for different sizes.
+- Use `class="hidden-md-and-up"` to quickly control layouts for different sizes.
+
+### Dual layouts
+
+You can have the same html element for different sizes.
+
+The layout you want for the screen you want to break on should **not** include it.
+
+For example, to break on the medium viewport and have the second layout apply to it:
+
+```html
+<v-app-bar flat color="indigo" app class="hidden-md-and-up"></v-app-bar>
+<v-app-bar flat color="indigo" app class="hidden-sm-and-down"></v-app-bar>
+```
+
+Here the second layout does not include the medium layout, hence the medium layout will apply to it.
+
+
+## App bar
+
+### Gradient as a background colour
+
+The background image to the app bar is provided with a `src` prop.
+
+If you want to apply a fade gradient colour on top of the image, you should use a scoped slot:
+
+```html
+<v-app-bar
+    flat
+    app
+    class="hidden-sm-and-down"
+    src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg"
+>
+    <template v-slot:img="{props}">
+    <v-img
+        v-bind="props"
+        gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
+    ></v-img>
+    </template>
+```
+
+If you want to just use a gradient (no img), then apply a solid colour image and then use a scoped slot with the gradient you want.
+
+
+To do

src/App.vue

@@ -1,13 +1,8 @@
 <template>
-  <v-app>
+  <v-app :style="{ background: $vuetify.theme.themes.light.background }">
     <v-content>
       <Appbar></Appbar>
       <router-view></router-view>
-      <v-container>
-        <v-row>
-          Test
-        </v-row>
-      </v-container>
     </v-content>
   </v-app>
 </template>

src/components/Appbar.vue

@@ -1,29 +1,59 @@
 <template>
-  <v-container>
+  <!-- <v-container class="pb-0"> -->
-    <v-app-bar flat color="indigo" app class="mb-6">
+  <div>
-      <!-- <template v-slot:img="{ props }">
+    <v-app-bar flat color="indigo" app class="hidden-md-and-up">
-        <v-img bind="props"></v-img>
-      </template> -->
       <v-row>
-        <v-col>
+        <v-col cols="8" class="appTitle d-flex justify-start">
-          <v-toolbar-title class="appTitle" d-flex justify-space-around mb-6>
+          <v-toolbar-title>
-            Savvy Firebase tutorial
+            Savvy Firebase
           </v-toolbar-title>
         </v-col>
-        <v-spacer> </v-spacer>
+        <v-col cols="4" class="d-flex justify-end">
-        <v-col cols="2">
           <v-btn color="primary">
             Sign In
           </v-btn>
         </v-col>
-        <!-- <v-btn icon="">
+        <!-- <v-col>
-        <v-icon>
+          <v-btn color="primary">
-          mdi-home
+            Register
-        </v-icon>
+          </v-btn>
-      </v-btn> -->
+        </v-col> -->
       </v-row>
     </v-app-bar>
-  </v-container>
+    <v-app-bar
+      flat
+      app
+      class="hidden-sm-and-down"
+      src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg"
+    >
+      <template v-slot:img="{ props }">
+        <v-img
+          v-bind="props"
+          gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
+        ></v-img>
+      </template>
+      <v-row>
+        <v-col cols="2"></v-col>
+        <v-col cols="4" class="appTitle d-flex justify-start">
+          <v-toolbar-title>
+            Savvy Firebase Tutorial
+          </v-toolbar-title>
+        </v-col>
+        <v-col>
+          <v-spacer> </v-spacer>
+        </v-col>
+        <v-col cols="2">
+          <v-btn color="primary" class="mr-2">
+            Sign In
+          </v-btn>
+          <v-btn color="primary">
+            Register
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-app-bar>
+    <!-- </v-container> -->
+  </div>
 </template>
 
 <script>

src/plugins/vuetify.js

@@ -7,5 +7,12 @@ Vue.use(Vuetify);
 export default new Vuetify({
   icons: {
     iconfont: "mdi"
+  },
+  theme: {
+      themes: {
+          light: {
+              background: "#EEEEEE"
+          }
+      }
   }
 });

src/views/Home.vue

@@ -1,7 +1,9 @@
 <template>
   <v-container>
     <v-row>
+      <v-col>
         Hello
+      </v-col>
     </v-row>
   </v-container>
 </template>