ui: show "..." if the description is longer than 120 characters

[a1012112796]

As title.

[zeripath]

I wonder if this might work better:

diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
index 7d1720bec..af12d175a 100644
--- a/templates/admin/notice.tmpl
+++ b/templates/admin/notice.tmpl
@@ -7,7 +7,7 @@
 			{{.i18n.Tr "admin.notices.system_notice_list"}} ({{.i18n.Tr "admin.total" .Total}})
 		</h4>
 		<div class="ui attached table segment">
-			<table class="ui very basic select selectable table">
+			<table id="notice-table" class="ui very basic select selectable table">
 				<thead>
 					<tr>
 						<th></th>
@@ -28,9 +28,9 @@
 							</td>
 							<td>{{.ID}}</td>
 							<td>{{$.i18n.Tr .TrStr}}</td>
-							<td>{{SubStr .Description 0 120}}...</td>
-							<td><span class="poping up" data-content="{{.CreatedUnix.AsTime}}" data-variation="inverted tiny">{{.CreatedUnix.FormatShort}}</span></td>
-							<td><a href="#"><i class="browser icon view-detail" data-content="{{.Description}}"></i></a></td>
+							<td><span class="notice-description text truncate view-detail">{{.Description}}</span></td>
+							<td><span class="notice-created-time poping up" data-content="{{.CreatedUnix.AsTime}}" data-variation="inverted tiny">{{.CreatedUnix.FormatShort}}</span></td>
+							<td><a href="#"><i class="browser icon view-detail"></i></a></td>
 						</tr>
 					{{end}}
 				</tbody>
@@ -77,6 +77,7 @@
 	<i class="close icon"></i>
 	<div class="header">{{$.i18n.Tr "admin.notices.view_detail_header"}}</div>
 	<div class="content">
+		<div class="sub header"></div>
 		<pre></pre>
 	</div>
 </div>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 32265748a..fa32c64c3 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1862,7 +1862,8 @@ function initAdmin() {
 
     // Attach view detail modals
     $('.view-detail').on('click', function () {
-      $detailModal.find('.content pre').text($(this).data('content'));
+      $detailModal.find('.content pre').text($(this).parents('tr').find('.notice-description').text());
+      $detailModal.find('.sub.header').text($(this).parents('tr').find('.notice-created-time').text());
       $detailModal.modal('show');
       return false;
     });
diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less
index 5fb071236..9184ed76e 100644
--- a/web_src/less/_admin.less
+++ b/web_src/less/_admin.less
@@ -75,4 +75,21 @@
         white-space: pre-wrap;
         word-wrap: break-word;
     }
+
+    #notice-table {
+        .notice-description {
+            @media only screen and (max-width: 767px) {
+                max-width: 80vw;
+            }
+            @media only screen and (max-width: 991px) and (min-width: 768px) {
+                max-width: 360px;
+            }
+            @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
+                max-width: 510px;
+            }
+            @media only screen and (min-width: 1200px) {
+                max-width: 640px;
+            }
+        }
+    }
 }

[CirnoT]

Note that this changes limit of characters shown from 120 to 123

It seems it's more of a bug fix, right now ... is shown always, even when below 120.