Formatting of the Content Display

4 files changed, 39 insertions, 18 deletions

diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js b/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js
index f2d6e8c5b4b..195d9bdcf5a 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js
@@ -14,6 +14,7 @@ const fileExtensionViewers = {
   jpeg: 'image',
   gif: 'image',
   png: 'image',
+  bmp: 'image',
   md: 'markdown',
   markdown: 'markdown',
 };
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
index 86fe3160c35..0db7cfa23b0 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -21,13 +21,20 @@ export default {
     fileSizeReadable() {
       return numberToHumanSize(this.fileSize);
     },
+    fileName() {
+      if (!this.path) return '';
+      return this.path.split('/').pop();
+    },
   },
 };
 </script>
 
 <template>
-  <div class="file-holder">
-    <p class="prepend-top-10">
+  <div class="file-container">
+    <div class="file-content">
+      <p class="prepend-top-10 file-info">
+        {{ fileName }} ({{ fileSizeReadable }})
+      </p>
       <a
         :href="path"
         class="btn btn-default"
@@ -39,8 +46,8 @@ export default {
           css-classes="pull-left append-right-8"
           :size="16"
         />
-        {{ __('Download') }} {{ path }} ({{ fileSizeReadable }})
+        {{ __('Download') }}
       </a>
-    </p>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index cc4f123cf99..49006122752 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -43,7 +43,7 @@ export default {
 </script>
 
 <template>
-  <div class="file-holder">
+  <div class="file-container">
     <div class="file-content image_file">
       <img
         ref="contentImg"
@@ -52,14 +52,14 @@ export default {
         :alt="path"
         @load="onImgLoad"
         @click="onImgClick"/>
+      <p class="file-info">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }} -
+        </template>
+        <template v-if="width && height">
+          {{ width }} x {{ height }}
+        </template>
+      </p>
     </div>
-    <p
-      class="image-info"
-      v-if="width && height">
-      <template v-if="fileSize>0">
-        {{ fileSizeReadable }} -
-      </template>
-      {{ width }} x {{ height }}
-    </p>
   </div>
 </template>
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 33e6ab2aa66..2c0fa0cae53 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -312,25 +312,38 @@
   height: 100%;
   overflow: auto;
 
-  .file-holder {
+  .file-container {
     background-color: $gray-darker;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
     text-align: center;
 
     .file-content {
-      padding-bottom: $gl-padding-top;
+      padding: $gl-padding;
+      max-width: 100%;
+      max-height: 100%;
+
+      img {
+        max-width: 90%;
+        max-height: 90%;
+      }
 
       .zoomable {
         cursor: zoom-in;
 
         &.zoomed {
           cursor: zoom-out;
-          max-width: inherit;
-          max-height: inherit;
+          max-width: none;
+          max-height: none;
+          margin-right: $gl-padding;
         }
       }
     }
 
-    .image-info {
+    .file-info {
       font-size: $label-font-size;
       color: $diff-image-info-color;
     }