Bug 25477 - The responsive design in opac-main.tt should be correct
Summary: The responsive design in opac-main.tt should be correct
Status: CLOSED WONTFIX
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low normal (vote)
Assignee: Timothy Alexis Vass
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-05-13 07:07 UTC by Timothy Alexis Vass
Modified: 2021-06-21 11:53 UTC (History)
1 user (show)

See Also:
Change sponsored?: Sponsored
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Koha-community at Width: 800px (48.75 KB, image/png)
2020-05-13 07:18 UTC, Timothy Alexis Vass
Details
Koha-community at Width: 740px (46.02 KB, image/png)
2020-05-13 07:19 UTC, Timothy Alexis Vass
Details
Koha-community at Width: 888px with content (248.43 KB, image/png)
2020-05-13 07:44 UTC, Timothy Alexis Vass
Details
Koha-community at Width: 720px with content (124.76 KB, image/png)
2020-05-13 07:44 UTC, Timothy Alexis Vass
Details
Proposal: Set #wrap { padding: 0 } and change layout to span8+span4 (209.16 KB, image/png)
2020-05-13 08:20 UTC, Timothy Alexis Vass
Details
Proposal would require corrections between width 767px and 840px (214.05 KB, image/png)
2020-05-13 08:25 UTC, Timothy Alexis Vass
Details
Bug 25477: The responsive design in opac-main.tt should be correct (14.90 KB, patch)
2020-05-13 09:25 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review
Real case scenario 1 (243.22 KB, image/png)
2020-05-14 14:47 UTC, Timothy Alexis Vass
Details
Real case scenario example 2a (265.82 KB, image/png)
2020-05-14 14:48 UTC, Timothy Alexis Vass
Details
Real case scenario example 2b (47.24 KB, image/png)
2020-05-14 14:48 UTC, Timothy Alexis Vass
Details
Bug 25477: The responsive design in opac-main.tt should be correct (12.89 KB, patch)
2020-05-14 15:27 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Timothy Alexis Vass 2020-05-13 07:07:20 UTC
Currently these are the possible layouts in opac-main.tt

---A---
OpacNav/OpacNavBottom: span2
Main: span7
Login/OpacNavRight: span3

---B---
OpacNav/OpacNavBottom: span2
Main: span10

---C---
Main: span9
Login/OpacNavRight: span3

---D---
Main: span12



Possibilities to improve are found here:

@media (min-width:768px) and (max-width:979px):
The layouts A, B and C are too narrow.

@media (max-width:767px):
Right column gets positioned at the bottom.
Comment 1 Timothy Alexis Vass 2020-05-13 07:18:00 UTC
Created attachment 104822 [details]
Koha-community at Width: 800px
Comment 2 Timothy Alexis Vass 2020-05-13 07:19:08 UTC
Created attachment 104823 [details]
Koha-community at Width: 740px
Comment 3 Timothy Alexis Vass 2020-05-13 07:44:04 UTC
Created attachment 104824 [details]
Koha-community at Width: 888px with content
Comment 4 Timothy Alexis Vass 2020-05-13 07:44:26 UTC
Created attachment 104825 [details]
Koha-community at Width: 720px with content
Comment 5 Timothy Alexis Vass 2020-05-13 08:20:39 UTC
Created attachment 104827 [details]
Proposal: Set #wrap { padding: 0 } and change layout to span8+span4

This layout almost looks good with:

#wrap {
    padding: 0;
}

Main: span8
Login/OpacNavRight/OpacNav/OpacNavBottom: span4

