-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[4.0] Add a parameter for "back-to-top" button in Cassiopeia #30441
Conversation
Added a parameter to show / hide the back-to-top button in Cassiopeia. Currently the footer appears when a module has been published on position "footer". And the back-to-top only appears if the footer is visible. Since the footer is part of the grid, it is not easy to move the back-to-top outside the grid. Now it is possible to decide to have a back-to-top or not. If yes, the footer will be rendered showing the button, independently if there is a module in the position footer. It is also possible to show only modules (switch back-to-top off) or modules and back-to-top (switch on).
@drmenzelit Does it fix issue #25239 ? Update: Yes, it does. Clarified on Glip. |
Should the sql be updated to include the default setting for this button? |
Is it possible to add scroll-behaviour: smooth - it makes it much nicer than a big jump See https://css-tricks.com/almanac/properties/s/scroll-behavior/ |
Yes, I was thinking about smooth scrolling, but added in this way: https://moderncss.dev/pure-css-smooth-scroll-back-to-top/#add-smooth-scrolling |
Add smooth scrolling taking in account the preferences of the user (reduced motion). Improve language file.
Its the same isnt it? |
with "prefers-reduced-motion: no-preference" we will have the smooth scrolling only if the user has no reduced-motion preferences set |
missed that bit. good spot |
That is not necessary because the default value is set to 0 directly on the field |
@drmenzelit I've applied the PR on current 4.0-dev and run I have a custom html module with some text on footer position, and the back to top button gets the same height as the module has. The button works well, and I could live with that, but maybe you can fix it? |
That is ok because the default value is 0. If it was e.g. 1, one would have to save the template style settings for the first time before calling So maybe we should add it at least to the installation SQL for new installations? |
I will look at this :-) |
@richard67 can you please look again? I added height and position to the button. |
@drmenzelit SCSS code style issue, see report from drone here: https://ci.joomla.org/joomla/joomla-cms/34889/1/24 . It's about the order of properties:
The "xx:yy" at the beginning of each message is "line number":"position in line". |
No it should be ok, I found out how to use stylelint ;-) |
I have tested this item ✅ successfully on 22b39bb This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30441. |
I see the following
Now there is smooth scrolling when the browser setting What if a new option is introduced?
|
I have tested this item ✅ successfully on ed6dd47 This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30441. |
This type of element really should be set o not be printed
|
<footer class="grid-child container-footer footer"> | ||
<hr> | ||
<p class="float-right"> | ||
<jdoc:include type="modules" name="footer" style="none" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please test after installing blog sample data.
The menu module is next to the button, so much that they look related. This is really confusing.
@infograf768 The template structure with colours and margins / paddings is work in progress. |
Link instead button Co-authored-by: Brian Teeman <brian@teeman.net>
Comment for smooth scroll Co-authored-by: Brian Teeman <brian@teeman.net>
I have tested this item ✅ successfully on baac7fb This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30441. |
print styling will be taken care of in redesign of Cassiopeia. George mentioned https://twitter.com/dgrammatiko/status/1298231873425092609?s=21 which is interesting This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30441. |
i really would like to close this pointing to a real pr , can you share a link ? |
I hope this is good enough |
I have tested this item ✅ successfully on baac7fb This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30441. |
RTC This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30441. |
…30441) * [4.0] Add a parameter for back-to-top button in Cassiopeia Added a parameter to show / hide the back-to-top button in Cassiopeia. Currently the footer appears when a module has been published on position "footer". And the back-to-top only appears if the footer is visible. Since the footer is part of the grid, it is not easy to move the back-to-top outside the grid. Now it is possible to decide to have a back-to-top or not. If yes, the footer will be rendered showing the button, independently if there is a module in the position footer. It is also possible to show only modules (switch back-to-top off) or modules and back-to-top (switch on). * Added smooth scrolling Add smooth scrolling taking in account the preferences of the user (reduced motion). Improve language file. * Correct height and position of back-to-top button * Correct code style * Correct code style 2 * Change smooth scrolling behavior to take in account reduced motion preferences * Language file corrected, language string changed to match others * Update language/en-GB/tpl_cassiopeia.ini Link instead button Co-authored-by: Brian Teeman <brian@teeman.net> * Update templates/cassiopeia/scss/blocks/_global.scss Comment for smooth scroll Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Brian Teeman <brian@teeman.net>
* First step to make newsflash horizontal * [4.0] Fix Alert double error display in Installation * seperating multiple messages with border top * Increase minimum length * Fix meter displaying complete message prematurely * Add strenthmeter attribute to installation * Change meter values to display green when password requirements are met * [4.0] {Cassiopea] Implementing Password length/meter * [4.0] Fix Fieldset description display (#30435) * [4.0] Url Language Code is not a prefix (#30440) * [4.0] URL LANGUAGE CODE is not a prefix * modified desc as suggested * [4.0] Implementing display of fieldset descriptions for fieldset children * Taking off description * scss cs * use @Quy suggestion * file cs * [4.0] Media field fix (#30455) * fix * typo, (well nothing new) * Allow media fields in subforms - Cleanup Media field - Expose initilazation method of Bootstrpa Modlas to a Joomla.Bootstrap object - Initilise Modlas on the lifecycle of the Custom Element * Paleolithic js mode only in the legacy… * CS * Proper check * Pffff * Update joomla-field-media.w-c.es6.js * [4.0] Convert icon used for jgrid defaults to fas fa- (#30464) * make icon-circle use fa-circle * allows for including icon- in call * move fa-fw to last class to fit convention (#30469) * [4.0] Long labels wrapping (#30474) When we have fields displayed in columns with the label displayed above the input there is a width limit of 240px on the label. This results in long labels wrapping when it is not needed as the column is wider than 240px. In english we dont see this is many places but the easiest is in the __configure edit screen_ fields This simple PR changes the label width to 100% when the fields are displayed in columns like this. As this is an scss change you will need to `node build.js --compile-css` in order to test ### Before ### After * Fix mod_articles_latest (#30459) * [4.0] Add a parameter for "back-to-top" button in Cassiopeia (#30441) * [4.0] Add a parameter for back-to-top button in Cassiopeia Added a parameter to show / hide the back-to-top button in Cassiopeia. Currently the footer appears when a module has been published on position "footer". And the back-to-top only appears if the footer is visible. Since the footer is part of the grid, it is not easy to move the back-to-top outside the grid. Now it is possible to decide to have a back-to-top or not. If yes, the footer will be rendered showing the button, independently if there is a module in the position footer. It is also possible to show only modules (switch back-to-top off) or modules and back-to-top (switch on). * Added smooth scrolling Add smooth scrolling taking in account the preferences of the user (reduced motion). Improve language file. * Correct height and position of back-to-top button * Correct code style * Correct code style 2 * Change smooth scrolling behavior to take in account reduced motion preferences * Language file corrected, language string changed to match others * Update language/en-GB/tpl_cassiopeia.ini Link instead button Co-authored-by: Brian Teeman <brian@teeman.net> * Update templates/cassiopeia/scss/blocks/_global.scss Comment for smooth scroll Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Brian Teeman <brian@teeman.net> * fix improper family name. (#30481) * [4.0] update helptoc (#30490) * [4.0] update helptoc Removes the string for the expired cache page that no longer exists and removes it from the index displayed on the left hand side in the help page * api * [4.0] Add new permissions-policy to the HTTPHeaders Plugin (#30491) * add permissions-policy * add Permissions-Policy to the dropdown * alpha order * [4.0] Error when changing status of tagged content items (#30466) * Correct column name * Fix changing UCM state * [4.0] br tag (#30503) * [4.0] br tag In Joomla 4 we use `<br>` not `<br />` * bad grep * [4.0] Remove old search component (#30506) * [4.0] Remove old search component The regular search component is not in J4 This pr removes reference to it in the help system `administrator/index.php?option=com_admin&view=help` * revert * [4.0] Help Dashboard (#30508) * [4.0] Help Dashboard This PR makes multiple changes to the help dashboard. In order of importance they are. - Created a new section "Start Here" - Moved "Joomla Help" to the "Start Here" section to give it greater priority as it really is the first place you should look for help - Removed target=_blank from "Joomla Help" - Moved "Documentation Wiki" from "Resources" to the top of "Additional Help" * deduplicate * compass icon * Moved css for mod_articles_news to media folder User webAsset Manager to load specific css for module * Move web asset call to horizontal.php Co-authored-by: Jean-Marie Simonet <infografjms@gmail.com> Co-authored-by: Quy <quy@fluxbb.org> Co-authored-by: dGrammatiko <d.grammatiko@gmail.com> Co-authored-by: Bear <programming@hallhome.us> Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Christiane Maier-Stadtherr <dev@chmst.de> Co-authored-by: Tobias Zulauf <zero-24@users.noreply.github.com> Co-authored-by: SharkyKZ <sharkykz@gmail.com>
@Scrabble96 You know that you have to switch it on in Cassiopeia's template style settings in the "Advanced" tab? |
I do now! It wasn't there in Protostar, so it's going to have to be made obvious to new users of Cassiopeia that it is switched on or off in the Styles Advanced tab. |
@Scrabble96 The description of this PR here explains that clearly. I assumed when you are commenting this PR then yopu have read its description, too. And sure, later it has to be described somewhere in documentations. |
Sorry. Long day. I'll delete my comment. |
Sorry if I sounded too harsh. Was a long day for me, too. |
…30441) * [4.0] Add a parameter for back-to-top button in Cassiopeia Added a parameter to show / hide the back-to-top button in Cassiopeia. Currently the footer appears when a module has been published on position "footer". And the back-to-top only appears if the footer is visible. Since the footer is part of the grid, it is not easy to move the back-to-top outside the grid. Now it is possible to decide to have a back-to-top or not. If yes, the footer will be rendered showing the button, independently if there is a module in the position footer. It is also possible to show only modules (switch back-to-top off) or modules and back-to-top (switch on). * Added smooth scrolling Add smooth scrolling taking in account the preferences of the user (reduced motion). Improve language file. * Correct height and position of back-to-top button * Correct code style * Correct code style 2 * Change smooth scrolling behavior to take in account reduced motion preferences * Language file corrected, language string changed to match others * Update language/en-GB/tpl_cassiopeia.ini Link instead button Co-authored-by: Brian Teeman <brian@teeman.net> * Update templates/cassiopeia/scss/blocks/_global.scss Comment for smooth scroll Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Brian Teeman <brian@teeman.net>
* First step to make newsflash horizontal * [4.0] Fix Alert double error display in Installation * seperating multiple messages with border top * Increase minimum length * Fix meter displaying complete message prematurely * Add strenthmeter attribute to installation * Change meter values to display green when password requirements are met * [4.0] {Cassiopea] Implementing Password length/meter * [4.0] Fix Fieldset description display (joomla#30435) * [4.0] Url Language Code is not a prefix (joomla#30440) * [4.0] URL LANGUAGE CODE is not a prefix * modified desc as suggested * [4.0] Implementing display of fieldset descriptions for fieldset children * Taking off description * scss cs * use @Quy suggestion * file cs * [4.0] Media field fix (joomla#30455) * fix * typo, (well nothing new) * Allow media fields in subforms - Cleanup Media field - Expose initilazation method of Bootstrpa Modlas to a Joomla.Bootstrap object - Initilise Modlas on the lifecycle of the Custom Element * Paleolithic js mode only in the legacy… * CS * Proper check * Pffff * Update joomla-field-media.w-c.es6.js * [4.0] Convert icon used for jgrid defaults to fas fa- (joomla#30464) * make icon-circle use fa-circle * allows for including icon- in call * move fa-fw to last class to fit convention (joomla#30469) * [4.0] Long labels wrapping (joomla#30474) When we have fields displayed in columns with the label displayed above the input there is a width limit of 240px on the label. This results in long labels wrapping when it is not needed as the column is wider than 240px. In english we dont see this is many places but the easiest is in the __configure edit screen_ fields This simple PR changes the label width to 100% when the fields are displayed in columns like this. As this is an scss change you will need to `node build.js --compile-css` in order to test ### Before ### After * Fix mod_articles_latest (joomla#30459) * [4.0] Add a parameter for "back-to-top" button in Cassiopeia (joomla#30441) * [4.0] Add a parameter for back-to-top button in Cassiopeia Added a parameter to show / hide the back-to-top button in Cassiopeia. Currently the footer appears when a module has been published on position "footer". And the back-to-top only appears if the footer is visible. Since the footer is part of the grid, it is not easy to move the back-to-top outside the grid. Now it is possible to decide to have a back-to-top or not. If yes, the footer will be rendered showing the button, independently if there is a module in the position footer. It is also possible to show only modules (switch back-to-top off) or modules and back-to-top (switch on). * Added smooth scrolling Add smooth scrolling taking in account the preferences of the user (reduced motion). Improve language file. * Correct height and position of back-to-top button * Correct code style * Correct code style 2 * Change smooth scrolling behavior to take in account reduced motion preferences * Language file corrected, language string changed to match others * Update language/en-GB/tpl_cassiopeia.ini Link instead button Co-authored-by: Brian Teeman <brian@teeman.net> * Update templates/cassiopeia/scss/blocks/_global.scss Comment for smooth scroll Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Brian Teeman <brian@teeman.net> * fix improper family name. (joomla#30481) * [4.0] update helptoc (joomla#30490) * [4.0] update helptoc Removes the string for the expired cache page that no longer exists and removes it from the index displayed on the left hand side in the help page * api * [4.0] Add new permissions-policy to the HTTPHeaders Plugin (joomla#30491) * add permissions-policy * add Permissions-Policy to the dropdown * alpha order * [4.0] Error when changing status of tagged content items (joomla#30466) * Correct column name * Fix changing UCM state * [4.0] br tag (joomla#30503) * [4.0] br tag In Joomla 4 we use `<br>` not `<br />` * bad grep * [4.0] Remove old search component (joomla#30506) * [4.0] Remove old search component The regular search component is not in J4 This pr removes reference to it in the help system `administrator/index.php?option=com_admin&view=help` * revert * [4.0] Help Dashboard (joomla#30508) * [4.0] Help Dashboard This PR makes multiple changes to the help dashboard. In order of importance they are. - Created a new section "Start Here" - Moved "Joomla Help" to the "Start Here" section to give it greater priority as it really is the first place you should look for help - Removed target=_blank from "Joomla Help" - Moved "Documentation Wiki" from "Resources" to the top of "Additional Help" * deduplicate * compass icon * Moved css for mod_articles_news to media folder User webAsset Manager to load specific css for module * Move web asset call to horizontal.php Co-authored-by: Jean-Marie Simonet <infografjms@gmail.com> Co-authored-by: Quy <quy@fluxbb.org> Co-authored-by: dGrammatiko <d.grammatiko@gmail.com> Co-authored-by: Bear <programming@hallhome.us> Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Christiane Maier-Stadtherr <dev@chmst.de> Co-authored-by: Tobias Zulauf <zero-24@users.noreply.github.com> Co-authored-by: SharkyKZ <sharkykz@gmail.com>
Pull Request for Issue #25239 .
Summary of Changes
Added a parameter to show / hide the back-to-top button in Cassiopeia
Testing Instructions
Install PR, run npm ci or compile the scss files from Cassiopeia
Go to template, under "advanced" a new switcher should appear
Actual result BEFORE applying this Pull Request
Currently the footer appears when a module has been published on position "footer". And the back-to-top only appears if the footer is visible. Since the footer is part of the grid, it is not easy to move the back-to-top outside the grid.
Expected result AFTER applying this Pull Request
Now it is possible to decide to have a back-to-top or not. If yes, the footer will be rendered showing the button, independently if there is a module in the position footer.
It is also possible to show only modules (switch back-to-top off) or modules and back-to-top (switch on).
Example with module on footer and back-to-top button
Documentation Changes Required