From f9fa311762299384a0fa2fb30722bd1ab96bf187 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Sat, 23 Mar 2024 19:04:42 -0700
Subject: [PATCH] Add mini models to tech specs and improve styling

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/pages/specs.vue | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/pages/specs.vue b/src/pages/specs.vue
index c317980..8277a26 100644
--- a/src/pages/specs.vue
+++ b/src/pages/specs.vue
@@ -3,7 +3,7 @@
     <f7-navbar :sliding="false" back-link="Back">
       <f7-nav-title sliding>Tech Specs</f7-nav-title>
     </f7-navbar>
-    <f7-block style="display: flex; flex-direction: column; align-items: center;">
+    <f7-block style="display: flex; flex-direction: column; align-items: stretch;">
       <div style="display: flex; flex-direction: column; align-items: center;">
         <f7-block-title medium>Details</f7-block-title>
         <f7-list>
@@ -11,7 +11,8 @@
         </f7-list>
         <f7-block-title medium>Models</f7-block-title>
         <f7-list style="width: 100%;">
-          <f7-list-item title="Thorax" :after="thoraxDetails.version"></f7-list-item>
+          <f7-list-item :class="otherSettings.mini ? 'unused-model' : ''" title="Thorax" :after="thoraxDetails.version"></f7-list-item>
+          <f7-list-item title="Thorax-m" :after="miniThoraxDetails.version"></f7-list-item>
           <f7-list-item title="Abdomen/Pelvis" :after="abdomenDetails.version"></f7-list-item>
           <f7-list-item title="Limbs" :after="limbsDetails.version"></f7-list-item>
           <f7-list-item title="Head/Neck" :after="headneckDetails.version"></f7-list-item>
@@ -21,6 +22,15 @@
   </f7-page>
 </template>
 
+<style>
+  .unused-model {
+    opacity: .75;
+  }
+  .unused-model .item-title {
+    color: var(--f7-list-item-after-text-color)
+  }
+</style>
+
 <script>
   import store from '../js/store'
 
@@ -28,9 +38,10 @@
     data () {
       return {
         thoraxDetails: {},
-        abdomenDetails: { "version": "Model not available" },
-        limbsDetails: { "version": "Model not available" },
-        headneckDetails: { "version": "Model not available" },
+        miniThoraxDetails: {},
+        abdomenDetails: { "version": "N/A" },
+        limbsDetails: { "version": "N/A" },
+        headneckDetails: { "version": "N/A" },
         alvinnVersion: store().getVersion,
         otherSettings: {}
       }
@@ -41,10 +52,15 @@
     created () {
       var loadOtherSettings = localStorage.getItem('otherSettings')
       if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
-      import(`../models/thorax${this.otherSettings.mini ? '-mini' : ''}/descript.json`)
+      import('../models/thorax/descript.json')
         .then((mod) => {
           this.thoraxDetails = mod.default
         })
+      import('../models/thorax-mini/descript.json')
+        .then((mod) => {
+          this.miniThoraxDetails = mod.default
+        })
+      
     },
     methods: {
     }