Merge pull request #523 from StarCitizenTools/dev

Sticky header redesign and chore

.commitlintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["@commitlint/config-conventional"]
-}
+	"extends": [ "@commitlint/config-conventional" ]
+}

.github/workflows/mediawiki.yml

@@ -113,7 +113,7 @@ jobs:
           git config --global user.email "github-actions@users.noreply.github.com"
           git remote set-url origin "https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git"
           git add .
-          git commit -am "ci: lint code to MediaWiki standards" -m "Check commit and GitHub actions for more details"
+          git commit -am "ci: 👷 lint code to MediaWiki standards" -m "Check commit and GitHub actions for more details"
           git pull --rebase
           git push
         else

.stylelintrc.json

@@ -1,14 +1,14 @@
-{
-	"extends": [ 
-		"stylelint-config-idiomatic-order",
-		"stylelint-config-wikimedia"
-	],
-	"rules": {
-		"font-weight-notation": null,
-		"selector-max-id": null,
-		"no-descending-specificity": null,
-		"declaration-no-important": null,
-		"unit-disallowed-list": null,
-		"declaration-property-unit-disallowed-list": null
-	}
-}
+{
+	"extends": [
+		"stylelint-config-idiomatic-order",
+		"stylelint-config-wikimedia"
+	],
+	"rules": {
+		"font-weight-notation": null,
+		"selector-max-id": null,
+		"no-descending-specificity": null,
+		"declaration-no-important": null,
+		"unit-disallowed-list": null,
+		"declaration-property-unit-disallowed-list": null
+	}
+}

.svgo.config.js

@@ -49,7 +49,7 @@ module.exports = {
 	// On non-unix systems the linebreaks will be normalized to LF (unix) only at git commit,
 	// assuming `core.autocrlf` is 'true' (default) or 'input'.
 	js2svg: {
-		indent: "\t",
-		pretty: true,
+		indent: '\t',
+		pretty: true
 	}
-}
+};

.versionrc.json

@@ -1,16 +1,16 @@
-{
-  "bumpFiles": [
-    {
-      "filename": "skin.json",
-      "type": "json"
-    },
-    {
-      "filename": "package.json",
-      "type": "json"
-    },
-    {
-      "filename": "package-lock.json",
-      "type": "json"
-    }
-  ]
-}
+{
+	"bumpFiles": [
+		{
+			"filename": "skin.json",
+			"type": "json"
+		},
+		{
+			"filename": "package.json",
+			"type": "json"
+		},
+		{
+			"filename": "package-lock.json",
+			"type": "json"
+		}
+	]
+}

resources/skins.citizen.scripts/skin.js

@@ -63,17 +63,17 @@ function bindCloseOnUnload() {
  * @return {void}
  */
 function onTitleHidden( document ) {
-	const title = document.getElementById( 'firstHeading' );
+	const title = document.getElementById( 'citizen-body-header-sticky-sentinel' );
 
 	if ( title ) {
 		const scrollObserver = require( './scrollObserver.js' );
 
 		const observer = scrollObserver.initScrollObserver(
 			() => {
-				document.body.classList.add( 'citizen-title--hidden' );
+				document.body.classList.add( 'citizen-body-header--sticky' );
 			},
 			() => {
-				document.body.classList.remove( 'citizen-title--hidden' );
+				document.body.classList.remove( 'citizen-body-header--sticky' );
 			}
 		);
 		observer.observe( title );

resources/skins.citizen.search/typeahead.js

@@ -169,7 +169,7 @@ function getSuggestions( searchQuery ) {
 			matchedTitle = cleanup( matchedTitle );
 
 			// eslint thinks it is an array
-			// eslint-disable-next-line no-restricted-syntax
+
 			return !( title.includes( matchedTitle ) || matchedTitle.includes( title ) );
 		};
 

resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less

@@ -96,7 +96,7 @@
 			z-index: 2;
 			display: block;
 			overflow: visible auto;
-			max-height: ~'calc( 100vh - var( --header-size ) - 3rem )'; // Somehow it works
+			max-height: ~'calc( 100vh - 10rem )'; // Somehow it works
 			padding-right: 0.75rem;
 			margin: 0.6rem 0 0 0;
 			font-weight: 450;
@@ -253,9 +253,16 @@
 			}
 		}
 
-		.toc {
-			right: unset;
-			left: ~'calc( 50vw + var( --width-layout ) / 2  - var( --width-toc ) / 2 + var( --space-md ) * 3 )';
+		.citizen-animations-ready {
+			.toc {
+				transition: @transition-transform;
+			}
+		}
+
+		.citizen-body-header--sticky {
+			.toc {
+				transform: translateY( 3rem );
+			}
 		}
 	}
 }

resources/skins.citizen.styles/Drawer.less

@@ -102,6 +102,8 @@
 		&__siteinfo {
 			.mw-logo-wordmark {
 				font-size: 2rem;
+				// Sometimes long wiki name will wrap when the menu is too small
+				white-space: nowrap;
 			}
 		}
 	}

resources/skins.citizen.styles/Stickyheader.less

@@ -0,0 +1,46 @@
+#citizen-body-header-sticky-sentinel {
+	position: absolute;
+	right: 0;
+	left: 0;
+	height: 1px;
+	visibility: hidden;
+}
+
+.citizen-body-header--sticky {
+	.mw-body-header {
+		position: sticky;
+		z-index: 1;
+		top: 0;
+		padding-bottom: var( --space-md );
+		border-bottom: 1px solid var( --border-color-base );
+		background-color: var( --color-surface-0 );
+	}
+
+	.firstHeading {
+		font-size: 1.25rem;
+	}
+}
+
+@media ( max-width: @width-breakpoint-tablet ), ( max-height: 800px ) {
+	.citizen-body-header--sticky {
+		#siteSub {
+			display: none;
+		}
+
+		.page-actions {
+			display: none;
+		}
+	}
+}
+
+@media ( min-width: @width-breakpoint-desktop-wide ) {
+	.citizen-body-header--sticky {
+		.toc {
+			transform: translateY( 3rem );
+
+			@media ( max-height: 800px ) {
+				transform: translateY( 2rem ) !important; // Somehow need this idk why
+			}
+		}
+	}
+}

resources/skins.citizen.styles/layout.less

@@ -25,7 +25,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
-	padding-top: @content-margin-top;
+	padding-top: var( --space-md );
 	margin-top: var( --space-xl );
 	margin-bottom: @content-margin-top * 2;
 	gap: @content-margin-top;
@@ -115,6 +115,12 @@ a.image {
 		margin-bottom: 0;
 		margin-left: var( --header-size );
 	}
+
+	.mw-body,
+	.parsoid-body {
+		padding-right: ~'calc( var( --padding-page ) * 2 )';
+		padding-left: ~'calc( var( --padding-page ) * 2 )';
+	}
 }
 
 /* Wider page width for certain namespaces */

resources/skins.citizen.styles/skin.less

@@ -29,6 +29,7 @@
 	@import 'Menu.less';
 	@import 'Catlinks.less';
 	@import 'Footer.less';
+	@import 'Stickyheader.less';
 }
 
 @media print {

templates/ContentHeader.mustache

@@ -13,4 +13,5 @@
 		<div id="siteSub">{{html-tagline}}</div>
 	</div>
 	{{>PageTools}}
-</header>
+</header>
+<div id="citizen-body-header-sticky-sentinel"></div>