From 54742cff237f4d7ed6b8c0bd27383505628ef319 Mon Sep 17 00:00:00 2001 From: "Troy T. Hall" Date: Sat, 3 Oct 2020 10:22:53 -0500 Subject: [PATCH 01/13] adds ability to have scrollable back to top --- language/en-GB/tpl_cassiopeia.ini | 1 + templates/cassiopeia/index.php | 4 ++- templates/cassiopeia/scss/blocks/_footer.scss | 30 ++++++++++++++++--- templates/cassiopeia/templateDetails.xml | 12 ++++++++ 4 files changed, 42 insertions(+), 5 deletions(-) diff --git a/language/en-GB/tpl_cassiopeia.ini b/language/en-GB/tpl_cassiopeia.ini index 1d2d4c31b1..c4e33904d0 100644 --- a/language/en-GB/tpl_cassiopeia.ini +++ b/language/en-GB/tpl_cassiopeia.ini @@ -15,6 +15,7 @@ TPL_CASSIOPEIA_FONT_GROUP_WEB="Fonts from Web" TPL_CASSIOPEIA_FONT_LABEL="Fonts Scheme" TPL_CASSIOPEIA_FONT_NOTE_TEXT="Loading fonts from external sources might be against privacy regulations in some countries.
Loading fonts from a local folder might have a performance impact on your site." TPL_CASSIOPEIA_LOGO_LABEL="Logo" +TPL_CASSIOPEIA_SCROLLTOTOP_LABEL="Scroll-to-top" TPL_CASSIOPEIA_STATIC="Static" TPL_CASSIOPEIA_STICKY_LABEL="Sticky Header" TPL_CASSIOPEIA_TOGGLE="Toggle Navigation" diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php index 124bcc7ed8..87bc996eee 100644 --- a/templates/cassiopeia/index.php +++ b/templates/cassiopeia/index.php @@ -90,6 +90,8 @@ $stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : ''; +$scrollTop = $this->params->get('scrollTop', false) ? 'scroll scroll-top' : 'back-top'; + ?> @@ -200,7 +202,7 @@
params->get('backTop') == 1) : ?> - + diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index 5e071cfd5b..e7f080f316 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -8,11 +8,11 @@ .grid-child { padding: 2.5rem ($cassiopeia-grid-gutter/2); - } + } a { color: currentColor; - } + } .back-top { align-self: flex-end; @@ -22,7 +22,7 @@ color: var(--cassiopeia-color-primary); background: $white; border-radius: $border-radius; - } + } [dir=rtl] & { background-image: $cassiopeia-header-grad-rtl; @@ -30,6 +30,28 @@ .back-top { margin-right: auto; margin-left: 0; + } + } + + // Scrolling back to top + .scroll { + position: fixed; + bottom: 1rem; + z-index: 99; + outline: none; + height: 40px; + padding: $cassiopeia-grid-gutter/2; + margin-left: auto; + color: var(--cassiopeia-color-primary); + background: $white; + border-radius: $border-radius; + cursor: pointer; + text-decoration: none; + + &-top { + right: 1rem; + } } } -} + + diff --git a/templates/cassiopeia/templateDetails.xml b/templates/cassiopeia/templateDetails.xml index c1b16eb6f3..be71e5b722 100644 --- a/templates/cassiopeia/templateDetails.xml +++ b/templates/cassiopeia/templateDetails.xml @@ -137,6 +137,18 @@ + + + + + From 78945fda1a038b43957dffdc060d12a65a0ba76f Mon Sep 17 00:00:00 2001 From: Bear Date: Sun, 4 Oct 2020 05:35:21 -0500 Subject: [PATCH 02/13] Update templates/cassiopeia/scss/blocks/_footer.scss Co-authored-by: Richard Fath --- templates/cassiopeia/scss/blocks/_footer.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index e7f080f316..54cc381015 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -50,8 +50,7 @@ &-top { right: 1rem; - } } } - +} From dad8696b331b0d5f12feb18bea2f15fc2b1adaf0 Mon Sep 17 00:00:00 2001 From: Bear Date: Sun, 4 Oct 2020 05:35:29 -0500 Subject: [PATCH 03/13] Update templates/cassiopeia/scss/blocks/_footer.scss Co-authored-by: Richard Fath --- templates/cassiopeia/scss/blocks/_footer.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index 54cc381015..c31f44e932 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -30,8 +30,8 @@ .back-top { margin-right: auto; margin-left: 0; - } } + } // Scrolling back to top .scroll { @@ -53,4 +53,3 @@ } } } - From 11e299eb5b631bc2c05766c1c4c952749e47a35f Mon Sep 17 00:00:00 2001 From: Bear Date: Sun, 4 Oct 2020 05:35:37 -0500 Subject: [PATCH 04/13] Update templates/cassiopeia/scss/blocks/_footer.scss Co-authored-by: Richard Fath --- templates/cassiopeia/scss/blocks/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index c31f44e932..c2ccf1fc98 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -22,7 +22,7 @@ color: var(--cassiopeia-color-primary); background: $white; border-radius: $border-radius; - } + } [dir=rtl] & { background-image: $cassiopeia-header-grad-rtl; From c2f76f0d33d6e50616bb51d2685ad93376d91692 Mon Sep 17 00:00:00 2001 From: Bear Date: Sun, 4 Oct 2020 05:35:47 -0500 Subject: [PATCH 05/13] Update templates/cassiopeia/scss/blocks/_footer.scss Co-authored-by: Richard Fath --- templates/cassiopeia/scss/blocks/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index c2ccf1fc98..7e79d1c59a 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -12,7 +12,7 @@ a { color: currentColor; - } + } .back-top { align-self: flex-end; From 52956b069884cb2ce47945df510546000aa5dfc7 Mon Sep 17 00:00:00 2001 From: Bear Date: Sun, 4 Oct 2020 05:35:55 -0500 Subject: [PATCH 06/13] Update templates/cassiopeia/scss/blocks/_footer.scss Co-authored-by: Richard Fath --- templates/cassiopeia/scss/blocks/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index 7e79d1c59a..cfd643e076 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -8,7 +8,7 @@ .grid-child { padding: 2.5rem ($cassiopeia-grid-gutter/2); - } + } a { color: currentColor; From 9ea985580e879b8fe2796be3699764b30fc3f176 Mon Sep 17 00:00:00 2001 From: "Troy T. Hall" Date: Sun, 4 Oct 2020 08:34:16 -0500 Subject: [PATCH 07/13] now supports hide below fold --- templates/cassiopeia/index.php | 12 ++++--- templates/cassiopeia/scss/blocks/_footer.scss | 33 +++++++++++++++++-- templates/cassiopeia/scss/blocks/_global.scss | 4 +++ 3 files changed, 41 insertions(+), 8 deletions(-) diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php index 87bc996eee..1524e1fc30 100644 --- a/templates/cassiopeia/index.php +++ b/templates/cassiopeia/index.php @@ -90,7 +90,7 @@ $stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : ''; -$scrollTop = $this->params->get('scrollTop', false) ? 'scroll scroll-top' : 'back-top'; +$scrollTop = $this->params->get('scrollTop', false) ? 'scroll-top' : 'back-top'; ?> @@ -202,10 +202,12 @@
params->get('backTop') == 1) : ?> - - - - +
+ + + + +
diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index cfd643e076..f769859e48 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -14,7 +14,7 @@ color: currentColor; } - .back-top { + .back-top-wrapper { align-self: flex-end; height: 40px; padding: $cassiopeia-grid-gutter/2; @@ -27,14 +27,14 @@ [dir=rtl] & { background-image: $cassiopeia-header-grad-rtl; - .back-top { + .back-top-wrapper { margin-right: auto; margin-left: 0; } } // Scrolling back to top - .scroll { + /*.scroll { position: fixed; bottom: 1rem; z-index: 99; @@ -52,4 +52,31 @@ right: 1rem; } } + */ + + .scroll-top-wrapper { + position: absolute; + top: 100vh; + right: 1rem; + bottom: 0; + width: 40px; + pointer-events: none; + } + + .scroll-top { + position: fixed; + position: sticky; + pointer-events: all; + top: calc(100vh - 3rem); + z-index: 99; + outline: none; + height: 40px; + padding: $cassiopeia-grid-gutter/2; + margin-left: auto; + color: var(--cassiopeia-color-primary); + background: $white; + border-radius: $border-radius; + cursor: pointer; + text-decoration: none; + } } diff --git a/templates/cassiopeia/scss/blocks/_global.scss b/templates/cassiopeia/scss/blocks/_global.scss index 662343d257..099e888940 100644 --- a/templates/cassiopeia/scss/blocks/_global.scss +++ b/templates/cassiopeia/scss/blocks/_global.scss @@ -109,3 +109,7 @@ meter { @include border-right-radius(0); } } + +body { + position: relative; +} From 448563e044b227ac6a97dae581485d377c897d22 Mon Sep 17 00:00:00 2001 From: "Troy T. Hall" Date: Sun, 4 Oct 2020 08:46:29 -0500 Subject: [PATCH 08/13] remove unused scss --- templates/cassiopeia/scss/blocks/_footer.scss | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index f769859e48..5e40027a55 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -33,26 +33,6 @@ } } - // Scrolling back to top - /*.scroll { - position: fixed; - bottom: 1rem; - z-index: 99; - outline: none; - height: 40px; - padding: $cassiopeia-grid-gutter/2; - margin-left: auto; - color: var(--cassiopeia-color-primary); - background: $white; - border-radius: $border-radius; - cursor: pointer; - text-decoration: none; - - &-top { - right: 1rem; - } - } - */ .scroll-top-wrapper { position: absolute; From afcb3eb1bd55c65118f866baf30588871fda7bdf Mon Sep 17 00:00:00 2001 From: "Troy T. Hall" Date: Sun, 4 Oct 2020 08:58:20 -0500 Subject: [PATCH 09/13] center back-top --- templates/cassiopeia/index.php | 2 +- templates/cassiopeia/scss/blocks/_footer.scss | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php index 4d0e204030..2098b2a7bc 100644 --- a/templates/cassiopeia/index.php +++ b/templates/cassiopeia/index.php @@ -204,7 +204,7 @@ params->get('backTop') == 1) : ?>
- +
diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index 5e40027a55..5543363fac 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -16,8 +16,6 @@ .back-top-wrapper { align-self: flex-end; - height: 40px; - padding: $cassiopeia-grid-gutter/2; margin-left: auto; color: var(--cassiopeia-color-primary); background: $white; @@ -33,6 +31,11 @@ } } + & .fa-fw { + width: 40px; + height: 40px; + padding: $cassiopeia-grid-gutter/2; + } .scroll-top-wrapper { position: absolute; From e9b12e08790200a1f46931f97936bac668f47f75 Mon Sep 17 00:00:00 2001 From: "Troy T. Hall" Date: Sun, 4 Oct 2020 09:04:47 -0500 Subject: [PATCH 10/13] fix phpcs --- templates/cassiopeia/index.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php index 2098b2a7bc..b419d1dbfa 100644 --- a/templates/cassiopeia/index.php +++ b/templates/cassiopeia/index.php @@ -203,11 +203,11 @@ params->get('backTop') == 1) : ?>
- - - - -
+ + + + +
From a814bcc0570e365481d22533e0d17f45cd9c9a11 Mon Sep 17 00:00:00 2001 From: "Troy T. Hall" Date: Sun, 4 Oct 2020 09:05:51 -0500 Subject: [PATCH 11/13] code style fix --- templates/cassiopeia/templateDetails.xml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/cassiopeia/templateDetails.xml b/templates/cassiopeia/templateDetails.xml index 889fd86499..fe197ba8ee 100644 --- a/templates/cassiopeia/templateDetails.xml +++ b/templates/cassiopeia/templateDetails.xml @@ -139,12 +139,12 @@ From 8784ae073e91400b62197a54eac85f1612ce1fdc Mon Sep 17 00:00:00 2001 From: Hans Kuijpers Date: Mon, 5 Oct 2020 19:43:44 +0200 Subject: [PATCH 12/13] only one option... and always fixed --- templates/cassiopeia/index.php | 21 +++++++++------------ templates/cassiopeia/templateDetails.xml | 14 +------------- 2 files changed, 10 insertions(+), 25 deletions(-) diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php index b419d1dbfa..de09201114 100644 --- a/templates/cassiopeia/index.php +++ b/templates/cassiopeia/index.php @@ -89,9 +89,6 @@ $this->setMetaData('viewport', 'width=device-width, initial-scale=1'); $stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : ''; - -$scrollTop = $this->params->get('scrollTop', false) ? 'scroll-top' : 'back-top'; - ?> @@ -197,22 +194,22 @@ - countModules('footer') || ($this->params->get('backTop') == 1)) : ?> + countModules('footer')) : ?>
- params->get('backTop') == 1) : ?> -
- - - - -
-
+ params->get('backToTop') == 1) : ?> +
+ + + +
+ + diff --git a/templates/cassiopeia/templateDetails.xml b/templates/cassiopeia/templateDetails.xml index fe197ba8ee..3955a15f31 100644 --- a/templates/cassiopeia/templateDetails.xml +++ b/templates/cassiopeia/templateDetails.xml @@ -127,7 +127,7 @@ JNO - - - - - From 79910c382bf332ac54cfb65f44ada45bca07c5c8 Mon Sep 17 00:00:00 2001 From: Hans Kuijpers Date: Mon, 5 Oct 2020 19:43:59 +0200 Subject: [PATCH 13/13] moved scss to own file and adjusted styling --- .../cassiopeia/scss/blocks/_back-to-top.scss | 39 ++++++++++++++++ templates/cassiopeia/scss/blocks/_footer.scss | 45 ------------------- templates/cassiopeia/scss/template.scss | 1 + 3 files changed, 40 insertions(+), 45 deletions(-) create mode 100644 templates/cassiopeia/scss/blocks/_back-to-top.scss diff --git a/templates/cassiopeia/scss/blocks/_back-to-top.scss b/templates/cassiopeia/scss/blocks/_back-to-top.scss new file mode 100644 index 0000000000..f2f1b3187d --- /dev/null +++ b/templates/cassiopeia/scss/blocks/_back-to-top.scss @@ -0,0 +1,39 @@ +/** + * Back to Top + * inspired by https://moderncss.dev/pure-css-smooth-scroll-back-to-top/ + */ +$scrollLength: 100vh; +$linkOffset: 5rem; + +.back-to-top-wrapper { + position: absolute; + top: calc(#{$scrollLength} + #{$linkOffset}); + right: $cassiopeia-grid-gutter; + bottom: 0; + width: 2.25rem; + pointer-events: none; + + @at-root [dir=rtl] & { + right: unset; + left: $cassiopeia-grid-gutter; + } +} + +.back-to-top-link { + position: fixed; + position: sticky; + pointer-events: all; + top: calc(#{$scrollLength} - #{$linkOffset}); + padding: $cassiopeia-grid-gutter/2; + color: var(--cassiopeia-color-primary, $standard-color-primary); + background-color: var(--white, $white); + border: 1px solid transparent; + border-radius: $border-radius; + transition: border-color 200ms ease-in; + + &:hover, + &:focus { + color: var(--cassiopeia-color-hover); + border-color: var(--cassiopeia-color-primary, $standard-color-primary); + } +} diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss index 5543363fac..781f0ac049 100644 --- a/templates/cassiopeia/scss/blocks/_footer.scss +++ b/templates/cassiopeia/scss/blocks/_footer.scss @@ -14,52 +14,7 @@ color: currentColor; } - .back-top-wrapper { - align-self: flex-end; - margin-left: auto; - color: var(--cassiopeia-color-primary); - background: $white; - border-radius: $border-radius; - } - [dir=rtl] & { background-image: $cassiopeia-header-grad-rtl; - - .back-top-wrapper { - margin-right: auto; - margin-left: 0; - } - } - - & .fa-fw { - width: 40px; - height: 40px; - padding: $cassiopeia-grid-gutter/2; - } - - .scroll-top-wrapper { - position: absolute; - top: 100vh; - right: 1rem; - bottom: 0; - width: 40px; - pointer-events: none; - } - - .scroll-top { - position: fixed; - position: sticky; - pointer-events: all; - top: calc(100vh - 3rem); - z-index: 99; - outline: none; - height: 40px; - padding: $cassiopeia-grid-gutter/2; - margin-left: auto; - color: var(--cassiopeia-color-primary); - background: $white; - border-radius: $border-radius; - cursor: pointer; - text-decoration: none; } } diff --git a/templates/cassiopeia/scss/template.scss b/templates/cassiopeia/scss/template.scss index 0ff1a76589..75ae00fd24 100644 --- a/templates/cassiopeia/scss/template.scss +++ b/templates/cassiopeia/scss/template.scss @@ -22,6 +22,7 @@ // Blocks @import "blocks/global"; // Leave this first @import "blocks/alerts"; +@import "blocks/back-to-top"; @import "blocks/banner"; @import "blocks/footer"; @import "blocks/form";