ayanova/devdocs/todo.txt

@@ -3,11 +3,6 @@
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
 
-todo: login page seems to fetch both logos even though only one is visible
-	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
 todo: is notifynewcount request double sending?  It seems like it appears twice at the same moment in the log

ayanova/src/views/login.vue

@@ -7,7 +7,7 @@
             <!-- Customer logo -->
             <v-col v-if="showCustomSmallLogo()" cols="12">
               <div class="text-center">
-                <img :src="smallLogoUrl" />
+                <img :src="mediumLogoUrl" />
               </div>
             </v-col>
 
@@ -17,8 +17,14 @@
               </div>
             </v-col>
 
+            <v-col v-if="showCustomLargeLogo()" cols="7">
+              <div class="text-center">
+                <img :src="largeLogoUrl" />
+              </div>
+            </v-col>
+
             <!-- Small AyaNova logo -->
-            <v-col cols="12" class="hidden-md-and-up" v-if="!hasSmallLogo">
+            <v-col cols="12" v-if="showSmallBrandLogo()">
               <v-img
                 :src="require('../assets/logo.svg')"
                 contain
@@ -26,12 +32,7 @@
               ></v-img>
             </v-col>
             <!-- Large AyaNova logo. -->
-            <v-col
+            <v-col cols="12" md="7" v-if="showLargeBrandLogo()">
-              cols="12"
-              md="7"
-              class="hidden-sm-and-down"
-              v-if="!hasMediumLogo"
-            >
               <v-img
                 :src="require('../assets/logo.svg')"
                 contain
@@ -132,11 +133,7 @@
           </div>
         </a>
       </div>
-      <div
+      <div v-else style="text-align: center;" class="mx-auto pa-4 mb-1 mb-sm-1">
-        v-else
-        style="text-align: center;"
-        class="mx-auto pa-4 mb-1 mb-sm-1"
-      >
         <a
           href="https://ayanova.com"
           target="_blank"
@@ -173,6 +170,7 @@ export default {
       hasLargeLogo: false,
       smallLogoUrl: null,
       mediumLogoUrl: null,
+      largeLogoUrl: null,
       errorBadCreds: false,
       reveal: false,
       formState: { errorBoxMessage: null },
@@ -299,6 +297,7 @@ export default {
     //debugger;
     vm.smallLogoUrl = window.$gz.api.logoUrl("small");
     vm.mediumLogoUrl = window.$gz.api.logoUrl("medium");
+    vm.largeLogoUrl = window.$gz.api.logoUrl("large");
     //------------------
     //Test ui feedback mechanisms here:
     //this.formState.errorBoxMessage = "This is a test crlf\r\nOnly a test lf\nEot";
@@ -345,13 +344,39 @@ export default {
   },
   methods: {
     showFooterLogo() {
-      return this.showCustomSmallLogo() || this.showCustomMediumLogo();
+      return (
+        this.showCustomSmallLogo() ||
+        this.showCustomMediumLogo() ||
+        this.showCustomLargeLogo()
+      );
+    },
+    showSmallBrandLogo() {
+      return !this.hasSmallLogo && this.$vuetify.breakpoint.smAndDown;
+    },
+    showLargeBrandLogo() {
+      if (this.showSmallBrandLogo()) {
+        return false;
+      }
+      if (this.showCustomSmallLogo()) {
+        return false;
+      }
+      if (this.showCustomMediumLogo()) {
+        return false;
+      }
+      if (this.showCustomLargeLogo()) {
+        return false;
+      }
+      return true;
     },
     showCustomSmallLogo() {
+      //https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service
       return this.hasSmallLogo && this.$vuetify.breakpoint.smAndDown;
     },
     showCustomMediumLogo() {
-      return this.hasMediumLogo && this.$vuetify.breakpoint.mdAndUp;
+      return this.hasMediumLogo && this.$vuetify.breakpoint.mdOnly;
+    },
+    showCustomLargeLogo() {
+      return this.hasLargeLogo && this.$vuetify.breakpoint.lgAndUp;
     },
     trialUserSelected(item) {
       this.input.password = item.p;