refactor(core): ♻️ clean up various menu styles

StarCitizenTools · May 8, 2024 · 4f7e3a4 · 4f7e3a4
1 parent 0aa6172
commit 4f7e3a4
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 27 deletions.
diff --git a/resources/skins.citizen.styles/components/ContentSidebar.less b/resources/skins.citizen.styles/components/ContentSidebar.less
@@ -1,5 +1,22 @@
 .citizen-body-sidebar {
 	@media ( min-width: @min-width-breakpoint-desktop ) {
+		display: flex;
+		flex-direction: column;
 		grid-area: sidebar;
+		gap: var( --space-xs );
+		padding-left: var( --space-xs );
+		margin-top: var( --space-sm ); // align with first paragraph
+		// Avoid padding clipping
+		margin-left: ~'calc( var( --space-xs ) * -1 )';
+	}
+
+	.citizen-menu__heading,
+	.citizen-menu .mw-list-item a {
+		padding-right: var( --space-xs );
+		padding-left: var( --space-xs );
+	}
+
+	.citizen-menu .mw-list-item a {
+		border-radius: var( --border-radius--small );
 	}
 }
diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
@@ -124,12 +124,6 @@
 		align-items: center;
 		min-width: 0;
 	}
-
-	// Reset
-	ul {
-		margin: 0;
-		list-style: none;
-	}
 }
 
 // Notifications

diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
@@ -48,6 +48,11 @@
 			}
 		}
 	}
+
+	ul {
+		margin: 0;
+		list-style: none;
+	}
 }
 
 // FIXME: This should not be here

diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
@@ -73,11 +73,6 @@
 		}
 	}
 
-	ul {
-		margin: 0;
-		list-style: none;
-	}
-
 	li {
 		margin: 0;
 	}

diff --git a/resources/skins.citizen.styles/components/TableOfContents.less b/resources/skins.citizen.styles/components/TableOfContents.less
@@ -9,13 +9,9 @@
 		}
 	}
 
-	&__contents {
-		margin-left: 1px;
-	}
-
 	&__contents,
 	&__list {
-		margin: 0;
+		margin: 0 0 0 var( --space-xs );
 		list-style: none;
 		border-left: 1px solid var( --border-color-base );
 
@@ -25,16 +21,11 @@
 		}
 	}
 
-	&__list {
-		margin-left: var( --space-xs );
-	}
-
 	&__link {
+		position: relative;
 		display: flex;
 		gap: var( --space-xs );
-		padding-top: var( --space-xs );
-		padding-right: var( --space-xs );
-		padding-bottom: var( --space-xs );
+		padding: var( --space-xs );
 		font-weight: var( --font-weight-medium );
 		color: var( --color-base );
 		border-radius: var( --border-radius--small );
@@ -63,8 +54,14 @@
 	}
 
 	&__indicator {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
 		flex-shrink: 0;
 		width: 3px;
+		margin-top: var( --space-xs );
+		margin-bottom: var( --space-xs );
 		margin-left: -2px;
 		border-radius: var( --border-radius--pill );
 	}
@@ -90,10 +87,6 @@
 			}
 		}
 	}
-
-	.citizen-menu__heading {
-		padding-left: 0;
-	}
 }
 
 // Sticky header styles

diff --git a/templates/ContentSidebar.mustache b/templates/ContentSidebar.mustache
@@ -2,5 +2,6 @@
 	
 }}
 <div class="citizen-body-sidebar">
+	{{#data-sidebar-lastmod}}{{>Menu}}{{/data-sidebar-lastmod}}
 	{{>TableOfContents}}
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,6 +48,11 @@ @@
     			}
     		}
     	}
+    	ul {
+    		margin: 0;
+    		list-style: none;
+    	}
     }
     // FIXME: This should not be here
@@ Expand Down @@