Properly truncate system notices (go-gitea#11714)

Backport go-gitea#11714

* Properly truncate system notices

As noted in go-gitea#11658 the system notifications list will always suffix
system notices with ... even when the notice is longer than 120
characters.

Instead we should use .text.truncate to auto truncate and make the
notices clickable to view their details.

Signed-off-by: Andrew Thornton <[email protected]>

* As per @CirnoT make table cell clickable

* ensure that pre wraps

Signed-off-by: Andrew Thornton <[email protected]>

Co-authored-by: techknowlogick <[email protected]>

Author: zeripath

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 class="view-detail"><span class="notice-description text truncate">{{.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>
@@ -73,10 +73,11 @@
 	</div>
 </div>
 
-<div class="ui modal" id="detail-modal">
+<div class="ui modal admin" id="detail-modal">
 	<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>

web_src/js/index.js

@@ -1864,7 +1864,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;
     });

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;
+            }
+        }
+    }
 }