From be959db125fd47547a3fa47ca04f5dfc4a52a96e Mon Sep 17 00:00:00 2001
From: dtomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 1 Apr 2020 02:23:40 +0100
Subject: [PATCH] adding latest

---
 firebase.md                                  | 18 ++++++---
 src/components/Appbar.vue                    | 15 -------
 src/router/index.js                          |  6 +++
 src/scss/{_variables.scss => variables.scss} |  3 +-
 src/views/Triangle.vue                       | 42 ++++++++++++++++++++
 src/views/forms/LoginForm.vue                |  3 +-
 6 files changed, 64 insertions(+), 23 deletions(-)
 rename src/scss/{_variables.scss => variables.scss} (98%)
 create mode 100644 src/views/Triangle.vue

diff --git a/firebase.md b/firebase.md
index ed48195..761ced1 100644
--- a/firebase.md
+++ b/firebase.md
@@ -660,11 +660,7 @@ You would refer to this form with `this.$refs.form`.
         "
       >
         <v-icon color="white">
-          {{
-            field.showIconData
-              ? field.appendIconShow
-              : field.appendIconHide
-          }}
+          {{ field.showIconData ? field.appendIconShow : field.appendIconHide }}
         </v-icon>
       </v-btn>
     </div>
@@ -746,3 +742,15 @@ async submit() {
 ```
 
 Here we are checking the validity of the form, and enabling/disabling the loading prop based on whether or not the form is correct.
+
+### Hints
+
+The following is a codepen showing how you can dynamically populate a hint to show if the form is submitted with empty values. This can be useful if don't want to show an error message, but you still want the form to provide feedback on what to fill in.
+
+<https://codepen.io/anon/pen/GeVQLG>
+
+## Triangle backgrounds
+
+### Designs
+
+Dual image: <https://codepen.io/eddyerburgh/pen/EPYVVX>
diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue
index 75b723c..cf5b646 100644
--- a/src/components/Appbar.vue
+++ b/src/components/Appbar.vue
@@ -1,20 +1,5 @@
 <template>
   <div>
-    <!-- <v-app-bar flat color="indigo" app class="hidden-md-and-up">
-      <v-row>
-        <v-col cols="8" class="d-flex justify-start">
-          <v-toolbar-title>
-            Savvy Firebase
-          </v-toolbar-title>
-        </v-col>
-        <v-col cols="4" class="d-flex justify-end">
-          <v-btn color="white">
-            Sign In
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-app-bar> -->
-    <!-- <v-app-bar flat app class="hidden-sm-and-down" color="#EEEEEE"> -->
     <v-app-bar
       flat
       app
diff --git a/src/router/index.js b/src/router/index.js
index 9815694..2829cc8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,6 +30,12 @@ const routes = [
     name: "Hello",
     component: () =>
       import(/* webpackChunkName: "hello" */ "../components/HelloWorld.vue")
+  },
+  {
+    path: "/triangle",
+    name: "Triangle",
+    component: () =>
+      import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue")
   }
 ];
 
diff --git a/src/scss/_variables.scss b/src/scss/variables.scss
similarity index 98%
rename from src/scss/_variables.scss
rename to src/scss/variables.scss
index 34ecc18..16794a4 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/variables.scss
@@ -130,6 +130,8 @@ $Gilroy-BoldItalic: "Gilroy-BoldItalic", sans-serif !default;
   }
 }
 
+$body-font-family: $Gilroy-Regular !important;
+
 // Change default font colour
 
 $mainColor: #323947;
@@ -139,4 +141,3 @@ $mainColor: #323947;
 .theme--light.v-sheet {
   color: $mainColor !important;
 }
-
diff --git a/src/views/Triangle.vue b/src/views/Triangle.vue
new file mode 100644
index 0000000..02ad5fe
--- /dev/null
+++ b/src/views/Triangle.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-container fluid class="pa-0">
+    <v-row class="d-flex newtriangle" style="position: absolute;">
+      <v-col class="d-flex align-center pt-0" style="position: relative;">
+        <h1 class="display" style="position: relative;">Outside In</h1>
+      </v-col>
+    </v-row>
+    <v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
+    <v-row class="d-flex" style="position: relative;">
+      <v-col class="d-flex">
+        <h1 class="display">OutsideOutsides</h1>
+      </v-col>
+    </v-row>
+    <v-row cols="12" class="d-flex">
+      <v-col class="d-flex">
+        <h1 class="display">OutsideOutside</h1>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.newtriangle {
+  width: 100vw;
+  height: 50vh;
+  background-image: radial-gradient(
+    circle farthest-corner at 7.5% 54.1%,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(39, 0, 89, 1) 74.9%
+  );
+  -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+}
+
+h1 {
+  color: white;
+}
+</style>
diff --git a/src/views/forms/LoginForm.vue b/src/views/forms/LoginForm.vue
index cbe8daa..308f129 100644
--- a/src/views/forms/LoginForm.vue
+++ b/src/views/forms/LoginForm.vue
@@ -70,7 +70,6 @@
                 <div class="innerIcon">
                   <v-btn
                     v-if="field.appendIconShow"
-                    flat
                     icon
                     text
                     x-small
@@ -166,7 +165,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../scss/_variables.scss";
+// @import "../../scss/_variables.scss";
 
 .whiteText {
   color: white;