Bug 26804

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">

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?

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>

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.

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

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

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>

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.

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?

Thx Owen, can we please have a follow-up?

(In reply to Katrin Fischer from comment #10)
> Thx Owen, can we please have a follow-up?

Meaning Lucas for the follow-up!

Created attachment 112883 [details] [review]
Bug 26804: (QA follow-up) add modal-lg class and intent markup correctly

Owen,

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

(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

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>

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>

It may be a problem if the content is malformed, but the codemirror editor should prevent that.

Pushed to master for 20.11, thanks to everybody involved!

enhancement will not be backported to 20.05.x