---Required changes---
opac-tmpl/bootstrap/en/modules/opac-main.tt
opac-tmpl/bootstrap/css/opac_19.0504000.css
Comment 6 Timothy Alexis Vass 2020-05-13 08:25:59 UTC
Created attachment 104828 [details]
Proposal would require corrections between width 767px and 840px
Comment 7 Timothy Alexis Vass 2020-05-13 09:25:12 UTC
Created attachment 104829 [details] [review]
Bug 25477: The responsive design in opac-main.tt should be correct

    @media (min-width:768px) and (max-width:979px):
    The layouts with columns are too narrow.

    This patch changes the layout to be span8+span4 and puts OpacNav/OpacNavBottom under Login/OpacNavRight in the right column.

    To test:
    1) Navigate to cgi-bin/koha/opac-main.pl with content in OpacNav/OpacNavBottom and Login/OpacNavRight, or look at the attached screenshots: https://bugs.koha-community.org/bugzilla3/attachment.cgi?bugid=25477&action=viewall&hide_obsolete=1
    2) Apply patch.
    3) Try different screen widths at 678px and above.
    4) Sign off.

    Sponsored-by: Lunds Universitetsbibliotek
Comment 8 Owen Leonard 2020-05-14 12:57:22 UTC
Don't forget to assign bugs to yourself when you plan to submit a patch. Mark the bug "Needs signoff" when your patch is ready to test.
Comment 9 Owen Leonard 2020-05-14 13:06:00 UTC
Without seeing what our proposed change would do, I assumed based on your comments that you were going to adjust the layout in some way while keeping the existing layout options.

I don't think it's a viable solution to change the layout in a way that eliminates the existing choices.

Also, your patch adds dummy text to opac-main.tt. If you'd like to test your layouts with dummy text during development you can use the OpacMainUserBlock news location to define content.
Comment 10 Timothy Alexis Vass 2020-05-14 14:47:46 UTC
Created attachment 104889 [details]
Real case scenario 1
Comment 11 Timothy Alexis Vass 2020-05-14 14:48:16 UTC
Created attachment 104890 [details]
Real case scenario example 2a
Comment 12 Timothy Alexis Vass 2020-05-14 14:48:49 UTC
Created attachment 104891 [details]
Real case scenario example 2b
Comment 13 Timothy Alexis Vass 2020-05-14 15:02:47 UTC
Thank you Owen for the clear guidance and for kindly pointing out the specifics.
Thank you also so much for sharing the knowledge about the OpacMainUserBlock news location to define content.

Actual information is to be presented in these columns and they are simply too narrow, resulting in 2-3 words per row.

I have added 3 more screenshots to show what this looks like in a real case scenario.

Because the sidebar needs to present a useful amount of content, which logically requires a certain amount of width, span4 for both the sidebars.

Is this possible to achieve the required width other than a span8+span4 layout?
Comment 14 Timothy Alexis Vass 2020-05-14 15:27:01 UTC
Created attachment 104893 [details] [review]
Bug 25477: The responsive design in opac-main.tt should be correct

    @media (min-width:768px) and (max-width:979px):
    The layouts with columns are too narrow.

    This patch changes the layout to be span8+span4 and puts OpacNav/OpacNavBottom under Login/OpacNavRight in the right column.

    To test:
    1) Navigate to cgi-bin/koha/opac-main.pl with content in OpacNav/OpacNavBottom and Login/OpacNavRight, or look at the attached screenshots: https://bugs.koha-community.org/bugzilla3/attachment.cgi?bugid=25477&action=viewall&hide_obsolete=1
    2) Apply patch.
    3) Try different screen widths at 678px and above.
    4) Sign off.

    Sponsored-by: Lunds Universitetsbibliotek
Comment 15 Timothy Alexis Vass 2020-06-08 05:38:55 UTC
Options are nice, of course. But only when all available options are fully functional.

I suggest we go forward with this.
To replace the 3-column layout completely, since it is broken.
Comment 16 Lucas Gass 2020-07-31 22:25:16 UTC
Hi Timothy,

Two things, firstly this patch no longer cleanly applies to master and is in need of a rebase.

Secondly, I worry that changing bootstrap classes like this will be problematic for existing Koha users who have their OPAC's set up in a certain way. Is this a consideration? Keep in mind I say that without having tested this patch because it won't clean apply.
Comment 17 Timothy Alexis Vass 2020-08-03 14:21:37 UTC
I found this issue and proposed this solution, which is the only viable one I can find, as it fixes all the layout requirements.

If it's not desired or if you have a better solution, then you can go ahead and close the bug.