lianguan/gitea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Properly truncate system notices (#11714) (#11742)

Browse Source 
Backport #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>

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
zeripath 2020-06-03 00:44:05 +01:00 committed by GitHub
parent a34826b19f
commit 7339018c5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
templates/admin/notice.tmpl
View File

@ -7,7 +7,7 @@
{{.i18n.Tr "admin.notices.system_notice_list"}} ({{.i18n.Tr "admin.total" .Total}}) {{.i18n.Tr "admin.notices.system_notice_list"}} ({{.i18n.Tr "admin.total" .Total}})
</h4> </h4>
<div class="ui attached table segment"> <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> <thead>
<tr> <tr>
<th></th> <th></th>
@ -28,9 +28,9 @@
</td> </td>
<td>{{.ID}}</td> <td>{{.ID}}</td>
<td>{{$.i18n.Tr .TrStr}}</td> <td>{{$.i18n.Tr .TrStr}}</td>
<td>{{SubStr .Description 0 120}}...</td> <td class="view-detail"><span class="notice-description text truncate">{{.Description}}</span></td>
<td><span class="poping up" data-content="{{.CreatedUnix.AsTime}}" data-variation="inverted tiny">{{.CreatedUnix.FormatShort}}</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" data-content="{{.Description}}"></i></a></td> <td><a href="#"><i class="browser icon view-detail"></i></a></td>
</tr> </tr>
{{end}} {{end}}
</tbody> </tbody>
@ -73,10 +73,11 @@
</div> </div>
</div> </div>
<div class="ui modal" id="detail-modal"> <div class="ui modal admin" id="detail-modal">
<i class="close icon"></i> <i class="close icon"></i>
<div class="header">{{$.i18n.Tr "admin.notices.view_detail_header"}}</div> <div class="header">{{$.i18n.Tr "admin.notices.view_detail_header"}}</div>
<div class="content"> <div class="content">
<div class="sub header"></div>
<pre></pre> <pre></pre>
</div> </div>
</div> </div>

3
web_src/js/index.js
View File

@ -1864,7 +1864,8 @@ function initAdmin() {
// Attach view detail modals // Attach view detail modals
$('.view-detail').on('click', function () { $('.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'); $detailModal.modal('show');
return false; return false;
}); });

17
web_src/less/_admin.less
View File

@ -75,4 +75,21 @@
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; 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;
}
}
}
} }