[#34687] - Add mobile breakpoint config to Cassiopeia template and fix padding issues
- Closed
- 13 Jul 2021
- Medium
- Build: 4.0-dev
- # 34687
- Diff
- RickR2H:set-breakpoint
User tests: Successful: Unsuccessful:
Pull Request for Issue # .
Summary of Changes
This PR addresses two issues:
The Cassiopeia template has a left and a right position. At the moment the breakpoint at which the left and right position will stack is way to small and not functional. This is the same with modules in top-a, top-b, bottom-a and bottom-b. With this PR I made the mobile breakpoint configurable in the template settings.
Modules is top-a, top-b, bottom-a and bottom-b don't align with the sidebar-left and sidebar-right position of the Cassiopeia template. This PR fixes this.
The extra mobile classes in the body, adds also a lot of extra flexibility in styling a custom template.
Testing Instructions
- Apply the patch and compile the CSS
- Add multiple modules to the sidebar-left, sidebar-right, top-a, top-b, bottom-a and bottom-b
- See if the modules in top-a, top-b, bottom-a and bottom-b align with the sidebar-left and sidebar-right
- Set the mobile breakpoint in te template an see if the modules respond to the set breakpoint
Actual result BEFORE applying this Pull Request
See description above
Expected result AFTER applying this Pull Request
See description above
Documentation Changes Required
No
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Language & Strings Front End Templates (site) NPM Change |
| Labels |
Added:
?
NPM Resource Changed
?
|
||
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34687.
@ricardo1709 Would you please test again!
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34687.
@brianteeman @ricardo1709 could you please test again.
The errors in the language strings are biting me in the you know what.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34687.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34687.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34687.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34687.
Why do we need options for that? I mean, can't we just do it "right" without options?
@bembelimen Imho the right wat is to make the template scalable, flexible and easy to use even for non programmers. By the way , setting a breakpoint for the left and right position at 992px is not even close to right! This is my attempt to make the template as useful as possible, so people actually start using the template in production or as a solid starting point. If the right way is building form scratch, why do we even bother building a frontend template in the first place. If we want more people to actually start using Joomla, we should make things as easy as possible and make sure thinks look good!
Nevertheless, if you have a better way we can achieve a better and flexible template then I'm all ears.
Would be really great to get this merged before the freeze!
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34687.
I agree with @bembelimen this doesn't really feel like the right place for a parameter for the template. If we need to tweak the stack break and alignment let's do that directly in the scss rather than adding parameters that will be very rarely modified and require a decent amount more scss maintainer overhead.
| Status | Ready to Commit | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-07-13 11:00:39 |
| Closed_By | ⇒ | wilsonge | |
| Labels |
Added:
?
?
|
||
Thanks @wilsonge for you feedback. I partially agree with you. My idea was to make the template actually functional in real live scenarios out of the box. To me it feels a bit like a crippled template that could have some great potential. Imho we now scare new users away by telling them they have to tweak the CSS first to get a decent and practical template.
I still think, it would be a valid PR which just increases the break point once if the current step is too small
I still think, it would be a valid PR which just increases the break point once if the current step is too small
That would be a solution to make the template at least a bit more practical. What breakpoint would in your opinion be the best option, lg (992px) or xl (1200px)?
@sandewt please test this PR?