increase thumbnail quality, set contain in js, replace blur effect with opacity

Author: silverwind

web_src/js/index.js

@@ -999,6 +999,9 @@ async function initRepository() {
             dictFileTooBig: $dropzone.data('file-too-big'),
             dictRemoveFile: $dropzone.data('remove-file'),
             timeout: 0,
+            thumbnailMethod: 'contain',
+            thumbnailWidth: 480,
+            thumbnailHeight: 480,
             init() {
               this.on('success', (file, data) => {
                 filenameDict[file.name] = {
@@ -2624,6 +2627,9 @@ $(document).ready(async () => {
       dictFileTooBig: $dropzone.data('file-too-big'),
       dictRemoveFile: $dropzone.data('remove-file'),
       timeout: 0,
+      thumbnailMethod: 'contain',
+      thumbnailWidth: 480,
+      thumbnailHeight: 480,
       init() {
         this.on('success', (file, data) => {
           filenameDict[file.name] = data.uuid;

web_src/less/features/dropzone.less

@@ -43,3 +43,7 @@
   object-fit: contain !important;
   margin-bottom: 0 !important;
 }
+
+.dropzone .dz-preview:hover .dz-image img {
+  filter: opacity(.5) !important;
+}