Fix media browser mime type icon styles

outl1ne · Jun 18, 2021 · 8d298af · 8d298af
1 parent d3ca782
commit 8d298af
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/IndexFileField.vue b/resources/js/components/IndexFileField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-2 mime-type-icon-wrapper">
+  <div class="mime-type-icon-wrapper">
     <mime-type-icon :src="fileThumbnail" :mime-type="mimeType" />
   </div>
 </template>

diff --git a/resources/js/components/MediaBrowsingModal.vue b/resources/js/components/MediaBrowsingModal.vue
@@ -41,7 +41,7 @@
         :currentCollection="currentCollection"
       />
 
-      <div :class="`flex mb-6`" id="media-dropzone" v-if="!loadingMediaFiles">
+      <div :class="`flex mb-6`" id="media-dropzone" class="media-dropzone-wrapper" v-if="!loadingMediaFiles">
         <div class="img-collection" @scroll="scrollEventListener" ref="imgCollectionRef">
           <div class="empty-message" v-if="files.length === 0 && !uploadOnly">
             <p>There are currently no media files in this library</p>
@@ -500,3 +500,33 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+.od-modal {
+  height: 88vh;
+
+  > div:first-child {
+    height: calc(88vh - 60px);
+
+    > div {
+      height: calc(88vh - 60px - 110px);
+    }
+  }
+
+  #media-dropzone .img-collection {
+    height: 100%;
+    max-height: none;
+  }
+
+  .media-dropzone-wrapper {
+    height: 100%;
+  }
+
+  .mime-type-icon {
+    padding: 24px;
+
+    svg {
+      position: static;
+    }
+  }
+}
+</style>
diff --git a/resources/js/components/MimeTypeIcon.vue b/resources/js/components/MimeTypeIcon.vue
@@ -6,9 +6,9 @@
       :src="src"
       @error="isImageFileMissing = true"
     />
-    <missing-file-icon v-else-if="isImageFile && isImageFileMissing" class="p-2" />
-    <audio-icon v-else-if="isAudioFile" class="p-2" />
-    <thumbnail-video-icon v-else-if="isVideoFile && !showVideo" icon="video-icon" class="p-2" />
+    <missing-file-icon v-else-if="isImageFile && isImageFileMissing" />
+    <audio-icon v-else-if="isAudioFile" />
+    <thumbnail-video-icon v-else-if="isVideoFile && !showVideo" icon="video-icon" />
     <video v-else-if="isVideoFile && showVideo" controls>
       <source :src="src" :type="mimeType" />
     </video>

diff --git a/resources/js/components/UploadedFile.vue b/resources/js/components/UploadedFile.vue
@@ -130,6 +130,10 @@ export default {
     text-align: center;
   }
 
+  .mime-type-icon {
+    padding: 16px;
+  }
+
   &:hover {
     .thumbnail-container {
       box-shadow: 0 0 5px rgba(#4099de, 0.5);