? PR-4.0-dev NPM Resource Changed

Pending

User tests: Successful: Unsuccessful:

avatar RickR2H
RickR2H
14 Jul 2021

Pull Request for Issue # .

Summary of Changes

The Cassiopeia template used mobile breakpoint that are to small. With this PR the breakpoint to switch to mobile is shifted from 768px to 992px. My initial PR #34687 to make it breakpoints fully configurable got rejected and I hope this PR is a solution to fix the majority of mobile issues.

breakpoint

The fact that the mobile breakpoint is to small is probably introduced to the switch from Bootstrap 4 to Bootstrap 5 which introduces a sifting in breakpoints.

Testing Instructions

Install the PR and rebuild the CSS. Best to use the demo data to check all other elements too. See if the template behaves like expected.

Actual result BEFORE applying this Pull Request

Mobile breakpoint to small

Expected result AFTER applying this Pull Request

Mobile breakpoint a bit bigger

Documentation Changes Required

No

avatar RickR2H RickR2H - open - 14 Jul 2021
avatar RickR2H RickR2H - change - 14 Jul 2021
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 14 Jul 2021
Category Administration Templates (admin) NPM Change Front End Templates (site)
avatar barsdeveloper
barsdeveloper - comment - 14 Jul 2021

There was no shifting in breakpoints. They just added a new breakpoint, the other ones behave exactly as they did.
https://getbootstrap.com/docs/5.0/migration/#grid-updates

On my device xs is vertical mobile, sm is horizontal mobile. md is never hit.

avatar RickR2H
RickR2H - comment - 14 Jul 2021

There was no shifting in breakpoints. They just added a new breakpoint, the other ones behave exactly as they did.
https://getbootstrap.com/docs/5.0/migration/#grid-updates

On my device xs is vertical mobile, sm is horizontal mobile. md is never hit.

Never mind the breakpoints comment.
On mobile the breakpoints will never be met because the screen is always to small 😉

avatar RickR2H
RickR2H - comment - 14 Jul 2021

@barsdeveloper to clarify a bit more:

mobile-view

avatar RickR2H
RickR2H - comment - 14 Jul 2021

@bembelimen is this PR a better solution?

avatar bembelimen
bembelimen - comment - 14 Jul 2021

Yes, something like that should be the way forward, thx.

avatar chmst
chmst - comment - 26 Jul 2021

Looks good for me. Tesing in firefox,win 10.
Would be nice to get tests from different browsers and screen widths.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34780.

avatar brianteeman
brianteeman - comment - 26 Jul 2021

@RickR2H can you fix the conflicts please

avatar RickR2H RickR2H - change - 26 Jul 2021
Labels Added: Conflicting Files NPM Resource Changed ?
avatar RickR2H
RickR2H - comment - 26 Jul 2021

@brianteeman @chmst Conflicts are fixed

avatar Quy Quy - change - 26 Jul 2021
Title
Fix Cassiopeia mobile breakpoint to small
Fix Cassiopeia mobile breakpoint too small
avatar Quy Quy - edited - 26 Jul 2021
avatar RickR2H RickR2H - change - 28 Jul 2021
Labels Removed: Conflicting Files
avatar MSnoeren MSnoeren - test_item - 29 Jul 2021 - Tested successfully
avatar MSnoeren
MSnoeren - comment - 29 Jul 2021

I have tested this item successfully on c3201d8


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34780.

avatar ricardo1709 ricardo1709 - test_item - 29 Jul 2021 - Tested successfully
avatar ricardo1709
ricardo1709 - comment - 29 Jul 2021

I have tested this item successfully on c3201d8


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34780.

avatar richard67 richard67 - change - 29 Jul 2021
Status Pending Ready to Commit
avatar richard67
richard67 - comment - 29 Jul 2021

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34780.

avatar drmenzelit
drmenzelit - comment - 26 Aug 2021

@RickR2H why are you changing Atum file too?

avatar RickR2H RickR2H - change - 26 Aug 2021
Labels Added: ? PR-4.0-dev
Removed: ?
avatar joomla-cms-bot joomla-cms-bot - change - 26 Aug 2021
Category Administration Templates (admin) NPM Change Front End Templates (site) Front End Templates (site) NPM Change
avatar RickR2H
RickR2H - comment - 26 Aug 2021

@drmenzelit That wasn't my intention. Reverted to SCSS of the Atum template.

avatar bembelimen bembelimen - change - 27 Aug 2021
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2021-08-27 11:00:06
Closed_By bembelimen
Labels Added: ?
Removed: ?
avatar bembelimen bembelimen - close - 27 Aug 2021
avatar bembelimen bembelimen - merge - 27 Aug 2021
avatar bembelimen
bembelimen - comment - 27 Aug 2021

Thx

Add a Comment

Login with GitHub to post a comment