Skip to content
This repository was archived by the owner on Jan 25, 2021. It is now read-only.

adds ability to have scrollable back to top #168

Closed
N6REJ wants to merge 14 commits into from
Closed

adds ability to have scrollable back to top #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
54742cf
adds ability to have scrollable back to top
N6REJ Oct 3, 2020
78945fd
Update templates/cassiopeia/scss/blocks/_footer.scss
N6REJ Oct 4, 2020
dad8696
Update templates/cassiopeia/scss/blocks/_footer.scss
N6REJ Oct 4, 2020
11e299e
Update templates/cassiopeia/scss/blocks/_footer.scss
N6REJ Oct 4, 2020
c2f76f0
Update templates/cassiopeia/scss/blocks/_footer.scss
N6REJ Oct 4, 2020
52956b0
Update templates/cassiopeia/scss/blocks/_footer.scss
N6REJ Oct 4, 2020
9ea9855
now supports hide below fold
N6REJ Oct 4, 2020
d7045f4
Merge branch 'development' into scrolltotop
N6REJ Oct 4, 2020
448563e
remove unused scss
N6REJ Oct 4, 2020
afcb3eb
center back-top
N6REJ Oct 4, 2020
e9b12e0
fix phpcs
N6REJ Oct 4, 2020
a814bcc
code style fix
N6REJ Oct 4, 2020
8784ae0
only one option... and always fixed
hans2103 Oct 5, 2020
79910c3
moved scss to own file and adjusted styling
hans2103 Oct 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions language/en-GB/tpl_cassiopeia.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,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.<br>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"
Expand Down
17 changes: 9 additions & 8 deletions templates/cassiopeia/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

$stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : '';

?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
Expand Down Expand Up @@ -195,20 +194,22 @@
</div>
<?php endif; ?>

<?php if ($this->countModules('footer') || ($this->params->get('backTop') == 1)) : ?>
<?php if ($this->countModules('footer')) : ?>
<footer class="container-footer footer full-width">
<div class="grid-child">
<jdoc:include type="modules" name="footer" style="none" />
<?php if ($this->params->get('backTop') == 1) : ?>
<a href="#top" id="back-top" class="back-top">
<span class="fas fa-arrow-up" aria-hidden="true"></span>
<span class="sr-only"><?php echo Text::_('TPL_CASSIOPEIA_BACKTOTOP'); ?></span>
</a>
<?php endif; ?>
</div>
</footer>
<?php endif; ?>

<?php if ($this->params->get('backToTop') == 1) : ?>
<div class="back-to-top-wrapper">
<a href="#top" class="back-to-top-link" aria-label="<?php echo Text::_('TPL_CASSIOPEIA_BACKTOTOP'); ?>">
<span class="fas fa-arrow-up fa-fw" aria-hidden="true"></span>
</a>
</div>
<?php endif; ?>

<jdoc:include type="modules" name="debug" style="none" />

</body>
Expand Down
39 changes: 39 additions & 0 deletions templates/cassiopeia/scss/blocks/_back-to-top.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
}
15 changes: 0 additions & 15 deletions templates/cassiopeia/scss/blocks/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,7 @@
color: currentColor;
}

.back-top {
align-self: flex-end;
height: 40px;
padding: $cassiopeia-grid-gutter/2;
margin-left: auto;
color: var(--cassiopeia-color-primary);
background: $white;
border-radius: $border-radius;
}

[dir=rtl] & {
background-image: $cassiopeia-header-grad-rtl;

.back-top {
margin-right: auto;
margin-left: 0;
}
}
}
10 changes: 10 additions & 0 deletions templates/cassiopeia/scss/blocks/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,3 +89,13 @@ meter {
color: var(--cassiopeia-color-link);
}
}

.awesomplete {
input {
@include border-right-radius(0);
}
}

body {
position: relative;
}
1 change: 1 addition & 0 deletions templates/cassiopeia/scss/template.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion templates/cassiopeia/templateDetails.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
</field>

<field
name="backTop"
name="backToTop"
type="radio"
label="TPL_CASSIOPEIA_BACKTOTOP_LABEL"
layout="joomla.form.field.radio.switcher"
Expand Down