Fix #1279: Enhance `usePdfRenderer` callback check to detect android phones

CHANGE.md

@@ -5,6 +5,7 @@ Change Log: `bootstrap-fileinput`
 
 **Date:** _work in process_
 
+- (enh #1279): Enhance `usePdfRenderer` callback check to detect android phones.
 - Correct nuget batch file.
 
 ## version 4.4.9

css/fileinput.css

@@ -407,18 +407,6 @@
     opacity: 0.65;
 }
 
-@media (min-width: 576px) {
-    .file-zoom-dialog .modal-dialog {
-        max-width: 500px;
-    }
-}
-
-@media (min-width: 992px) {
-    .file-zoom-dialog .modal-lg {
-        max-width: 800px;
-    }
-}
-
 .file-zoom-fullscreen.modal {
     position: fixed;
     top: 0;
@@ -478,7 +466,19 @@
     height: 30px;
 }
 
-@media screen and (max-width: 767px) {
+@media (min-width: 576px) {
+    .file-zoom-dialog .modal-dialog {
+        max-width: 500px;
+    }
+}
+
+@media (min-width: 992px) {
+    .file-zoom-dialog .modal-lg {
+        max-width: 800px;
+    }
+}
+
+@media (max-width: 767px) {
     .file-preview-thumbnails {
         display: flex;
         justify-content: center;
@@ -491,12 +491,18 @@
     }
 }
 
-@media screen and (max-width: 350px) {
+@media (max-width: 350px) {
     .krajee-default.file-preview-frame .kv-file-content {
         width: 160px;
     }
 }
 
+@media (max-width: 420px) {
+    .krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
+        width: 100%;
+    }
+}
+
 .file-loading[dir=rtl]:before {
     background: transparent url(../img/loading.gif) top right no-repeat;
     padding-left: 0;

js/fileinput.js

@@ -4461,7 +4461,7 @@
             close: 'Close detailed preview'
         },
         usePdfRenderer: function () {
-            return !!navigator.userAgent.match(/(iPod|iPhone|iPad)/);
+            return !!navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/i);
         },
         pdfRendererUrl: '',
         pdfRendererTemplate: '<iframe class="kv-preview-data file-preview-pdf" src="{renderer}?file={data}" {style}></iframe>'

scss/fileinput.scss

@@ -538,18 +538,6 @@ input[type=file].file-loading {
     opacity: 0.65;
 }
 
-@media(min-width: 576px) {
-    .file-zoom-dialog .modal-dialog {
-        max-width: 500px;
-    }
-}
-
-@media(min-width: 992px) {
-    .file-zoom-dialog .modal-lg {
-        max-width: 800px;
-    }
-}
-
 .file-zoom-fullscreen {
     &.modal {
         position: fixed;
@@ -624,7 +612,19 @@ input[type=file].file-loading {
     }
 }
 
-@media screen and(max-width: 767px) {
+@media(min-width: 576px) {
+    .file-zoom-dialog .modal-dialog {
+        max-width: 500px;
+    }
+}
+
+@media(min-width: 992px) {
+    .file-zoom-dialog .modal-lg {
+        max-width: 800px;
+    }
+}
+
+@media(max-width: 767px) {
     .file-preview-thumbnails {
         display: flex;
         justify-content: center;
@@ -636,12 +636,18 @@ input[type=file].file-loading {
     }
 }
 
-@media screen and(max-width: 350px) {
+@media(max-width: 350px) {
     .krajee-default.file-preview-frame .kv-file-content {
         width: multiply($pad, 32);
     }
 }
 
+@media(max-width: 420px) {
+    .krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
+        width: 100%;
+    }
+}
+
 .file-loading[dir=rtl]:before {
     background: transparent $url-0 top right no-repeat;
     padding-left: 0;