change the X and picture button so that landscape is all functional (if not great-looking)

src/components/GiftedPhotoDialog.vue

@@ -1,15 +1,13 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
-    <!-- Breadcrumb -->
     <div class="dialog">
-      <!-- Back -->
       <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
+        <div
+          class="text-lg text-center px-2 py-1 absolute -right-2 top-6 z-10"
           @click="close()"
         >
           <fa icon="xmark" class="fa-fw"></fa>
-        </h1>
+        </div>
       </div>
 
       <!-- Heading -->
@@ -30,6 +28,7 @@
           >
             <span>Upload</span>
           </button>
+          <!-- TODO remove, this and console.logs -->
           <!--{{ imageHeight }} {{ imageWidth }} {{ imageWarning }}-->
           <button
             @click="retryImage"
@@ -38,20 +37,17 @@
             <span>Retry</span>
           </button>
         </div>
-        <div
-          :style="'height: ' + imageHeight + 'px; width: ' + imageWidth + 'px;'"
-        >
-          <img :src="URL.createObjectURL(blob)" class="mt-2" />
+        <div class="flex justify-center">
+          <img :src="URL.createObjectURL(blob)" class="mt-2 rounded" />
         </div>
       </div>
       <div v-else>
         <!--
           Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
           :resolution="{ width: 375, height: 812 }"
-          It even messes up when trying to match the ratio with imageHeight and imageWidth.
         -->
         <camera facingMode="environment" autoplay ref="camera">
-          <div class="absolute top-0 w-full flex justify-center pb-4">
+          <div class="absolute bottom-0 w-full flex justify-center pb-8">
             <button
               @click="takeImage"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
@@ -113,17 +109,29 @@ export default class GiftedPhotoDialog extends Vue {
 
   open(setImageFn: (arg: string) => void) {
     this.visible = true;
+    const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
+    if (bottomNav) {
+      bottomNav.style.display = "none";
+    }
     this.setImage = setImageFn;
   }
 
   close() {
     this.visible = false;
+    const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
+    if (bottomNav) {
+      bottomNav.style.display = "";
+    }
     this.blob = null;
   }
 
   async takeImage(/* payload: MouseEvent */) {
     const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
-    console.log("cameraComponent", cameraComponent, cameraComponent.resolution);
+    console.log(
+      "cameraComponent on snapshot",
+      cameraComponent,
+      cameraComponent.resolution,
+    );
     this.imageHeight = cameraComponent?.resolution?.height;
     this.imageWidth = cameraComponent?.resolution?.width;
     const initialImageRatio = this.imageWidth / this.imageHeight;
@@ -141,12 +149,14 @@ export default class GiftedPhotoDialog extends Vue {
       window.innerHeight,
     );
     if (initialImageRatio > 1 && windowRatio < 1) {
+      // the image is wider than it is tall, and the window is taller than it is wide
       this.imageWarning = "?";
       // For some reason, mobile in portrait orientation renders a horizontally-stretched image.
       // We're gonna force it opposite.
       this.imageHeight = cameraComponent?.resolution?.width;
       this.imageWidth = cameraComponent?.resolution?.height;
     } else if (initialImageRatio < 1 && windowRatio > 1) {
+      // the image is taller than it is wide, and the window is wider than it is tall
       // Haven't seen this happen, but just in case.
       this.imageWarning = "??";
       this.imageHeight = cameraComponent?.resolution?.width;
@@ -160,9 +170,11 @@ export default class GiftedPhotoDialog extends Vue {
       this.imageHeight,
     );
     if (newImageRatio < windowRatio) {
+      // the image is a taller ratio than the window, so fit the height first
       this.imageHeight = window.innerHeight / 2;
       this.imageWidth = this.imageHeight * newImageRatio;
     } else {
+      // the image is a wider ratio than the window, so fit the width first
       this.imageWidth = window.innerWidth / 2;
       this.imageHeight = this.imageWidth / newImageRatio;
     }
@@ -211,9 +223,9 @@ export default class GiftedPhotoDialog extends Vue {
     }
   }
   photoSnapped() {
+    console.log("snap_photo clicked");
     const video = document.querySelector("#video");
     const canvas = document.querySelector("#canvas");
-    console.log("snap_photo clicked");
     if (
       canvas instanceof HTMLCanvasElement &&
       video instanceof HTMLVideoElement
@@ -221,9 +233,17 @@ export default class GiftedPhotoDialog extends Vue {
       canvas
         ?.getContext("2d")
         ?.drawImage(video, 0, 0, canvas.width, canvas.height);
-      const image_data_url = canvas?.toDataURL("image/jpeg");
+      // ... or set the blob:
+      // canvas?.toBlob(
+      //   (blob) => {
+      //     this.blob = blob;
+      //   },
+      //   "image/jpeg",
+      //   1,
+      // );
 
       // data url of the image
+      const image_data_url = canvas?.toDataURL("image/jpeg");
       console.log(image_data_url);
     }
   }