polished itemapprovalpage

photobooth-app · Apr 20, 2024 · 9c1d461 · 9c1d461
1 parent 237189a
commit 9c1d461
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 36 deletions.
diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
@@ -183,4 +183,3 @@ export default defineComponent({
   },
 });
 </script>
-src/boot/fetch_api.js
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
@@ -230,4 +230,3 @@ export default defineComponent({
   },
 });
 </script>
-src/boot/fetch_api.js
diff --git a/src/pages/ItemApprovalPage.vue b/src/pages/ItemApprovalPage.vue
@@ -1,39 +1,37 @@
 <template>
-  <q-page class="flex flex-center">
-    <q-card id="item-approval-container" style="height: 95vh">
-      <q-card-section align="center">
-        <div class="text-h6">{{ $t('TITLE_ITEM_APPROVAL') }}</div>
-        <div class="text-subtitle1">
-          {{
-            $t('MSG_APPROVE_COLLAGE_ITEM_NO_OF_TOTAL', { no: stateStore.number_captures_taken, total: stateStore.total_captures_to_take })
-          }}
-        </div>
-      </q-card-section>
+  <q-page class="fullscreen flex flex-center">
+    <q-img :src="imgToApproveSrc" fit="contain" style="height: 95%" />
+    <!-- video approval not yet supported -->
 
-      <q-card-section class="">
-        <q-img class="rounded-borders" :src="imgToApproveSrc" />
-        <!-- video approval not yet supported -->
-      </q-card-section>
+    <q-page-sticky position="bottom" :offset="[0, 25]">
+      <q-banner rounded inline-actions>
+        <div>
+          <div class="text-h5">{{ $t('TITLE_ITEM_APPROVAL') }}</div>
+          <div class="text-subtitle2">
+            {{ $t('MSG_APPROVE_COLLAGE_ITEM_NO_OF_TOTAL', { no: stateStore.number_captures_taken, total: stateStore.total_captures_to_take }) }}
+          </div>
+        </div>
 
-      <q-card-actions id="item-approval-actions" align="around">
-        <q-btn id="item-approval-button-reject" color="negative" no-caps class="" @click="userReject()">
-          <q-icon left size="7em" name="thumb_down" />
-          <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_RETRY') }}</div>
-        </q-btn>
+        <template #action>
+          <q-btn id="item-approval-button-reject" color="negative" no-caps class="" @click="userReject()">
+            <q-icon left size="xl" name="thumb_down" />
+            <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_RETRY') }}</div>
+          </q-btn>
 
-        <q-btn id="item-approval-button-abort" flat color="grey" no-caps class="" @click="userAbort()">
-          <q-icon left size="7em" name="cancel" />
-          <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_CANCEL_COLLAGE') }}</div>
-        </q-btn>
+          <q-btn id="item-approval-button-abort" flat color="grey" no-caps class="" @click="userAbort()">
+            <q-icon left size="xl" name="cancel" />
+            <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_CANCEL_COLLAGE') }}</div>
+          </q-btn>
 
-        <q-btn id="item-approval-button-approve" color="positive" no-caps @click="userConfirm()">
-          <q-icon left size="7em" name="thumb_up" />
-          <div>
-            <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_APPROVE') }}</div>
-          </div>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
+          <q-btn id="item-approval-button-approve" color="positive" no-caps @click="userConfirm()">
+            <q-icon left size="xl" name="thumb_up" />
+            <div>
+              <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_APPROVE') }}</div>
+            </div>
+          </q-btn>
+        </template>
+      </q-banner>
+    </q-page-sticky>
   </q-page>
 </template>
 
@@ -97,4 +95,3 @@ export default {
   },
 };
 </script>
-src/boot/fetch_api.js
diff --git a/src/pages/ItemPresenterPage.vue b/src/pages/ItemPresenterPage.vue
@@ -49,4 +49,3 @@ export default {
   },
 };
 </script>
-src/boot/fetch_api.js
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
@@ -203,4 +203,3 @@ export default defineComponent({
   },
 });
 </script>
-src/boot/fetch_api.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -183,4 +183,3 @@ export default defineComponent({ @@
       },
     });
     </script>
-    src/boot/fetch_api.js