From ed599aba676d3135049ff158a81ea56c4e44d895 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Tue, 6 Oct 2020 23:03:39 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt    | 17 +++--------------
 ayanova/src/views/login.vue | 25 ++++++++++++-------------
 2 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index a11c88bf..70f73332 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -3,21 +3,10 @@
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
 
-todo: login button can be obscured by footer, this should not happen try forcing margin below, footer maybe has a setting to confine it?
-	move the login button?
-	make sure enter works with it
-
-todo: chrome "Lighthouse" test against devops and implement recommendations
-	particularly favor time to first 
-	change .png to .webp 
-
-
-### SMALL QUICK ITEMS #####
-todo: change logos from png to webp
-	check if webp is supported e2e and on report
-	
 todo: login page seems to fetch both logos even though only one is visible
-	maybe there is a v-show instead of a v-if or something?
+	change login page hasSMallLogo and hasMediumLogo to showSmallLogo and showMediumLogo
+	change check to not only include the check if the logo exists but also a check for current breakpoint
+		this way it can all be in the v-if and not in the class="hidden-md-and-up" check which in fact doesn't prevent the logo from downloading unnecessarily
 
 todo: known issues has some efficiency settings for themes and good stuff to know, check it: https://github.com/vuetifyjs/vuetify/releases/tag/v2.3.0#user-content-known-issues
 todo: new logos too small on large login, add a 3rd (large) size of logo to login form for xl size display
diff --git a/ayanova/src/views/login.vue b/ayanova/src/views/login.vue
index c26c3f23..28589084 100644
--- a/ayanova/src/views/login.vue
+++ b/ayanova/src/views/login.vue
@@ -5,13 +5,13 @@
         <form>
           <v-row>
             <!-- Customer logo -->
-            <v-col v-if="hasSmallLogo" cols="12" class="hidden-md-and-up">
+            <v-col v-if="showCustomSmallLogo()" cols="12">
               <div class="text-center">
                 <img :src="smallLogoUrl" />
               </div>
             </v-col>
 
-            <v-col v-if="hasMediumLogo" cols="7" class="hidden-sm-and-down">
+            <v-col v-if="showCustomMediumLogo()" cols="7">
               <div class="text-center">
                 <img :src="mediumLogoUrl" />
               </div>
@@ -101,7 +101,7 @@
         </form>
       </v-col>
     </v-row>
-    <v-footer color="primary" padless absolute >
+    <v-footer color="primary" padless absolute>
       <div style="text-align: center;" class="mx-auto pa-4 mb-10 mb-sm-1 mt-n8">
         <a
           href="https://ayanova.com"
@@ -318,19 +318,18 @@ export default {
     },
     version() {
       return ayaNovaVersion.version;
-    },
-    showFooterLogo() {
-      if (this.hasSmallLogo && this.$vuetify.breakpoint.smAndDown) {
-        return true;
-      }
-      if (this.hasMediumLogo && this.$vuetify.breakpoint.mdAndUp) {
-        return true;
-      }
-
-      return false;
     }
   },
   methods: {
+    showFooterLogo() {
+      return this.showCustomSmallLogo() || this.showCustomMediumLogo();
+    },
+    showCustomSmallLogo() {
+      return this.hasSmallLogo && this.$vuetify.breakpoint.smAndDown;
+    },
+    showCustomMediumLogo() {
+      return this.hasMediumLogo && this.$vuetify.breakpoint.mdAndUp;
+    },
     trialUserSelected(item) {
       this.input.password = item.p;
       this.input.username = item.l;