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

94
static/flexbox/sanic.css
View file

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