iou1name/Pyrite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

grid layout

Browse Source
This commit is contained in:
iou1name 2024-11-28 13:27:29 -05:00
parent 1f1c82f18a
commit 60da14d4f5
2 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
static/pyrite.css
View File

@ -70,16 +70,17 @@ input[type="radio"]:checked+div {
#player_container { #player_container {
grid-area: f; grid-area: f;
display: flex; display: grid;
flex-direction: column; grid-template-columns: 1fr auto 2fr 1fr;;
align-items: center; grid-template-rows: 1fr auto auto;
} grid-template-areas:
"L A B R"
#player_container > div { "L A C R"
display: flex; "L D D R";
} }
#cover_art { #cover_art {
grid-area: A;
padding-right: 1em; padding-right: 1em;
padding-top: 0.5em; padding-top: 0.5em;
} }
@ -90,6 +91,11 @@ img {
} }
#title { #title {
grid-area: B;
}
#player_controls {
grid-area: C;
} }
input[type='range'] { input[type='range'] {
@ -109,7 +115,7 @@ button img {
} }
#seek_controls { #seek_controls {
width: 50%; grid-area: D;
} }
#seek_controls output { #seek_controls output {

52
templates/index.html
View File

@ -27,33 +27,29 @@
<div id="track_list" class="list"> <div id="track_list" class="list">
</div> </div>
<div id="player_container"> <div id="player_container">
<div> <div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
<div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div> <div id="title">
<div> <h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4>
<div id="title"> <h3 id="now_playing_title">Title</h3>
<h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4> </div>
<h3 id="now_playing_title">Title</h3> <div id="player_controls">
</div> <audio id="player" style="display:none"></audio>
<div id="player_controls"> <button id="prev-track-btn" class="btn" onclick="prevTrack()">
<audio id="player" style="display:none"></audio> <img id="prev" src="./static/prev.svg"></img>
<button id="prev-track-btn" class="btn" onclick="prevTrack()"> </button>
<img id="prev" src="./static/prev.svg"></img> <button id="play-btn" class="btn" onclick="playTrack()">
</button> <img id="prev" src="./static/play.svg"></img>
<button id="play-btn" class="btn" onclick="playTrack()"> </button>
<img id="prev" src="./static/play.svg"></img> <button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
</button> <img id="prev" src="./static/pause.svg"></img>
<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none"> </button>
<img id="prev" src="./static/pause.svg"></img> <button id="next-track-btn" class="btn" onclick="nextTrack()">
</button> <img id="prev" src="./static/prev.svg"></img>
<button id="next-track-btn" class="btn" onclick="nextTrack()"> </button>
<img id="prev" src="./static/prev.svg"></img> <button id="mute-btn" class="btn">
</button> <img id="mute" src="./static/volume-max.svg"</img>
<button id="mute-btn" class="btn"> </button>
<img id="mute" src="./static/volume-max.svg"</img> <input id="volume-slider" type="range" max="100" value="0">
</button>
<input id="volume-slider" type="range" max="100" value="0">
</div>
</div>
</div> </div>
<div id="seek_controls"> <div id="seek_controls">
<input id="seek-slider" type="range" max="100" value="0"> <input id="seek-slider" type="range" max="100" value="0">
@ -73,7 +69,7 @@
<label for="album_$n"> <label for="album_$n">
<input type="radio" id="album_$n" name="album" value="$album_name" onclick="select_album(event)"> <input type="radio" id="album_$n" name="album" value="$album_name" onclick="select_album(event)">
<div class="list_item album"> <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> </div>
</label> </label>
</template> </template>