cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Activity

Compare commits

base: cccb:a5d94171de235e0fccf48630369215f90c834e98
Branches Tags
cccb:main
cccb:grid
..
compare: cccb:3889391f1bc8ebff12225eb6207fbd3bb43ddede
Branches Tags
cccb:main
cccb:grid

15 commits
a5d94171de ... 3889391f1b

Author SHA1 Message Date
coon
3889391f1b static: move #queue definition up 2023-12-05 03:02:12 +01:00
coon
d48d8cb5e1 static: add some space between order controls and xfade controls 2023-12-05 03:01:33 +01:00
coon
85e0f9fb42 static: change padding for td elements 2023-12-05 03:00:17 +01:00
coon
6c8f83b6ee static: replace top controls based gradient rendering by css gradient rendering method 2023-12-05 02:59:22 +01:00
coon
1bb89b52f1 static: replace image based table gradient rendering by css gradient rendering method 2023-12-05 02:59:22 +01:00
coon
da17f5f422 static: rename playlist_tracklist -> results_tracklist 2023-12-05 02:59:22 +01:00
coon
2056414a39 static: replace emojis by unicode code points 2023-12-05 02:59:22 +01:00
coon
6626585a15 static: fix rendering of track display 2023-12-05 02:59:22 +01:00
coon
468b35f791 static: add symbols next to volume slider 2023-12-05 02:59:21 +01:00
coon
9f568251cc static: improve button style of playback controls 2023-12-05 02:59:21 +01:00
coon
5c533a8a1a static: do vertical stretching properly 2023-12-05 02:59:21 +01:00
coon
2bfddc8fe5 static: add more dummy tracks in queue 2023-12-05 02:59:21 +01:00
coon
8fe3dae1b8 static: highlight table rows when hovering with mouse 2023-12-05 02:59:21 +01:00
coon
19533e5d01 static: use modern css for alternate table coloring again 2023-12-05 02:59:11 +01:00
coon
0eff220cc5 static: move sanic.js import from header to end of body 2023-12-05 01:45:48 +01:00
5 changed files with 160 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

124
static/flexbox/index.html
View file

@ -6,7 +6,6 @@
<link rel="stylesheet" href="rangeinput.css"> <link rel="stylesheet" href="rangeinput.css">
<link rel="stylesheet" href="treeview.css"> <link rel="stylesheet" href="treeview.css">
<link rel="stylesheet" href="sanic.css"> <link rel="stylesheet" href="sanic.css">
<script src="sanic.js"></script>
</head> </head>
<body> <body>
<div id="flexbox-container"> <div id="flexbox-container">
@ -17,10 +16,15 @@
</div> </div>
<div id="playback-controls"> <div id="playback-controls">
<div> <div>
<button>⏮️</button> <button>&#x23EE;&#xFE0E;</button> <!-- ⏮️ Last Track Button -->
<button>⏯️</button> <button>&#x23F9;&#xFE0E;</button> <!-- ⏹️ Stop Button -->
<button>⏹️</button> <button>&#x23EF;&#xFE0E;</button> <!-- ⏯️ Play or Pause Button -->
<button>⏭️</button> <button>&#x23ED;&#xFE0E;</button> <!-- ⏭️ Next Track Button -->
<!--
<button>&#x25B6;&#xFE0E;</button> <!-- ▶️ Play Button -- >
<button>&#x23F8;&#xFE0E;</button> <!-- ⏸️ Pause Button -- >
-->
</div> </div>
<div> <div>
<input type="range" id="progress" name="progress" min="0" max="100" value="0"> <input type="range" id="progress" name="progress" min="0" max="100" value="0">
@ -50,11 +54,13 @@
</div> </div>
</div> </div>
<div id="volume-control"> <div id="volume-control">
<button class="borderless-button">&#x1F509;</button> <!-- 🔉 Speaker with sound wave -->
<input id="volume" name="volume" type="range" min="1" max="100" value="50"> <input id="volume" name="volume" type="range" min="1" max="100" value="50">
<button class="borderless-button">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
</div> </div>
</div> </div>
<div class="track-info"> <div class="track-info">
<p>Now playing: 00:00:00/100:00:00</p> <div>Now playing: 00:00:00/100:00:00</div>
<label for="track">track</label> <label for="track">track</label>
<input type="text" id="track" name="track" disabled> <input type="text" id="track" name="track" disabled>
@ -79,7 +85,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="odd"> <tr id="$queue-id">
<td>1</td> <td>1</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -87,7 +93,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>2</td> <td>2</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -95,15 +101,15 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd playing"> <tr class="playing">
<td class="playing">3</td> <td>3</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>4</td> <td>4</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -111,7 +117,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>5</td> <td>5</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -119,7 +125,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>6</td> <td>6</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -127,7 +133,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>7</td> <td>7</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -135,6 +141,78 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr>
<td>8</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>9</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>10</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>11</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>12</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>13</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>14</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>15</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>16</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -189,7 +267,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="playlist_tracklist"> <div id="results_tracklist">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -201,49 +279,49 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="odd"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
@ -258,5 +336,7 @@
sanic mpd web ui 0.1.0 - by XenGi and coon &copy; 2023 sanic mpd web ui 0.1.0 - by XenGi and coon &copy; 2023
</div> </div>
</div> </div>
<script src="sanic.js"></script>
</body> </body>
</html> </html>

