From 5be20a256c3d3080b697f79422c852eeeae12cd7 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 30 Sep 2022 11:24:06 -0400
Subject: [PATCH] =?UTF-8?q?feat(core):=20=E2=9C=A8=20add=20jump=20to=20top?=
 =?UTF-8?q?=20link=20to=20sticky=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/SkinCitizen.php                      |  2 +-
 .../skins.citizen.styles/Stickyheader.less    | 22 +++++++++++++++++++
 resources/skins.citizen.styles/layout.less    |  2 +-
 templates/ContentHeader.mustache              |  2 ++
 templates/Header.mustache                     |  3 +--
 5 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php
index 65672bfc..95f7c08c 100644
--- a/includes/SkinCitizen.php
+++ b/includes/SkinCitizen.php
@@ -125,12 +125,12 @@ class SkinCitizen extends SkinMustache {
 				'data-notifications' => $header->getNotifications(),
 				'data-personal-menu' => $header->buildPersonalMenu(),
 				'data-search-box' => $header->buildSearchProps(),
-				'html-citizen-jumptotop' => $this->msg( 'citizen-jumptotop' )->text() . ' [home]',
 			],
 			'data-pagetools' => $tools->buildPageTools( $parentData ),
 			'data-citizen-footer' => $footer->getFooterData(),
 			// HTML strings
 			'html-title-heading--formatted' => $pageTitle->buildTitle( $parentData, $title ),
+			'html-citizen-jumptotop' => $this->msg( 'citizen-jumptotop' )->text() . ' [home]',
 			'html-body-content--formatted' => $bodycontent->buildBodyContent(),
 			'html-tagline' => $tagline->getTagline(),
 		];
diff --git a/resources/skins.citizen.styles/Stickyheader.less b/resources/skins.citizen.styles/Stickyheader.less
index f68628a9..aaf2422b 100644
--- a/resources/skins.citizen.styles/Stickyheader.less
+++ b/resources/skins.citizen.styles/Stickyheader.less
@@ -29,9 +29,31 @@
 		}
 	}
 
+	.page-heading {
+		position: relative;
+	}
+
 	.firstHeading {
 		font-size: 1.25rem;
 	}
+
+	.citizen-jumptotop {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		border-radius: var( --border-radius--small );
+		margin: ~'calc( var( --space-sm ) * -1 )';
+
+		&:hover {
+			background-color: var( --background-color-quiet--hover );
+		}
+
+		&:active {
+			background-color: var( --background-color-quiet--active );
+		}
+	}
 }
 
 @media ( max-width: @width-breakpoint-tablet ), ( max-height: 800px ) {
diff --git a/resources/skins.citizen.styles/layout.less b/resources/skins.citizen.styles/layout.less
index 890cd9a8..f94c4b80 100644
--- a/resources/skins.citizen.styles/layout.less
+++ b/resources/skins.citizen.styles/layout.less
@@ -28,7 +28,7 @@
 	padding-top: var( --space-md );
 	margin-top: var( --space-xl );
 	margin-bottom: @content-margin-top * 2;
-	gap: @content-margin-top;
+	gap: var( --space-lg );
 }
 
 .page-heading {
diff --git a/templates/ContentHeader.mustache b/templates/ContentHeader.mustache
index 91f6afc9..2ea3b650 100644
--- a/templates/ContentHeader.mustache
+++ b/templates/ContentHeader.mustache
@@ -3,6 +3,7 @@
 		"featured article". An empty array if none are defined.
 	string html-title-heading--formatted
 	string html-tagline
+	string html-citizen-jumptotop Jump to top title text
 }}
 <header class="mw-body-header">
 	<div class="page-heading">
@@ -11,6 +12,7 @@
 			{{>Indicators}}
 		</div>
 		<div id="siteSub">{{html-tagline}}</div>
+		<a href="#top" class="citizen-jumptotop" title="{{html-citizen-jumptotop}}"></a>
 	</div>
 	{{>PageTools}}
 </header>
diff --git a/templates/Header.mustache b/templates/Header.mustache
index 5d0133e7..e30b1256 100644
--- a/templates/Header.mustache
+++ b/templates/Header.mustache
@@ -1,7 +1,6 @@
  {{!
  	string link-mainpage link to the main page
-	string msg-citizen-drawer-toggle The label used by the drawer button.
-	string html-citizen-jumptotop Jump to top title text
+	string msg-citizen-drawer-toggle The label used by the drawer button
 }}
 <header class="mw-header citizen-header">
 	{{#data-search-box}}{{>Search}}{{/data-search-box}}