fix: mobile layout for result

Author: felixindrawan

css/index.css

@@ -290,6 +290,7 @@ img {
 }
 
 .result-container .scanned-image {
+  flex: 1;
   max-height: 200px;
 }
 
@@ -301,6 +302,7 @@ img {
 }
 
 .result-container .parsed-result-area {
+  flex: 1;
   width: 100%;
   height: 84%;
   padding: 15px 15px 5px 30px;
@@ -585,7 +587,7 @@ img {
 }
 
 /* Media query for mobile phones */
-@media screen and (orientation: landscape) and (max-width: 1500px) {
+@media screen and (orientation: landscape) and (max-width: 900px) {
   .result-container .parsed-result-area .parsed-filed {
     font-size: 14px;
   }

js/init.js

@@ -1,4 +1,4 @@
-import { judgeCurResolution, showNotification } from "./util.js";
+import { changeMobileLayout, judgeCurResolution, showNotification } from "./util.js";
 import { createPendingPromise, extractDocumentFields, resultToHTMLElement } from "./util.js";
 
 // Promise variable used to control model loading state
@@ -137,6 +137,7 @@ export const handleCapturedResult = (result, uploadedImage = null) => {
 };
 
 const displayResults = (recognizedText, parsedResult) => {
+  changeMobileLayout(); // Update mobile layout to support horizontal view
   parsedResultArea.innerText = "";
 
   // Display MRZ text

js/util.js

@@ -213,6 +213,26 @@ export function shouldShowScanModeContainer() {
   scanModeContainer.style.display = isHomepageClosed && isResultClosed ? "flex" : "none";
 }
 
+export const isMobile = () =>
+  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+export function changeMobileLayout() {
+  const resultArea = resultContainer.querySelector(".result-area");
+  console.log(isMobile(), checkOrientation() === "landscape");
+  Object.assign(
+    resultArea.style,
+    isMobile() && checkOrientation() === "landscape"
+      ? {
+          height: "70%",
+          flexDirection: "row",
+        }
+      : {
+          height: "84%",
+          flexDirection: "column",
+        }
+  );
+}
+
 /** Show notification banner to users
  * @params {string} message - noficiation message
  * @params {string} className - CSS class name to show notification status