94
static/flexbox/sanic.css
View file

@ -1,7 +1,14 @@
:root {
--ribbon-width: 160px;
}
html, body { html, body {
background-color: #09101d; background-color: #09101d;
color: #bbb; color: #bbb;
height: 99%;
margin: 0;
padding: 0;
height: 100%;
} }
div { div {
@ -22,6 +29,12 @@ button {
border-bottom-color: #3A3A3A; border-bottom-color: #3A3A3A;
} }
.borderless-button {
border: none;
background-color: inherit;
cursor: pointer;
}
input[type=text] { input[type=text] {
background-color: #28374a; background-color: #28374a;
color: white; color: white;
@ -61,8 +74,8 @@ table {
} }
thead { thead {
background-repeat: repeat-x; background: rgb(15,29,47);
background-image: url(../img/table-header-gradient.png); background: linear-gradient(0deg, rgba(15,29,47,1) 0%, rgba(15,29,47,1) 50%, rgba(7,14,23,1) 100%);
} }
th { th {
@ -74,19 +87,30 @@ th {
} }
td { td {
padding: 1px 1px 1px 0.5em; padding: 1px 0.5em;
border: solid black; border: solid black;
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
text-align: left; text-align: left;
} }
#queue {
display: flex;
flex-direction: column;
flex-grow: 1;
border-bottom: 4px ridge #3a506b;
}
#queue-table tr td:first-of-type { #queue-table tr td:first-of-type {
padding-left: 16px; padding-left: 16px;
} }
/* This is probably a better way to generate alternate coloring on tables. However, #queue table tr.playing td:first-of-type::before {
background color for selected track is overwritten this way. Therefore the "old content: '\2BC8';
school" way of alternate coloring is used for now. }
#queue table tr:not(.playing) td:first-of-type {
padding-left: 2em; /* TODO: do proper spacing */
}
table tr:nth-child(odd) td { table tr:nth-child(odd) td {
background:#1e1f1a; background:#1e1f1a;
@ -95,24 +119,14 @@ table tr:nth-child(odd) td {
table tr:nth-child(even) td { table tr:nth-child(even) td {
background:#171812; background:#171812;
} }
*/
table tr.odd { #queue table tr:nth-child(odd).playing td,
background-color: #1e1f1a; #queue table tr:nth-child(even).playing td {
}
table tr.even {
background-color: #171812;
}
#queue-table tr.playing {
background-color: #490b00; background-color: #490b00;
} }
td.playing { table tr:hover td {
background-image: url(../img/playback.png); background-color: #354158 !important; /* TODO: remove !important */
background-repeat: no-repeat;
background-position: left center;
} }
#flexbox-container { #flexbox-container {
@ -126,11 +140,10 @@ td.playing {
flex-direction: row; flex-direction: row;
padding: 5px; padding: 5px;
background-repeat: repeat-x; background: linear-gradient(0deg, rgba(3,7,11,1) 0%, rgba(14,27,43,1) 4%, rgba(41,55,74,1) 6%, rgba(18,35,56,1) 94%, rgba(40,68,104,1) 96%, rgba(168,182,200,1) 100%);
background-image: url(../img/top-controls-bg.png);
} }
#controls-top div { #controls-top > div {
border-right: 1px solid black; border-right: 1px solid black;
} }
@ -144,10 +157,21 @@ td.playing {
text-align: left; text-align: left;
} }
#playback-controls { #playback-controls div:first-child {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
width: 160px; justify-content: space-between;
}
#playback-controls div button {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
height: calc(var(--ribbon-width) / 4 - 8px);
width: calc(var(--ribbon-width) / 4 - 8px);
} }
#progress { #progress {
@ -156,7 +180,6 @@ td.playing {
} }
#volume { #volume {
margin-left: 10px;
width: 90%; width: 90%;
} }
@ -167,6 +190,7 @@ td.playing {
#queue-controls { #queue-controls {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
} }
#queue-xfade-control { #queue-xfade-control {
@ -180,6 +204,11 @@ td.playing {
flex-direction: row; flex-direction: row;
} }
#volume-control {
display: flex;
flex-direction: row;
}
#top-logo { #top-logo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -203,13 +232,6 @@ td.playing {
width: 20px; width: 20px;
} }
#queue {
display: flex;
flex-direction: column;
flex-grow: 1;
border-bottom: 4px ridge #3a506b;
}
#controls_bottom { #controls_bottom {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -224,7 +246,7 @@ td.playing {
border-right: 4px ridge #3a506b; border-right: 4px ridge #3a506b;
} }
#playlist_tracklist { #results_tracklist {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

BIN
static/img/playback.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 503 B

BIN
static/img/table-header-gradient.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 602 B

BIN
static/img/top-controls-bg.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB