fix: documentType parsing and update horizontal mobile layout on result (#16)

* fix: document code parsing

* fix: update horizontal mobile layout on result

* fix: result area height

* fix: media query for mobile

Author: Felix-Dynamsoft

css/index.css

@@ -283,6 +283,13 @@ img {
   color: #aaaaaa;
 }
 
+.result-container .result-area {
+  width: 100%;
+  height: 84%;
+  display: flex;
+  flex-direction: column;
+}
+
 .result-container .scanned-image {
   max-height: 200px;
 }
@@ -554,8 +561,14 @@ img {
   }
 }
 
-@media screen and (max-width: 800px) and (orientation: landscape) {
+/* Media query for mobile phones */
+@media screen and (max-width: 926px) and (orientation: landscape) {
   .result-container .parsed-result-area .parsed-filed {
     font-size: 14px;
   }
+
+  .result-container .result-area {
+    height: 70%;
+    flex-direction: row;
+  }
 }

index.html

@@ -314,8 +314,10 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
           </svg>
         </div>
       </div>
-      <div class="scanned-image"></div>
-      <div class="parsed-result-area"></div>
+      <div class="result-area">
+        <div class="scanned-image"></div>
+        <div class="parsed-result-area"></div>
+      </div>
       <div class="scan-again">
         <button class="btn-scan-again">Scan Again</button>
       </div>

js/util.js

@@ -46,7 +46,7 @@ export function extractDocumentFields(result) {
   };
 
   const getDocumentNumber = (documentType) => {
-    const primaryField = documentType === "P" ? "passportNumber" : "documentNumber";
+    const primaryField = documentType?.startsWith("P") ? "passportNumber" : "documentNumber";
     const primaryNumber = fieldWithStatus(primaryField);
     const longNumber = fieldWithStatus("longDocumentNumber");