Bugzilla – Attachment 174703 Details for
Bug 37910
Minor spacing issues in the catalog concerns page
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 37910: Update concerns styling to flexbox
Bug-37910-Update-concerns-styling-to-flexbox.patch (text/plain), 11.62 KB, created by
Martin Renvoize (ashimema)
on 2024-11-18 14:39:45 UTC
(
hide
)
Description:
Bug 37910: Update concerns styling to flexbox
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2024-11-18 14:39:45 UTC
Size:
11.62 KB
patch
obsolete
>From 91d6bc69fecff7e100c2e18e854e26b0968df499 Mon Sep 17 00:00:00 2001 >From: Martin Renvoize <martin.renvoize@ptfs-europe.com> >Date: Tue, 29 Oct 2024 11:35:39 +0000 >Subject: [PATCH] Bug 37910: Update concerns styling to flexbox > >With the update to bootstrap 5 we loose some of the absolute and >relative positioning helpers, namely pull-right, which were used in the >catalog concerns pages. > >This patch updates the table and modal styling to use modern flexbox >utlities from bootstrap 5 instead to improve the styling and fix the >regressions. > >Signed-off-by: David Nind <david@davidnind.com> >Signed-off-by: Aleisha Amohia <aleishaamohia@hotmail.com> >Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> >--- > .../prog/en/modules/cataloguing/concerns.tt | 33 +++++++-- > .../prog/js/modals/display_ticket.js | 72 +++++++++++-------- > 2 files changed, 69 insertions(+), 36 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/concerns.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/concerns.tt >index a7452655fe5..668558921dc 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/concerns.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/concerns.tt >@@ -127,13 +127,15 @@ > "columns": [{ > "data": "reported_date:reporter.firstname", > "render": function(data, type, row, meta) { >- let reported = '<span class="date clearfix">' + $datetime(row.reported_date) + '</span>'; >- reported += '<span class="reporter clearfix">' + $patron_to_html(row.reporter, { >+ let reported = '<div class="d-flex justify-content-between align-items-start">'; >+ reported += '<span class="reporter">' + $patron_to_html(row.reporter, { > display_cardnumber: false, > url: true > }) + '</span>'; >+ reported += '<span class="date text-muted">' + $datetime(row.reported_date) + '</span>'; >+ reported += '</div>'; > return reported; >- }, >+ }, > "searchable": true, > "orderable": true > }, >@@ -141,11 +143,20 @@ > "data": "title:body", > "render": function(data, type, row, meta) { > let resolved = ( row.resolved_date ) ? true : false; >- let result = '<a role="button" href="#" class="detail-trigger">' + row.title + '</a>'; >+ let result = '<div class="d-flex justify-content-between align-items-start">'; >+ >+ // Title link on the left >+ result += '<a id="title_' + row.ticket_id + '" role="button" href="#" class="detail-trigger">' + row.title + '</a>'; >+ >+ // Updates count on the right, if it exists > if (row.updates_count) { >- result += '<span class="pull-right"><a role="button" href="#" class="detail-trigger"><i class="fa fa-comment" aria-hidden="true"></i> ' + row.updates_count + '</a></span>'; >+ result += '<span><a role="button" href="#" class="detail-trigger"><i class="fa fa-comment" aria-hidden="true"></i> ' + row.updates_count + '</a></span>'; > } >+ >+ // Hidden detail content >+ result += '</div>'; > result += '<div id="detail_' + row.ticket_id + '" style="display:none">' + row.body + '</div>'; >+ > return result; > }, > "searchable": true, >@@ -166,26 +177,34 @@ > "render": function(data, type, row, meta) { > let result = ''; > if (row.resolved_date) { >+ result += "<div>"; > result += _("Resolved by") + ' <span>' + $patron_to_html(row.resolver, { > display_cardnumber: false, > url: true > }) + '</span>'; >+ result += "</div>"; > if (row.status) { >+ result += '<div>'; > result += ' ' + _("as") + ' '; > result += row._strings.status ? escape_str(row._strings.status.str) : ""; >+ result += '</div>'; > } >- result += '<span class="clearfix">' + $datetime(row.resolved_date) + '</span>'; >+ result += '<div>' + $datetime(row.resolved_date) + '</div>'; > } else { >+ result += '<div>'; > if (row.status) { > result += row._strings.status ? escape_str(row._strings.status.str) : ""; > } else { > result += _("Open"); > } >+ result += '</div>'; > if (row.assignee) { >- result += '<span class="clearfix">' + _("Assigned to: ") + $patron_to_html(row.assignee, { >+ result += '<div>'; >+ result += _("Assigned to: ") + ' <span>' + $patron_to_html(row.assignee, { > display_cardnumber: false, > url: true > }) + '</span>'; >+ result += '</div>'; > } > } > return result; >diff --git a/koha-tmpl/intranet-tmpl/prog/js/modals/display_ticket.js b/koha-tmpl/intranet-tmpl/prog/js/modals/display_ticket.js >index bd9f07a4f99..faa19cef3a7 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/modals/display_ticket.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/modals/display_ticket.js >@@ -31,22 +31,31 @@ $(document).ready(function () { > $("#resolveTicket").show(); > } > >+ let title = $("#title_" + ticket_id).text(); > let detail = $("#detail_" + ticket_id).text(); > > // Display ticket details > let display = '<div class="list-group">'; >- display += '<div class="list-group-item">'; >+ display += >+ '<div class="list-group-item list-group-item-secondary d-flex justify-content-between align-items-start">'; >+ display += '<div class="ms-2 me-auto">'; >+ display += '<div class="fw-bold">' + title + "</div>"; >+ display += '<div class="wrapfix">' + detail + "</div>"; >+ display += "</div>"; > if (assignee) { >+ display += "<span>"; > display += >- '<span class="pull-right"><span class="label strong">' + >+ '<label class="label strong">' + > __("Assignee") + >- "</span>: " + >+ "</label>: " + >+ "<span>" + > assignee + > "</span>"; >+ display += "</span>"; > } >- display += '<span class="wrapfix">' + detail + "</span>"; > display += "</div>"; >- display += '<div id="concern-updates" class="list-group-item">'; >+ display += >+ '<div id="concern-updates" class="list-group-item list-group-item-info">'; > display += "<span>" + __("Loading updates . . .") + "</span>"; > display += "</div>"; > display += "</div>"; >@@ -68,49 +77,54 @@ $(document).ready(function () { > data.forEach(function (item, index) { > if (item.public) { > updates += >- '<div class="list-group-item list-group-item-success">'; >- updates += >- '<span class="pull-right">' + >- __("Public") + >- "</span>"; >+ '<div class="list-group-item list-group-item-success d-flex flex-column">'; > } else { > updates += >- '<div class="list-group-item list-group-item-warning">'; >- updates += >- '<span class="pull-right">' + >- __("Private") + >- "</span>"; >+ '<div class="list-group-item list-group-item-warning d-flex flex-column">'; > } >+ updates += '<div class="d-flex">'; > updates += >- '<span class="wrapfix">' + item.message + "</span>"; >- updates += >- '<span class="clearfix">' + >- $patron_to_html(item.user, { >- display_cardnumber: false, >- url: true, >- }) + >- " (" + >- $datetime(item.date) + >- ")"; >+ '<div class="flex-grow-1 mb-0 wrapfix">' + >+ item.message + >+ "</div>"; >+ updates += '<div class="d-flex flex-column ms-3 text-end">'; >+ if (item.public) { >+ updates += >+ '<span class="mb-1">' + __("Public") + "</span>"; >+ } else { >+ updates += >+ '<span class="mb-1">' + __("Private") + "</span>"; >+ } > if (item.status) { >- updates += '<span class="clearfix pull-right">'; >+ updates += '<span class="mb-1">'; > updates += item._strings.status > ? escape_str(item._strings.status.str) > : ""; > updates += "</span>"; > } > if (item.assignee) { >- updates += '<span class="clearfix pull-right">'; >+ updates += '<span class="mb-1">'; > updates += $patron_to_html(item.assignee, { > display_cardnumber: false, > url: true, > }); > updates += "</span>"; > } >- updates += "</span>"; >+ updates += "</div>"; >+ updates += "</div>"; >+ updates += >+ '<div class="text-end text-muted small mt-2">' + >+ $patron_to_html(item.user, { >+ display_cardnumber: false, >+ url: true, >+ }) + >+ " (" + >+ $datetime(item.date) + >+ ")" + >+ "</div>"; > updates += "</div>"; > }); >- updates_display.html(updates); >+ updates_display.replaceWith(updates); > }) > .error(function () {}); > >-- >2.47.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 37910
:
173650
|
173651
|
173652
|
173653
|
173659
|
173660
|
173661
|
173692
|
173693
|
173694
|
174056
|
174057
|
174058
| 174703 |
174704
|
174705