Fix image popover and home screen size errors (#60)

Closes: #57

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#60

src/pages/detect.vue

@@ -64,8 +64,8 @@
       </f7-page>
     </f7-panel>
 
-    <f7-popover id="region-popover">
+    <f7-popover id="region-popover" class="popover-button-menu">
-      <f7-segmented raised style="flex-wrap: wrap; flex-direction: column;">
+      <f7-segmented raised class="segment-button-menu">
         <f7-button style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
           <RegionIcon :region="0" />
         </f7-button>
@@ -81,8 +81,8 @@
       </f7-segmented>
     </f7-popover>
 
-    <f7-popover id="capture-popover">
+    <f7-popover id="capture-popover" class="popover-button-menu">
-      <f7-segmented raised style="flex-wrap: wrap; flex-direction: column;">
+      <f7-segmented raised class="segment-button-menu">
         <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" class="disabled" @click="videoStream">
           <SvgIcon icon="videocam"/>
         </f7-button>
@@ -123,6 +123,19 @@
     align-self: stretch;
   }
 
+  .popover-button-menu {
+    max-width: 90vw;
+    max-height: 90vh;
+    width: auto;
+  }
+  
+  .segment-button-menu {
+    flex-wrap: nowrap;
+    flex-direction: column;
+    max-height: 100%;
+    min-height: 0px;
+  }
+
   .chip-media {
     background-color: var(--chip-media-background) !important;
   }
@@ -162,12 +175,21 @@
     flex: 1 1 0%;
   }
 
-  .button > svg {
+  .image-menu > .button > svg {
     aspect-ratio: 1;
     height: auto;
     width: 100%;
   }
 
+  .segment-button-menu .button {
+    padding: 8px;
+    aspect-ratio: 1;
+    width: auto;
+    flex: 1 1 0%;
+    max-height: 100px;
+    max-width: 100px;
+  }
+
   @media (max-height: 450px) and (orientation: landscape) {
     .detect-grid {
       grid-template-columns: minmax(0,1fr) max-content auto;
@@ -210,9 +232,22 @@
       border-bottom-left-radius: 0px !important;
     }
   
+    .segment-button-menu {
+      flex-direction: row;
+      max-height: 100%;
+      min-height: 0px;
+    }
+
+    .segment-button-menu .button {
+      height: auto;
+      flex: 1 1 0%;
+      max-height: 100px;
+      max-width: 100px;
+    }
+
     .button > svg {
-      width:auto;
+      width: 100%;
-      height: 100%;
+      height: auto;
     }
   }
 </style>

src/pages/home.vue

@@ -8,7 +8,7 @@
       <f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title>
     </f7-navbar>
     <!-- Page content-->
-    <div style="display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content min-content 1fr; align-content: stretch; gap: 15px; max-height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top))); height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top)));">
+    <div style="display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content min-content 1fr; align-content: stretch; gap: 15px; min-height: 0px; max-height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top))); height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top)));">
       <h2 style="text-align: center; padding-left: 30px; padding-right: 30px;">Anatomy Lab Visual Identification Neural Network</h2>
       <h4 style="text-align: center; margin: 0;">Veterinary Anatomy Edition</h4>
       <p style="text-align: center; margin: 0;">Select a region to begin</p>
@@ -40,6 +40,7 @@
     gap: 20px 20px;
     margin: 30px;
     margin-top: 0;
+    transform: scale(97%);
   }
 
   .region-button {
@@ -58,7 +59,7 @@
   @media (min-width: 600px) {
     .region-grid {
       grid-template-columns: auto [thorax] auto [abdomen] auto [limbs] auto [headneck] auto auto;
-      grid-template-rows: 1fr;
+      grid-template-rows: minmax(0, 1fr);
     }
 
     .thorax {
@@ -76,6 +77,11 @@
     .headneck {
       grid-column-start: headneck;
     }
+
+    .region-button {
+      width: auto;
+      height: calc(100% - 15px);
+    }
   }
 
 </style>