From 60813414187b0609ed8632d88663aa6edb4d4532 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 26 Jan 2021 14:25:46 -0500
Subject: [PATCH] feat: integrate page tools into page header

---
 includes/templates/skin.mustache              |  14 ++-
 .../skins.citizen.styles.toc.less             |   3 +-
 resources/skins.citizen.styles/Pagetools.less | 109 +++++++++++++++---
 .../skins.citizen.styles/common/content.less  |   5 +-
 resources/skins.citizen.styles/layout.less    |  14 ++-
 5 files changed, 114 insertions(+), 31 deletions(-)

diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index b1111cf0..19605184 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -27,14 +27,18 @@
 	<div id="siteNotice" class="mw-body-content">{{{html-site-notice}}}</div>
 	{{>Indicators}}
 	{{{html-newtalk}}}
-	{{#data-pagetools}}
-		<div class="mw-side" id="page-tools">
+	<header class="mw-body-header">
+		<div class="page-heading">
+			<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
+			<div id="siteSub">{{msg-tagline}}</div>
+		</div>
+		{{#data-pagetools}}
+		<div class="page-actions">
 			{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
 			{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
 		</div>
-	{{/data-pagetools}}
-	<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
-	<div id="siteSub">{{msg-tagline}}</div>
+		{{/data-pagetools}}
+	</header>
 	<div id="bodyContent" class="mw-body-content">
 		<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
 		{{#html-undelete-link}}<div id="contentSub2">{{{html-undelete-link}}}</div>{{/html-undelete-link}}
diff --git a/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less b/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
index a81b2ee0..3ebb9b4c 100644
--- a/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
+++ b/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
@@ -198,8 +198,7 @@
 
 @media ( min-width: @width-breakpoint-desktop-wide ) and ( max-width: @width-breakpoint-desktop-wider ) {
 	.skin-citizen-has-toc {
-		.firstHeading,
-		#siteSub,
+		.mw-body-header,
 		.mw-body-content {
 			margin-right: 0;
 			margin-left: @width-toc - @padding-page;
diff --git a/resources/skins.citizen.styles/Pagetools.less b/resources/skins.citizen.styles/Pagetools.less
index 63724530..aa44ffaf 100644
--- a/resources/skins.citizen.styles/Pagetools.less
+++ b/resources/skins.citizen.styles/Pagetools.less
@@ -1,7 +1,8 @@
-#page-tools {
+.page-actions {
 	display: flex;
-	margin-left: 10px;
-	float: right;
+	margin-left: -12px; // To align with page padding
+	font-size: @ui-menu-text;
+	font-weight: 450;
 
 	ul {
 		display: flex;
@@ -16,41 +17,87 @@
 
 #p-views {
 	li > a {
-		.resource-loader-icon-link;
-		padding: 5px;
+		display: flex;
+		align-items: center;
+		padding: 8px 12px;
+		margin-right: 4px;
+		border-radius: @border-radius-medium;
+		color: var( --color-base--subtle );
 		font-size: 0;
-		opacity: var( --opacity-icon-base );
-		transition: @transition-opacity-quick;
+		transition: @transition-background-quick;
+
+		&:after {
+			width: var( --size-icon );
+			height: var( --size-icon );
+			order: -1; // Move icon before the text
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: var( --size-icon );
+			content: '';
+			opacity: var( --opacity-icon-base );
+			transition: @transition-opacity-quick;
+		}
 
 		&:hover {
-			opacity: var( --opacity-icon-base--hover );
+			background-color: var( --background-color-quiet--hover );
+
+			&:after {
+				opacity: var( --opacity-icon-base--hover );
+			}
 		}
 
 		&:active {
-			opacity: var( --opacity-icon-base--active );
-		}
+			background-color: var( --background-color-quiet--active );
 
-		&:after {
-			.resource-loader-icon;
+			&:after {
+				opacity: var( --opacity-icon-base--active );
+			}
 		}
 
 		span {
 			.mixin-screen-reader-text;
 		}
 	}
+
+	#ca-edit {
+		order: 99; // Put it to the last
+
+		> a {
+			background-color: var( --color-primary );
+			color: #fff;
+
+			&:after {
+				filter: invert( 1 );
+				// white icon
+				opacity: 1;
+			}
+
+			&:hover {
+				background-color: var( --color-primary--hover );
+			}
+
+			&:active {
+				background-color: var( --color-primary--active );
+			}
+		}
+	}
 }
 
 #p-actions {
-	.resource-loader-icon-link;
-	padding: 5px;
+	display: block;
+	width: var( --size-icon );
+	height: var( --size-icon );
+	padding: 8px;
 	cursor: pointer;
 	// transition: @transition-opacity-quick; - Hidden behind the menu anyways
 
-	// TODO: Need to make value more flexible
 	ul {
 		position: absolute;
 		z-index: -1;
-		right: @padding-page / 2;
+		right: 0;
+		left: 0;
+		border: 1px solid var( --border-color-base--lighter );
+		margin-top: 5px;
 		opacity: 0;
 		pointer-events: none;
 		transition: @transition-opacity-quick, @transition-box-shadow-quick;
@@ -60,8 +107,7 @@
 		a {
 			.menu-item-link;
 			justify-content: space-between;
-			padding: @padding-menu-item;
-			font-size: @ui-menu-text;
+			padding: 10px var( --padding-page );
 
 			&:after {
 				.resource-loader-list-icon;
@@ -88,7 +134,11 @@
 	}
 
 	&:before {
-		.resource-loader-menu-icon;
+		display: block;
+		width: var( --size-icon );
+		height: var( --size-icon );
+		background-size: var( --size-icon );
+		content: '';
 		opacity: var( --opacity-icon-base );
 	}
 
@@ -113,3 +163,24 @@
 		}
 	}
 }
+
+@media ( min-width: @width-breakpoint-tablet ) {
+	#p-views {
+		li > a {
+			font-size: @ui-menu-text;
+
+			&:after {
+				margin-right: 8px;
+			}
+		}
+	}
+
+	#p-actions {
+		ul {
+			position: relative;
+			right: unset;
+			left: -172px;
+			width: 200px;
+		}
+	}
+}
diff --git a/resources/skins.citizen.styles/common/content.less b/resources/skins.citizen.styles/common/content.less
index ec0b1ada..bda076bb 100644
--- a/resources/skins.citizen.styles/common/content.less
+++ b/resources/skins.citizen.styles/common/content.less
@@ -1,12 +1,11 @@
 .firstHeading {
-	margin-top: 0;
-	margin-bottom: 0.2rem;
+	margin: 0;
 	overflow-wrap: break-word; // Break word instead of overflow if title is too long
 }
 
 #siteSub {
 	display: block;
-	margin-bottom: 1.6rem;
+	margin-top: 0.2rem;
 }
 
 #siteSub,
diff --git a/resources/skins.citizen.styles/layout.less b/resources/skins.citizen.styles/layout.less
index 3ecad250..eb0cb896 100644
--- a/resources/skins.citizen.styles/layout.less
+++ b/resources/skins.citizen.styles/layout.less
@@ -1,13 +1,23 @@
 @width-breakpoint-desktop-wider: @width-breakpoint-desktop + @width-toc * 2;
 
-.firstHeading,
-#siteSub,
+.mw-body-header,
 .mw-body-content {
 	max-width: var( --width-layout );
 	margin-right: auto;
 	margin-left: auto;
 }
 
+.mw-body-header {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 0.8rem;
+}
+
+.page-heading {
+	flex-grow: 1;
+	margin-bottom: 0.8rem;
+}
+
 .mw-body-content {
 	.mixin-clearfix();
 }