From fe2cacf5ea2e371c4e74f003ee594767c16028fa Mon Sep 17 00:00:00 2001 From: zeripath <art27@cantab.net> Date: Tue, 2 Jun 2020 21:24:18 +0100 Subject: [PATCH] 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> --- templates/admin/notice.tmpl | 11 ++++++----- web_src/js/index.js | 3 ++- web_src/less/_admin.less | 17 +++++++++++++++++ 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl index 7d1720becd..5311ad8f79 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 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 32265748a5..fa32c64c33 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 5fb0712368..9184ed76ef 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; + } + } + } }