Improved Camera Popup

src/components/GiftedPhotoDialog.vue

@@ -1,23 +1,26 @@
 <template>
-  <div v-if="visible" class="dialog-overlay">
+  <div v-if="visible" class="dialog-overlay z-[60]">
     <!-- Breadcrumb -->
     <div class="dialog">
       <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
+      <div class="text-lg text-center font-light relative z-50">
+        <!-- Heading -->
         <h1
-          class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
-          @click="close()"
+          id="ViewHeading"
+          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none"
         >
-          <fa icon="xmark" class="fa-fw"></fa>
+          <span v-if="uploading"> Uploading... </span>
+          <span v-else-if="blob"> Look Good? </span>
+          <span v-else> Say "Cheese"! </span>
         </h1>
-      </div>
 
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
-        <span v-if="uploading"> Uploading... </span>
-        <span v-else-if="blob"> Look Good? </span>
-        <span v-else> Say "Cheese"! </span>
-      </h1>
+        <div
+          class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white"
+          @click="close()"
+        >
+          <fa icon="xmark" class="w-[1em]"></fa>
+        </div>
+      </div>
 
       <div v-if="uploading" class="flex justify-center">
         <fa icon="spinner" class="fa-spin fa-3x text-center block" />
@@ -45,13 +48,15 @@
           :resolution="{ width: 375, height: 812 }"
         -->
         <camera facingMode="environment" autoplay ref="camera">
-          <div class="absolute bottom-0 w-full flex justify-center pb-4">
+          <div
+            class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4"
+          >
             <!-- Button -->
             <button
               @click="takeImage"
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
+              class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
-              <fa icon="camera" class="fa-fw"></fa>
+              <fa icon="camera" class="w-[1em]"></fa>
             </button>
           </div>
         </camera>