diff --git a/src/pages/detect.vue b/src/pages/detect.vue index 2c2cf87..c331285 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -64,8 +64,8 @@ - - + + @@ -81,8 +81,8 @@ - - + + @@ -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; @@ -209,10 +231,23 @@ border-bottom: 1px solid var(--f7-segmented-raised-divider-color); 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; - height: 100%; + width: 100%; + height: auto; } } diff --git a/src/pages/home.vue b/src/pages/home.vue index 355e7de..35bf475 100644 --- a/src/pages/home.vue +++ b/src/pages/home.vue @@ -8,7 +8,7 @@ A.L.V.I.N.N. -
+

Anatomy Lab Visual Identification Neural Network

Veterinary Anatomy Edition

Select a region to begin

@@ -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); + } }