Properly truncate system notices (#11714)

* Properly truncate system notices

As noted in #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 <art27@cantab.net>
* As per @CirnoT make table cell clickable

* ensure that pre wraps

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
index 7d1720becd13ec76a49e18190f4f46b0ab54c2db..5311ad8f79cdd4b78fbe4d2ca3bc476a4e35f556 100644 (file)
--- 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 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>

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 32265748a573ac094a94025feaa3b3b77adc3896..fa32c64c33cad748ab00512331ec226f21abc752 100644 (file)
--- 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 5fb0712368de09925a6b802582a8cd52afd12610..9184ed76ef0c3fc400f4c4b158319ab04fd73133 100644 (file)
--- 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;
+            }
+        }
+    }
 }