Skip to content
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

Merged
merged 11 commits into from
Aug 26, 2020

Conversation

drmenzelit
Copy link
Contributor

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
Screenshot_2020-08-21 Templates Edit Style - Joomla Cassiopeia - Administration

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

Screenshot_2020-08-21 Home

Documentation Changes Required

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).
@joomla-cms-bot joomla-cms-bot added Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Aug 21, 2020
@richard67
Copy link
Member

richard67 commented Aug 21, 2020

@drmenzelit Does it fix issue #25239 ?

Update: Yes, it does. Clarified on Glip.

@brianteeman
Copy link
Contributor

Should the sql be updated to include the default setting for this button?

@brianteeman
Copy link
Contributor

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/

@drmenzelit
Copy link
Contributor Author

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.
@brianteeman
Copy link
Contributor

Its the same isnt it?

@drmenzelit
Copy link
Contributor Author

drmenzelit commented Aug 21, 2020

with "prefers-reduced-motion: no-preference" we will have the smooth scrolling only if the user has no reduced-motion preferences set

@brianteeman
Copy link
Contributor

missed that bit. good spot

@drmenzelit
Copy link
Contributor Author

Should the sql be updated to include the default setting for this button?

That is not necessary because the default value is set to 0 directly on the field

@richard67
Copy link
Member

richard67 commented Aug 21, 2020

@drmenzelit I've applied the PR on current 4.0-dev and run npm ciand even cleared browser cache and so on, but here it looks strange.

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.

backtotop-1

The button works well, and I could live with that, but maybe you can fix it?

@richard67
Copy link
Member

Should the sql be updated to include the default setting for this button?

That is not necessary because the default value is set to 0 directly on the field

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 $this->params->get('backTop') would return 1.

So maybe we should add it at least to the installation SQL for new installations?

@drmenzelit
Copy link
Contributor Author

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?

I will look at this :-)

@drmenzelit
Copy link
Contributor Author

@richard67 can you please look again? I added height and position to the button.

@richard67
Copy link
Member

@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:

templates/cassiopeia/scss/blocks/_footer.scss
10:5 Expected "height" to come before "border-radius" order/properties-order
11:5 Expected "align-self" to come before "height" order/properties-order

The "xx:yy" at the beginning of each message is "line number":"position in line".

@drmenzelit
Copy link
Contributor Author

No it should be ok, I found out how to use stylelint ;-)

@richard67
Copy link
Member

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.

@hans2103
Copy link
Contributor

I see the following

@media screen and (prefers-reduced-motion: no-preference) {
  html,
  body {
    scroll-behavior: smooth;
  }
}

Now there is smooth scrolling when the browser setting prefers-reduced-motion === no-preference
Besides no-preference there is the option reduced. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
So... when reduced is set the scroll-behavior will not be set.

What if a new option is introduced?
Wouldn't it be better to turn things around?

:root {
  scroll-behavior: smooth;

  // No smooth scroll for people who prefer not to
  @media screen and (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

@chmst
Copy link
Contributor

chmst commented Aug 22, 2020

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.

@brianteeman
Copy link
Contributor

This type of element really should be set o not be printed

@media print { .back-top{ display: none; } }

<footer class="grid-child container-footer footer">
<hr>
<p class="float-right">
<jdoc:include type="modules" name="footer" style="none" />
Copy link
Member

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.

@chmst
Copy link
Contributor

chmst commented Aug 22, 2020

@infograf768 The template structure with colours and margins / paddings is work in progress.

drmenzelit and others added 2 commits August 23, 2020 07:48
Link instead button

Co-authored-by: Brian Teeman <brian@teeman.net>
Comment for smooth scroll

Co-authored-by: Brian Teeman <brian@teeman.net>
@hans2103
Copy link
Contributor

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.

@hans2103
Copy link
Contributor

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.

@alikon
Copy link
Contributor

alikon commented Aug 26, 2020

i really would like to close this pointing to a real pr , can you share a link ?

@hans2103
Copy link
Contributor

i really would like to close this pointing to a real pr , can you share a link ?

I hope this is good enough
https://github.com/joomla/cassiopeia/issues

@chmst
Copy link
Contributor

chmst commented Aug 26, 2020

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.

@richard67
Copy link
Member

RTC


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

@joomla-cms-bot joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Aug 26, 2020
@infograf768 infograf768 merged commit 6f666d7 into joomla:4.0-dev Aug 26, 2020
@joomla-cms-bot joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Aug 26, 2020
@infograf768 infograf768 added this to the Joomla 4.0 milestone Aug 26, 2020
@infograf768
Copy link
Member

Tks.

Reminder

The module displayed in the footer position is real bad and should be corrected.
Screen Shot 2020-08-26 at 10 49 04

drmenzelit added a commit to drmenzelit/joomla-cms that referenced this pull request Aug 31, 2020
…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>
infograf768 added a commit that referenced this pull request Sep 4, 2020
* 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>
@richard67
Copy link
Member

@Scrabble96 You know that you have to switch it on in Cassiopeia's template style settings in the "Advanced" tab?

@Scrabble96
Copy link
Contributor

@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.

@richard67
Copy link
Member

@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.

@Scrabble96
Copy link
Contributor

@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.

@richard67
Copy link
Member

Sorry if I sounded too harsh. Was a long day for me, too.

sakiss pushed a commit to sakiss/joomla-cms that referenced this pull request Oct 16, 2020
…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>
sakiss pushed a commit to sakiss/joomla-cms that referenced this pull request Oct 16, 2020
* 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>
@drmenzelit drmenzelit deleted the 4.0-dev-back-to-top branch December 9, 2020 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester
Projects
None yet
Development

Successfully merging this pull request may close these issues.