[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 <[email protected]> * Update templates/cassiopeia/scss/blocks/_global.scss Comment for smooth scroll Co-authored-by: Brian Teeman <[email protected]> Co-authored-by: Brian Teeman <[email protected]>
sakiss · Oct 16, 2020 · 9644dcb · 9644dcb
1 parent cc31ccf
commit 9644dcb
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/language/en-GB/tpl_cassiopeia.ini b/language/en-GB/tpl_cassiopeia.ini
@@ -4,6 +4,7 @@
 ; Note : All ini files need to be saved as UTF-8
 
 TPL_CASSIOPEIA_BACKTOTOP="Back to Top"
+TPL_CASSIOPEIA_BACKTOTOP_LABEL="Back-to-top Link"
 TPL_CASSIOPEIA_FLUID="Fluid"
 TPL_CASSIOPEIA_FLUID_LABEL="Fluid Layout"
 TPL_CASSIOPEIA_LOGO_LABEL="Logo"

diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
@@ -177,16 +177,15 @@
 	</div>
 	<?php endif; ?>
 
-	<?php if ($this->countModules('footer')) : ?>
+	<?php if ($this->countModules('footer') || ($this->params->get('backTop') == 1)) : ?>
 	<footer class="grid-child container-footer footer">
-		<hr>
-		<p class="float-right">
+		<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>
-		</p>
-		<jdoc:include type="modules" name="footer" style="none" />
+		<?php endif; ?>
 	</footer>
 	<?php endif; ?>
 

diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss
@@ -3,11 +3,14 @@
 .footer {
 
   .back-top {
+    align-self: flex-end;
+    height: 40px;
     padding: 8px 11px;
     color: #fff;
     background: $cassiopeia-template-color;
     border-radius: 3px;
 
     @include margin("right", 5px);
+    @include margin("left", auto);
   }
 }
diff --git a/templates/cassiopeia/scss/blocks/_global.scss b/templates/cassiopeia/scss/blocks/_global.scss
@@ -1,4 +1,12 @@
 // Global
+:root {
+  scroll-behavior: smooth;
+
+  // Disable smooth scroll when the user has set "prefers-reduced-motion"
+  @media screen and (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+}
 
 html {
   font-size: $font-size-root;

diff --git a/templates/cassiopeia/templateDetails.xml b/templates/cassiopeia/templateDetails.xml
@@ -91,6 +91,18 @@
 					<option value="0">JNO</option>
 					<option value="1">JYES</option>
 				</field>
+
+				<field
+					name="backTop"
+					type="radio"
+					label="TPL_CASSIOPEIA_BACKTOTOP_LABEL"
+					layout="joomla.form.field.radio.switcher"
+					default="0"
+					filter="integer"
+					>
+					<option value="0">JNO</option>
+					<option value="1">JYES</option>
+				</field>
 			</fieldset>
 		</fields>
 	</config>