Fix #874: Enhance/Standardize CSS Styles for Krajee Default Theme

CHANGE.md

@@ -3,10 +3,12 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.3.8 (_under development_)
 
-**Date:** 15-Feb-2017
+**Date:** 16-Feb-2017
 
 1. (bug #870): Correct config.width parsing.
 2. (bug #872): Correct typo in `bootstrap.min.css`.
+3. (enh #874): Enhance/Standardize CSS Styles for Krajee Default Theme.
+4. (enh #876): Update Spanish Translations
 
 ## version 4.3.7
 

css/fileinput.css

@@ -96,19 +96,25 @@
     position: relative;
     display: table;
     margin: 8px;
-    height: 160px;
     border: 1px solid #ddd;
     box-shadow: 1px 1px 5px 0 #a2958a;
     padding: 6px;
     float: left;
     text-align: center;
-    vertical-align: middle;
 }
 
 .krajee-default.file-preview-frame:not(.file-preview-error):hover {
     box-shadow: 3px 3px 5px 0 #333;
 }
 
+.krajee-default.file-preview-frame .kv-file-content {
+    height: 170px;
+}
+
+.krajee-default.file-preview-frame .file-thumbnail-footer {
+    height: 70px;
+}
+
 .krajee-default .file-preview-image {
     vertical-align: middle;
     image-orientation: from-image;
@@ -130,6 +136,18 @@
     overflow: auto;
 }
 
+.krajee-default[data-template="audio"] .file-preview-audio {
+    display: table-cell;
+    vertical-align: middle;
+    height: 170px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.krajee-default .file-preview-audio audio {
+    vertical-align: middle;
+}
+
 .krajee-default .file-zoom-dialog .file-preview-text {
     font-size: 1.2em;
 }
@@ -154,7 +172,7 @@
 }
 
 .krajee-default .file-other-icon {
-    font-size: 4.8em;
+    font-size: 8em;
 }
 
 .krajee-default .file-actions {
@@ -257,7 +275,7 @@
 /* noinspection CssOverwrittenProperties */
 .file-zoom-dialog .file-other-icon {
     font-size: 8em;
-    font-size: 55vmin;
+    font-size: 65vmin;
 }
 
 .file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file,

js/fileinput.js

@@ -390,25 +390,26 @@
             tTagBef = '<div class="file-preview-frame {frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
                 ' data-template="{template}"';
             tTagBef1 = tTagBef + '><div class="kv-file-content">\n';
-            tTagBef2 = tTagBef + ' title="{caption}" ' + $h.STYLE_SETTING + '><div class="kv-file-content">\n';
+            tTagBef2 = tTagBef + ' title="{caption}"><div class="kv-file-content">\n';
             tTagAft = '</div>{footer}\n</div>\n';
             tGeneric = '{content}\n';
             tHtml = '<div class="kv-preview-data file-preview-html" title="{caption}" ' + $h.STYLE_SETTING +
                 '>{data}</div>\n';
-            tImage = '<img src="{data}" class="kv-preview-data file-preview-image" title="{caption}" alt="{caption}" ' +
+            tImage = '<img src="{data}" class="file-preview-image kv-preview-data" title="{caption}" alt="{caption}" ' +
                 $h.STYLE_SETTING + '>\n';
-            tText = '<textarea class="kv-preview-data file-preview-text" title="{caption}" readonly ' + $h.STYLE_SETTING +
-                '>{data}</textarea>\n';
-            tVideo = '<video class="kv-preview-data" width="{width}" height="{height}" controls>\n' +
-                '<source src="{data}" type="{type}">\n' + $h.DEFAULT_PREVIEW + '\n</video>\n';
-            tAudio = '<audio class="kv-preview-data" controls>\n<source src="' + '{data}' + '" type="{type}">\n' +
-                $h.DEFAULT_PREVIEW + '\n</audio>\n';
+            tText = '<textarea class="kv-preview-data file-preview-text" title="{caption}" readonly ' +
+                $h.STYLE_SETTING + '>{data}</textarea>\n';
+            tVideo = '<video class="kv-preview-data file-preview-video" width="{width}" '  +
+                'height="{height}" controls>\n' + '<source src="{data}" type="{type}">\n' + $h.DEFAULT_PREVIEW +
+                '\n</video>\n';
+            tAudio = '<div class="file-preview-audio"><audio class="kv-preview-data" controls>\n<source src="{data}" ' +
+                'type="{type}">\n' + $h.DEFAULT_PREVIEW + '\n</audio></div>\n';
             tFlash = '<object class="kv-preview-data file-object" type="application/x-shockwave-flash" ' +
                 'width="{width}" height="{height}" data="{data}">\n' + $h.OBJECT_PARAMS + ' ' + $h.DEFAULT_PREVIEW +
                 '\n</object>\n';
             tObject = '<object class="kv-preview-data file-object" data="{data}" type="{type}" ' +
-                'width="{width}" height="{height}">\n' +
-                '<param name="movie" value="{caption}" />\n' + $h.OBJECT_PARAMS + ' ' + $h.DEFAULT_PREVIEW + '\n</object>\n';
+                'width="{width}" height="{height}">\n' + '<param name="movie" value="{caption}" />\n' +
+                $h.OBJECT_PARAMS + ' ' + $h.DEFAULT_PREVIEW + '\n</object>\n';
             tPdf = '<embed class="kv-preview-data" src="{data}" ' +
                 'width="{width}" height="{height}" type="application/pdf">\n';
             tOther = '<div class="kv-preview-data file-preview-other-frame">\n' + $h.DEFAULT_PREVIEW + '\n</div>\n';
@@ -462,7 +463,7 @@
                     video: {width: "213px", height: "160px"},
                     audio: {width: "213px", height: "80px"},
                     flash: {width: "213px", height: "160px"},
-                    object: {width: "160px", height: "160px"},
+                    object: {width: "160px", height: "auto"},
                     pdf: {width: "160px", height: "160px"},
                     other: {width: "160px", height: "160px"}
                 },