#52 Fennec: make player sidebars a bit more narrow

Author: drweissbrot

src/themes/fennec/css/vars.css

@@ -37,8 +37,9 @@
 	--player-sidebar-margin: var(--viewport-margin-x);
 	--player-sidebar-focused-player-highlight-width: 0.5rem;
 	--player-sidebar-additional-stats-width: 14rem;
-	--player-sidebar-width: calc((100% - var(--focused-player-width)) / 2 - var(--player-sidebar-margin) * 2 + var(--player-sidebar-focused-player-highlight-width) + var(--player-sidebar-additional-stats-width));
+	--player-sidebar-width: calc((100% - var(--focused-player-width)) / 2 - var(--player-sidebar-margin) * 2 - 6rem + var(--player-sidebar-focused-player-highlight-width) + var(--player-sidebar-additional-stats-width));
 	--player-sidebar-row-height: 3rem;
+	--player-sidebar-weapon-padding: 0.5rem;
 
 	/* Viewport Margin  */
 	--viewport-margin-x: 2rem;

src/themes/fennec/player-sidebars/sidebar/player/player.css

@@ -22,17 +22,50 @@
 	filter: var(--filter-drop-shadow);
 	font-size: 1.8rem;
 	isolation: isolate;
+
+	--start-and-end-width: 0.5rem;
+	--health-width: 5rem;
+	--observer-slot-width: 1.5rem;
+	--money-width: 7rem;
+	--kills-width: 4.5rem;
+	--deaths-width: var(--kills-width);
+	--taser-width: 4rem;
+	--grenades-half-width: 1fr;
+	--round-kills-width: 1fr;
+	--primary-and-secondary-width: 1fr;
 }
 
 .player.--left {
-	grid-template-columns: 0.5rem 5rem 1.5rem 7rem 4.5rem 4.5rem 4rem 1fr 0.5fr 1fr 0.5rem;
+	grid-template-columns:
+		var(--start-and-end-width)
+		var(--health-width)
+		var(--observer-slot-width)
+		var(--money-width)
+		var(--kills-width)
+		var(--deaths-width)
+		var(--taser-width)
+		var(--grenades-half-width)
+		var(--round-kills-width)
+		var(--primary-and-secondary-width)
+		var(--start-and-end-width);
 	grid-template-areas:
 		'start    health       observer-slot    name     name     name      name     name        round-kills    primary      end'
 		'start    equipment    equipment        money    kills    deaths    taser    grenades    grenades       secondary    end';
 }
 
 .player.--right {
-	grid-template-columns: 0.5rem 1fr 0.5fr 1fr 4rem 4.5rem 4.5rem 7rem 1.5rem 5rem 0.5rem;
+	grid-template-columns:
+		var(--start-and-end-width)
+		var(--primary-and-secondary-width)
+		var(--round-kills-width)
+		var(--grenades-half-width)
+		var(--taser-width)
+		var(--kills-width)
+		var(--deaths-width)
+		var(--money-width)
+		var(--observer-slot-width)
+		var(--health-width)
+		var(--start-and-end-width);
 	grid-template-areas:
 		'start primary round-kills name name name name name observer-slot health end'
 		'start secondary grenades grenades taser kills deaths money equipment equipment end';

src/themes/fennec/player-sidebars/sidebar/player/primary/primary.css

@@ -16,12 +16,12 @@
 
 .primary.--left {
 	justify-content: flex-end;
-	padding-right: 1rem;
+	padding-right: var(--player-sidebar-weapon-padding);
 }
 
 .primary.--right {
 	justify-content: flex-start;
-	padding-left: 1rem;
+	padding-left: var(--player-sidebar-weapon-padding);
 }
 
 .primary.--right img {

src/themes/fennec/player-sidebars/sidebar/player/round-kills/round-kills.css

@@ -5,6 +5,10 @@
 	align-items: center;
 }
 
+.round-kills.--right {
+	justify-content: flex-end;
+}
+
 img.label {
 	height: 1.5rem;
 	margin-right: 0.5rem;

src/themes/fennec/player-sidebars/sidebar/player/round-kills/round-kills.html

@@ -1,4 +1,4 @@
-<div v-if="player.roundKills" class="round-kills">
+<div v-if="player.roundKills" :class="['round-kills', positionClass]">
 	<img src="/hud/img/icons/round-kills.svg" alt="" class="label">
 	<div class="value">{{ player.roundKills }}</div>
 </div>

src/themes/fennec/player-sidebars/sidebar/player/round-kills/round-kills.js

@@ -3,4 +3,10 @@ export default {
 		'position',
 		'player',
 	],
+
+	computed: {
+		positionClass() {
+			return `--${this.position}`
+		},
+	},
 }

src/themes/fennec/player-sidebars/sidebar/player/secondary/secondary.css

@@ -16,12 +16,12 @@
 
 .secondary.--left {
 	justify-content: flex-end;
-	padding-right: 1rem;
+	padding-right: var(--player-sidebar-weapon-padding);
 }
 
 .secondary.--right {
 	justify-content: flex-start;
-	padding-left: 1rem;
+	padding-left: var(--player-sidebar-weapon-padding);
 }
 
 .secondary.--right img {