From c1eecaafd7c5899749494f5dc5b84fdce9c1ea61 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Wed, 21 Nov 2018 18:05:15 +0000
Subject: [PATCH]

---
 app/ayanova/src/views/login.vue  | 4 ++--
 devdocs/specs/core-ui-design.txt | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/ayanova/src/views/login.vue b/app/ayanova/src/views/login.vue
index b301105e..6d05a426 100644
--- a/app/ayanova/src/views/login.vue
+++ b/app/ayanova/src/views/login.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container fluid>
     <v-layout row wrap="">
-      <v-flex xs12 class="text-xs-center" mt-5>
+      <v-flex xs12 class="text-xs-center" mt-5 ml-5 pl-5>
         <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
       </v-flex>
       <v-flex xs12 sm6 offset-sm3 mt-3>
@@ -26,7 +26,7 @@
                 required
               ></v-text-field>
             </v-flex>
-            <v-flex class="text-xs-center" mt-5>
+            <v-flex class="text-xs-center" mt-1>
               <v-btn color="primary" v-on:click="login()">
                 <v-icon>fa-sign-in-alt</v-icon>
               </v-btn>
diff --git a/devdocs/specs/core-ui-design.txt b/devdocs/specs/core-ui-design.txt
index bd1f992b..b54c44c8 100644
--- a/devdocs/specs/core-ui-design.txt
+++ b/devdocs/specs/core-ui-design.txt
@@ -272,6 +272,10 @@ BREAKPOINTS
 =-=-=-=-=-=
 
 Plan: Layout and design each component for the smallest screen size first, then add more elements to each one as the size increases.
+    - “when in doubt, just remove.” (or place in a menu out of main view)
+    - It makes no sense to target individual devices anymore. Instead, add breakpoints where your design breaks. 
+    If you start with your design for the smallest device and start to drag your browser window wider, when do the lines become too long to read comfortably? 
+    When could you make better use of the screen? That is the point at which to add a Media Query and write some additional CSS.
     - NAV For example a menu can be fully shown as icons in a larger size but might be behind another click in smaller
     - Functionality: figure out what the minimum most important things to show at small size then add more "optional" stuff as it increases
         - Grid: show the Name column first and selector, then add the most relevant columns in order of relevancy