From 0cc9ad385f0dcd1621cf9842d76fded4bf55600f Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Wed, 29 Nov 2023 20:52:35 -0700
Subject: [PATCH] Fix image size in landscape and version in panel (#24)

Closes #22 and also fixes unlisted issue with the display of the placeholder image on the detect screen when in landscape mode.

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

Reviewed-on: https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/pulls/24
---
 src/components/app.vue | 10 ++++++++++
 src/pages/detect.vue   |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/app.vue b/src/components/app.vue
index a417675..58f95b8 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -10,6 +10,9 @@
           <f7-list-item link="/settings/" view=".view-main" panel-close=".panel-left">Settings</f7-list-item>
           <f7-list-item link="/about/">About ALVINN</f7-list-item>
         </f7-list>
+        <f7-toolbar class="panel-bar" position="bottom">
+          <span>version 0.1.1</span>
+        </f7-toolbar>
       </f7-page>
     </f7-view>
   </f7-panel>
@@ -37,6 +40,13 @@
 
   </f7-app>
 </template>
+
+<style>
+  .panel-bar > .toolbar-inner {
+    justify-content: center;
+  }
+</style>
+
 <script>
   import { ref, onMounted } from 'vue';
   import { f7, f7ready } from 'framework7-vue';
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 772c9ed..149f75e 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -25,7 +25,7 @@
         <f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
           <img src="../assets/icons/visibility.svg" />
         </f7-button>
-        <f7-button @click="setData">
+        <f7-button class="disabled" @click="setData">
           <img src="../assets/icons/videocam.svg" />
         </f7-button>
       </f7-segmented>
@@ -121,7 +121,7 @@
       grid-template-rows: calc(100vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - 64px);
       grid-template-areas: 
         "image-view result-view menu-view";
-      justify-items: center;
+      justify-items: stretch;
       align-items: stretch;
       height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
       max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));