Bug 26804

Summary: News: Move the news preview out of the table and into a modal
Product: Koha Reporter: Lucas Gass <lucas>
Component: ToolsAssignee: Lucas Gass <lucas>
Status: RESOLVED FIXED QA Contact: Katrin Fischer <katrin.fischer>
Severity: enhancement    
Priority: P5 - low CC: jonathan.druart, kelly, oleonard
Version: master   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Text to go in the release notes:
Version(s) released in:
20.11.00
Attachments: Bug 26804: Limit the size of the News column in newst table
Bug 26804: Limit the size of the News column in newst table
Bug 26804: Add modal content preview
Bug 26804: Add modal content preview
Bug 26804: Add modal content preview
Bug 26804: (QA follow-up) add modal-lg class and intent markup correctly
Bug 26804: Add modal content preview
Bug 26804: (QA follow-up) add modal-lg class and intent markup correctly

Description Lucas Gass 2020-10-23 16:25:51 UTC
If you have a lot of HTML or large images in any particular News item the newst table can become unmanageable.  The 'News' column shows a preview of the content of the news item and if these are really big you must horizontal scroll to get to the edit and delete buttons.


https://snipboard.io/1H3Oze.jpg
Comment 1 Lucas Gass 2020-10-23 16:36:42 UTC
To recreate this I added this image with a width to 1000px to a News Item:

<img src="https://koha-community.org/files/2013/09/cropped-kohabanner3.jpg" width="1000">
Comment 2 Lucas Gass 2020-10-23 18:11:24 UTC
Created attachment 112296 [details] [review]
Bug 26804: Limit the size of the News column in newst table

This patch attempts to make the table on koha-news.tt more manaagable by limiting the width of the 'News' column and adding a sticky thead so you know what column you are looking at when you scroll through News Items

To Test:
1. Add some HTML to a News Item. I am using a bunch of lorem ipsum HTML and this image set to 1000px. '<img src="https://koha-community.org/files/2013/09/cropped-kohabanner3.jpg" width="1000" />' but I'm not your overlord so choose your own way.
2. Look at /cgi-bin/koha/tools/koha-news.pl and see all your content in the News column. With a large image you have to scroll a long way to see the action buttons (Edit, Delete)
3. Apply patch
4. Regenerate the staff CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)
5. Clear you cache and again look at /cgi-bin/koha/tools/koha-news.pl. The table should only be 200px wide no matter the size of your content.
6. Scroll down and notice the thead stays with you.
7. Try testing at many different screen size.

Question: Should we limit height as well?
Comment 3 Lisette Scheer 2020-10-24 21:52:40 UTC
Created attachment 112407 [details] [review]
Bug 26804: Limit the size of the News column in newst table

This patch attempts to make the table on koha-news.tt more manaagable by limiting the width of the 'News' column and adding a sticky thead so you know what column you are looking at when you scroll through News Items

To Test:
1. Add some HTML to a News Item. I am using a bunch of lorem ipsum HTML and this image set to 1000px. '<img src="https://koha-community.org/files/2013/09/cropped-kohabanner3.jpg" width="1000" />' but I'm not your overlord so choose your own way.
2. Look at /cgi-bin/koha/tools/koha-news.pl and see all your content in the News column. With a large image you have to scroll a long way to see the action buttons (Edit, Delete)
3. Apply patch
4. Regenerate the staff CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)
5. Clear you cache and again look at /cgi-bin/koha/tools/koha-news.pl. The table should only be 200px wide no matter the size of your content.
6. Scroll down and notice the thead stays with you.
7. Try testing at many different screen size.

Question: Should we limit height as well?

Signed-off-by: Lisette Scheer <lisettes@latahlibrary.org>
Comment 4 Katrin Fischer 2020-10-25 00:37:59 UTC
I am not sure about this change as it means you can't get a good impression of how a news entry will look like in the OPAC anymore and 200px appears a little too small while the other colums grow to take up more space than they need.

I'd like to see if we can imagine another solution here. Maybe the width of the table could be limited so that at least this column can take up all the space available?

Or maybe a link to display the entry full size?

Trying to get some more opinions.
Comment 5 Lucas Gass 2020-10-28 04:29:30 UTC
Created attachment 112629 [details] [review]
Bug 26804: Add modal content preview

This patch turns the 'News' column into a preview button. That preview button displays a modal with content of that rows news item.

