Fix text wrap for long filenames in media table view (#2906)

OrchardCMS · Dec 19, 2018 · f23561e · f23561e
1 parent 3a8fa61
commit f23561e
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 6 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/mediaItemsTableComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/mediaItemsTableComponent.js
@@ -37,7 +37,7 @@ Vue.component('mediaItemsTable', {
                             </td> \
                             <td> \
                                 <div class="media-name-cell"> \
-                                    {{ media.name }} \
+                                   <span class="break-word"> {{ media.name }} </span>\
                                     <div class="buttons-container"> \
                                         <a href="javascript:;" class="btn btn-link btn-sm mr-1 edit-button" v-on:click.stop="renameMedia(media)"> {{ T.editButton }} </a > \
                                         <a href="javascript:;" class="btn btn-link btn-sm delete-button" v-on:click.stop="deleteMedia(media)"> {{ T.deleteButton }} </a> \
@@ -68,7 +68,6 @@ Vue.component('mediaItemsTable', {
     },
     created: function () {
         var self = this;
-        // retrieving localized strings from view
         self.T.imageHeader = $('#t-image-header').val();
         self.T.nameHeader = $('#t-name-header').val();
         self.T.sizeHeader = $('#t-size-header').val();

diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_utils.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_utils.scss
@@ -13,6 +13,10 @@
     }
 }
 
+.break-word {
+    word-break: break-all;
+    word-wrap: break-word;
+}
 
 [v-cloak] {
     display: none !important;

diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Scripts/media.js b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Scripts/media.js
@@ -2689,7 +2689,7 @@ Vue.component('mediaItemsTable', {
                             </td> \
                             <td> \
                                 <div class="media-name-cell"> \
-                                    {{ media.name }} \
+                                   <span class="break-word"> {{ media.name }} </span>\
                                     <div class="buttons-container"> \
                                         <a href="javascript:;" class="btn btn-link btn-sm mr-1 edit-button" v-on:click.stop="renameMedia(media)"> {{ T.editButton }} </a > \
                                         <a href="javascript:;" class="btn btn-link btn-sm delete-button" v-on:click.stop="deleteMedia(media)"> {{ T.deleteButton }} </a> \
@@ -2720,7 +2720,6 @@ Vue.component('mediaItemsTable', {
     },
     created: function () {
         var self = this;
-        // retrieving localized strings from view
         self.T.imageHeader = $('#t-image-header').val();
         self.T.nameHeader = $('#t-name-header').val();
         self.T.sizeHeader = $('#t-size-header').val();

diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Scripts/media.min.js b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Scripts/media.min.js
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.css b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.css
@@ -402,5 +402,9 @@ ol.media-items-grid {
     text-overflow: ellipsis;
     display: block; }
 
+.break-word {
+  word-break: break-all;
+  word-wrap: break-word; }
+
 [v-cloak] {
   display: none !important; }
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.min.css b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.min.css