From 60da14d4f5d8855c0e179f391a730fe0b102cf18 Mon Sep 17 00:00:00 2001
From: iou1name <iou1name@national.shitposting.agency>
Date: Thu, 28 Nov 2024 13:27:29 -0500
Subject: [PATCH] grid layout

---
 static/pyrite.css    | 22 ++++++++++++-------
 templates/index.html | 52 ++++++++++++++++++++------------------------
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/static/pyrite.css b/static/pyrite.css
index 88b2c9d..9f075f7 100644
--- a/static/pyrite.css
+++ b/static/pyrite.css
@@ -70,16 +70,17 @@ input[type="radio"]:checked+div {
 
 #player_container {
 	grid-area: f;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-#player_container > div {
-	display: flex;
+	display: grid;
+	grid-template-columns: 1fr auto 2fr 1fr;;
+	grid-template-rows: 1fr auto auto;
+	grid-template-areas:
+		"L A B R"
+		"L A C R"
+		"L D D R";
 }
 
 #cover_art {
+	grid-area: A;
 	padding-right: 1em;
 	padding-top: 0.5em;
 }
@@ -90,6 +91,11 @@ img {
 }
 
 #title {
+	grid-area: B;
+}
+
+#player_controls {
+	grid-area: C;
 }
 
 input[type='range'] {
@@ -109,7 +115,7 @@ button img {
 }
 
 #seek_controls {
-	width: 50%;
+	grid-area: D;
 }
 
 #seek_controls output {
diff --git a/templates/index.html b/templates/index.html
index 18d1d6a..d51a527 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -27,33 +27,29 @@
 			<div id="track_list" class="list">
 			</div>
 			<div id="player_container">
-				<div>
-					<div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
-					<div>
-						<div id="title">
-							<h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4>
-							<h3 id="now_playing_title">Title</h3>
-						</div>
-						<div id="player_controls">
-							<audio id="player" style="display:none"></audio>
-							<button id="prev-track-btn" class="btn" onclick="prevTrack()">
-								<img id="prev" src="./static/prev.svg"></img>
-							</button>
-							<button id="play-btn" class="btn" onclick="playTrack()">
-								<img id="prev" src="./static/play.svg"></img>
-							</button>
-							<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
-								<img id="prev" src="./static/pause.svg"></img>
-							</button>
-							<button id="next-track-btn" class="btn" onclick="nextTrack()">
-								<img id="prev" src="./static/prev.svg"></img>
-							</button>
-							<button id="mute-btn" class="btn">
-								<img id="mute" src="./static/volume-max.svg"</img>
-							</button>
-							<input id="volume-slider" type="range" max="100" value="0">
-						</div>
-					</div>
+				<div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
+				<div id="title">
+					<h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4>
+					<h3 id="now_playing_title">Title</h3>
+				</div>
+				<div id="player_controls">
+					<audio id="player" style="display:none"></audio>
+					<button id="prev-track-btn" class="btn" onclick="prevTrack()">
+						<img id="prev" src="./static/prev.svg"></img>
+					</button>
+					<button id="play-btn" class="btn" onclick="playTrack()">
+						<img id="prev" src="./static/play.svg"></img>
+					</button>
+					<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
+						<img id="prev" src="./static/pause.svg"></img>
+					</button>
+					<button id="next-track-btn" class="btn" onclick="nextTrack()">
+						<img id="prev" src="./static/prev.svg"></img>
+					</button>
+					<button id="mute-btn" class="btn">
+						<img id="mute" src="./static/volume-max.svg"</img>
+					</button>
+					<input id="volume-slider" type="range" max="100" value="0">
 				</div>
 				<div id="seek_controls">
 					<input id="seek-slider" type="range" max="100" value="0">
@@ -73,7 +69,7 @@
 			<label for="album_$n">
 				<input type="radio" id="album_$n" name="album" value="$album_name" onclick="select_album(event)">
 				<div class="list_item album">
-					<img src="$cover_art_url"><span class="album_name">$album_name</span><span class="album_year">$album_year</span>
+					<img src=""><span class="album_name">$album_name</span><span class="album_year">$album_year</span>
 				</div>
 			</label>
 		</template>