To test:
1. Apply patch
2. Add some HTML to a News Item. I am using a bunch of lorem ipsum HTML and this image set to 1000px. '<img src="https://koha-community.org/files/2013/09/cropped-kohabanner3.jpg" width="1000" />'.
3. Make sure and have some content with a lot of width and some content with a lot of height.
4. Test the Preview content button
5. Make sure you can scroll through long modals and across modals that are wide
6. Try at different screen sizes and with different combonations of News items
Comment 6 Lucas Gass 2020-10-28 13:27:01 UTC
Created attachment 112639 [details] [review]
Bug 26804: Add modal content preview

This patch turns the 'News' column into a preview button. That preview button displays a modal with content of that rows news item.

To test:
1. Apply patch
2. Add some HTML to a News Item. I am using a bunch of lorem ipsum HTML and this image set to 1000px. '<img src="https://koha-community.org/files/2013/09/cropped-kohabanner3.jpg" width="1000" />'.
3. Make sure and have some content with a lot of width and some content with a lot of height.
4. Test the Preview content button
5. Make sure you can scroll through long modals and across modals that are wide
6. Try at different screen sizes and with different combonations of News items
Comment 7 ByWater Sandboxes 2020-10-29 21:02:03 UTC
Created attachment 112683 [details] [review]
Bug 26804: Add modal content preview

This patch turns the 'News' column into a preview button. That preview button displays a modal with content of that rows news item.

To test:
1. Apply patch
2. Add some HTML to a News Item. I am using a bunch of lorem ipsum HTML and this image set to 1000px. '<img src="https://koha-community.org/files/2013/09/cropped-kohabanner3.jpg" width="1000" />'.
3. Make sure and have some content with a lot of width and some content with a lot of height.
4. Test the Preview content button
5. Make sure you can scroll through long modals and across modals that are wide
6. Try at different screen sizes and with different combonations of News items

Signed-off-by: Kelly  <kelly@bywatersolutions.com>
Comment 8 Katrin Fischer 2020-11-01 00:02:48 UTC
Hi Lucas, thx a lot for reworking this. I feel with the current size of the modal we have the same issue as with the inline one, that it's too small to get a good impression. Could we have this a bit bigger? Or maybe at least as wide as the graphics in it? Sorry to bother you.
Comment 9 Owen Leonard 2020-11-02 12:11:00 UTC
Lucas: Adding a "modal-wide" class to the "modal-dialog" <div> will make it a wider version of the modal:

<div class="modal-dialog modal-wide">

Could I also ask that the new template markup be indented with 4 spaces instead of 2?
Comment 10 Katrin Fischer 2020-11-02 12:20:59 UTC
Thx Owen, can we please have a follow-up?
Comment 11 Katrin Fischer 2020-11-02 12:21:16 UTC
(In reply to Katrin Fischer from comment #10)
> Thx Owen, can we please have a follow-up?

Meaning Lucas for the follow-up!
Comment 12 Lucas Gass 2020-11-02 23:44:10 UTC
Created attachment 112883 [details] [review]
Bug 26804: (QA follow-up) add modal-lg class and intent markup correctly
Comment 13 Lucas Gass 2020-11-02 23:46:10 UTC
Owen,

modal-wide didn't work for me but modal-lg did.
Comment 14 Owen Leonard 2020-11-03 00:20:57 UTC
(In reply to Lucas Gass from comment #13)

> modal-wide didn't work for me but modal-lg did.

Sorry, that's what I meant! :D
Comment 15 Katrin Fischer 2020-11-03 21:31:13 UTC
Created attachment 112953 [details] [review]
Bug 26804: Add modal content preview

This patch turns the 'News' column into a preview button. That preview button displays a modal with content of that rows news item.

To test:
1. Apply patch
2. Add some HTML to a News Item. I am using a bunch of lorem ipsum HTML and this image set to 1000px. '<img src="https://koha-community.org/files/2013/09/cropped-kohabanner3.jpg" width="1000" />'.
3. Make sure and have some content with a lot of width and some content with a lot of height.
4. Test the Preview content button
5. Make sure you can scroll through long modals and across modals that are wide
6. Try at different screen sizes and with different combonations of News items

Signed-off-by: Kelly  <kelly@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 16 Katrin Fischer 2020-11-03 21:31:17 UTC
Created attachment 112954 [details] [review]
Bug 26804: (QA follow-up) add modal-lg class and intent markup correctly

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 17 Jonathan Druart 2020-11-04 14:00:38 UTC
It may be a problem if the content is malformed, but the codemirror editor should prevent that.
Comment 18 Jonathan Druart 2020-11-04 16:34:07 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 19 Lucas Gass 2020-11-16 21:40:35 UTC
enhancement will not be backported to 20.05.x