From 0eff220cc5e46387e8e8e0abe55a60b29883f057 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 01:45:48 +0100 Subject: [PATCH 01/15] static: move sanic.js import from header to end of body --- static/flexbox/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 0457ac9..2b63675 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -6,7 +6,6 @@ -
@@ -258,5 +257,7 @@ sanic mpd web ui 0.1.0 - by XenGi and coon © 2023
+ + From 19533e5d01f7322b8531406356b56c3fe79f8664 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:02:03 +0100 Subject: [PATCH 02/15] static: use modern css for alternate table coloring again --- static/flexbox/index.html | 30 +++++++++++++++--------------- static/flexbox/sanic.css | 28 +++++++++------------------- static/img/playback.png | Bin 503 -> 0 bytes 3 files changed, 24 insertions(+), 34 deletions(-) delete mode 100644 static/img/playback.png diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 2b63675..618ad48 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -78,7 +78,7 @@ - + 1 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -86,7 +86,7 @@ undefined 9:29 - + 2 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -94,15 +94,15 @@ undefined 9:29 - - 3 + + 3 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29 - + 4 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -110,7 +110,7 @@ undefined 9:29 - + 5 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -118,7 +118,7 @@ undefined 9:29 - + 6 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -126,7 +126,7 @@ undefined 9:29 - + 7 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -200,49 +200,49 @@ - + Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29 - + Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29 - + Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29 - + Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29 - + Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29 - + Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29 - + Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 422c8d4..f633feb 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -84,9 +84,13 @@ td { 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,26 +99,12 @@ 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; -} - #flexbox-container { display: flex; flex-direction: column; diff --git a/static/img/playback.png b/static/img/playback.png deleted file mode 100644 index eebea58b5cdcf35ecde2f5fcc81eef604ee65672..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 503 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4i*LmhONKMUokK+s%APn2Y5O=D-;yvr)B1( zGB9XNoIAnR`*46r+x(EgkI6w+9ZqcS+hvzj)+N#jV?G_$GI+d%Jqu2aCnN?9&;AkGY7LEa|jbZgO*aRSL_U z$;nFuoxd)drMW}!Y0)POv9B(>d|mIQ&Ac9X%0Vu<@@9*5Qsph1H~;I_*Up(f+pl&S zTV%ktXCYfJa@>wDR)Y=SBo<^gQ9q{OZD-1Ao57JuKccoAb~AHKnE}G9=lQnZ3Fg7#J8lUHx3v IIVCg!0I77>3IG5A From 8fe3dae1b8284579f368c6cb2d4ca47b5b0583e6 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:58:47 +0100 Subject: [PATCH 03/15] static: highlight table rows when hovering with mouse --- static/flexbox/sanic.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index f633feb..6797f27 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -105,6 +105,10 @@ table tr:nth-child(even) td { background-color: #490b00; } +table tr:hover td { + background-color: #354158 !important; /* TODO: remove !important */ +} + #flexbox-container { display: flex; flex-direction: column; From 2bfddc8fe5d77aab3cebfd5ebed59e0bd92394c2 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:02:45 +0100 Subject: [PATCH 04/15] static: add more dummy tracks in queue --- static/flexbox/index.html | 72 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 618ad48..4a62c22 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -134,6 +134,78 @@ undefined 9:29 + + 8 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + + + 9 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + + + 10 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + + + 11 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + + + 12 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + + + 13 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + + + 14 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + + + 15 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + + + 16 + Chakra + Love Shines Through (Martin Roth's in Electro Love Remix) + undefined + undefined + 9:29 + From 5c533a8a1a21664e792b808e38f369c29417de7f Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:36:29 +0100 Subject: [PATCH 05/15] static: do vertical stretching properly --- static/flexbox/sanic.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 6797f27..b683887 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -1,7 +1,10 @@ html, body { background-color: #09101d; color: #bbb; - height: 99%; + + margin: 0; + padding: 0; + height: 100%; } div { From 9f568251ccb1e1cd8fa23bc5e93b56049e1158e8 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:40:56 +0100 Subject: [PATCH 06/15] static: improve button style of playback controls --- static/flexbox/sanic.css | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index b683887..f349762 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -1,3 +1,7 @@ +:root { + --ribbon-width: 160px; +} + html, body { background-color: #09101d; color: #bbb; @@ -141,10 +145,21 @@ table tr:hover td { 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 { From 468b35f791969bb2b8a3d64abfa1de69cefcce1b Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:42:39 +0100 Subject: [PATCH 07/15] static: add symbols next to volume slider --- static/flexbox/index.html | 2 ++ static/flexbox/sanic.css | 12 +++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 4a62c22..e42eaaf 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -49,7 +49,9 @@
+ +
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index f349762..b133513 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -29,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; @@ -168,7 +174,6 @@ table tr:hover td { } #volume { - margin-left: 10px; width: 90%; } @@ -192,6 +197,11 @@ table tr:hover td { flex-direction: row; } +#volume-control { + display: flex; + flex-direction: row; +} + #top-logo { display: flex; flex-direction: column; From 6626585a1569867d795b924cd671d49ab99350bc Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:44:42 +0100 Subject: [PATCH 08/15] static: fix rendering of track display --- static/flexbox/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index e42eaaf..78d2aad 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -55,7 +55,7 @@
-

Now playing: 00:00:00/100:00:00

+
Now playing: 00:00:00/100:00:00
From 2056414a399ef12abf6c46c129e3f174653195aa Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:45:28 +0100 Subject: [PATCH 09/15] static: replace emojis by unicode code points --- static/flexbox/index.html | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 78d2aad..0750824 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -16,10 +16,15 @@
- - - - + + + + + +
From da17f5f4225916316658ac7ac6d0b3c8abccffb1 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:46:05 +0100 Subject: [PATCH 10/15] static: rename playlist_tracklist -> results_tracklist --- static/flexbox/index.html | 2 +- static/flexbox/sanic.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 0750824..1ab053b 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -267,7 +267,7 @@
-
+
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index b133513..85d3603 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -246,7 +246,7 @@ table tr:hover td { border-right: 4px ridge #3a506b; } -#playlist_tracklist { +#results_tracklist { display: flex; flex-direction: column; From 1bb89b52f16f362ffbb8f161cf16b73e27656679 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 02:47:11 +0100 Subject: [PATCH 11/15] static: replace image based table gradient rendering by css gradient rendering method --- static/flexbox/sanic.css | 4 ++-- static/img/table-header-gradient.png | Bin 602 -> 0 bytes 2 files changed, 2 insertions(+), 2 deletions(-) delete mode 100644 static/img/table-header-gradient.png diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 85d3603..841f550 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -74,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 { diff --git a/static/img/table-header-gradient.png b/static/img/table-header-gradient.png deleted file mode 100644 index d853129c7ce25f7ef3d0e8de69f288fb91f35a5b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 602 zcmeAS@N?(olHy`uVBq!ia0y~yU|?imV36csV_;zTFu|psfq}6#)7d$|)7e>}peR2r zGbfdSL1SX=L|c!;4l+mMgO@H6W$*6LNLj&`YS4d^F3@%mmF4# zQ=fNlOUb$4M-;=Rh&(EOWZ10d@#jS8&8Oz)Sle0WNg7=`Y57QCV?;*c&eq6_0iDY` z4tK2z+&7^x^5LGNk-DJ~kLUeqJve9EoJUq?9gl42un-bZT-?MvB|*_?wOd!G%3F8a zKg@mhj(Rg=q!XUZaF^6lInMu&egAIL&y$7of(*E}?7#8txPib8)>omo|JiMO`-}5I zJ=?l1%l5}Gr`dU~H{1F_@WN)^m>6@@O8y;p7=O(#IXOY*q<`><=Z)Wue=XCwP|aPk zZr5JZZ-u`YmaJU8RQkaK0SV23Z?lf?wvMX){oQBre);#8i*BBj$au=Yz`&N|?e4;G z7X-hGa?E95VBjq9h%9Dc;1&j9Muu5)Bp4VN*h@TpUD=;=%Zlr&_tmHF0L5#GYeb22 zer|4RUI~M9QEFmIYKlU6W=V#EyQgnJcq5-U0|SGhr;B3<$Mw0V6!{J)FdR6rjYDSI z|NT>Dw*H*C?9q(u`3ymv%F-(P+9&WWI^q3; Date: Tue, 5 Dec 2023 02:48:16 +0100 Subject: [PATCH 12/15] static: replace top controls based gradient rendering by css gradient rendering method --- static/flexbox/sanic.css | 3 +-- static/img/top-controls-bg.png | Bin 1909 -> 0 bytes 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 static/img/top-controls-bg.png diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 841f550..6db0a59 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -133,8 +133,7 @@ table tr:hover td { 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 { diff --git a/static/img/top-controls-bg.png b/static/img/top-controls-bg.png deleted file mode 100644 index 81074735fa7866afc8118c1497886343c6e5ac3a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1909 zcmeAS@N?(olHy`uVBq!ia0y~yU|?flV6fo;k*>O@n;96GUsr`hlmsP~D-;yvr)B1( zDwI?fq$;FVWTr7NRNPt{8a*jRljCo>=w=qiz?i=C9XAi^)blNy85tUT_p+?v^&NH$ zjFugVe?NcctAD6`PG*wWY18K&`d34CCMJFSc=d9y&+_`3pM76u%B94xHLFNG-Kg{S zl=+3Pdmm;t|4Ogga5`~!*Su-#oeEF)oc!}b<;9-`!MnO%?UD=EmXCe=N8-4s&AL1B za_wDv;*SOW@bF*_oWfkju;kJ$yIp zGarVZvCmA*-=E`hQLfM_?tuQcJ#Er`bG}btQrM!OSH<)vNBrLp#rg@W90L4j@UrJ@ zv=1p+TAp|EV5Guw3Hk62r%(hFFHj`}Q`qAB*wsl`HyA?w2&)k1crC8vb_ zii8|(wQ}BU+qnF~#8lV0MMhb|4FM;E8hod+Z3qf_;_ulelchB)#56mQJ8Em{NzLqY zJ5%(F)_Qoldh0EXSh;j&gwfWVqi0raJrx?jy!Bbss;g1ak1r&wa13v*VP0B1ecrBb zcf7a9RZDx!pV-!Cb817N`)r%kMLuV2PH%}!j}{TrI_l*e9+!G^)#}_Qx2DbA_HNJV zZL#Im3*Elos>`i!kcz$XL*Z%B(^jb!3#TmS`c$;2Pg3Bqi^CoZCXbA=Gm8Sf-kh*Z z+gLR<_=-!=aW$W!BMgaAM|Qnzy(_)*{vq8Jf5r0t#GhbofA`-(k71X5;cvFBFW=v> z=&;ROc-(|5@BWm%e`CFUzpXkfK0DCgAj?^?#@L~d?Z>TO8k?#=U0oHYm-?$FP36f# zd94|K^LOeBJoc)+aZYDN(c#ed$<-0|Mkjl(Hm!XZT#%h=pYt_8w>H1)=*r(ta+{a zt$5n?neSdbJTcRb*X`7aiYG4HmQCHsmlc8eoq#T&zPR#l`@3GdFiPvZ3M!bFf+-c8*FAc@*ofU2M zj3?M4Pr8H}zhz)xY|V6b4)An#hGlyOhKf106Ky>XJIEZ34_>-RlwI3H@MOSTosKRG zFVXIVg z^W(ZbyT9+KX6N{76nwU?(BZ0%vS@$j%{yHZ6|Vekh7AITgp9wsR4Fo_|5(Z|AOC)l z&FSBF<}VIEIh*H0=aJ1m<~ol`AHDSTe!j$qbK+b!QICm;Lc9I{D-lgYt13tpG*Kx)1h0?yilTF{fa1li`BT zN4MF#H5|~pu;S*o?;CT?{TTim7cAZSXR4LKXV0p&OI`aK_T@f!v}@_f>H|;t41O%} zZhPWUH_K@u!=CvU&7U^>i(XKD_3hf7{g>GloMUzGGO)KF$e6h4y3M`2SMS~4pFZpF zUxo#oMLSDZZGHtRn3KHST^NKIlo>2OX4&szU|`@Z@Q5sCVBmNS!i-`QPRKGaFtC?+ z`ns||=av(dVp!$OozB3(Smo*B7-DfcH^kb{#gS+8;(!YW7%iB@pR-(eAT*HysKF}L4;!d!*y z1FVvB0^Zz@dCzSv_~yk#&bBu_i;jt&{2(PEn>vNo}-Q4CY}Z*2)uPWg9dLYPrYVaeuFPLaIl0(%w06w>UzX6#zzq`KSJ zdg7A+6aATK=Go5ie1_n=8KbLh*2~7aV7kqR8 From 85e0f9fb42148489b693df9af32cbc85f1fa8d53 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 03:00:17 +0100 Subject: [PATCH 13/15] static: change padding for td elements --- static/flexbox/sanic.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 6db0a59..2e75447 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -87,7 +87,7 @@ th { } td { - padding: 1px 1px 1px 0.5em; + padding: 1px 0.5em; border: solid black; border-width: 0 1px 1px 0; text-align: left; From d48d8cb5e1f58a29a836108322eecf85dfcfecde Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 03:01:33 +0100 Subject: [PATCH 14/15] static: add some space between order controls and xfade controls --- static/flexbox/sanic.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 2e75447..5820058 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -136,7 +136,7 @@ table tr:hover td { 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; } @@ -183,6 +183,7 @@ table tr:hover td { #queue-controls { display: flex; flex-direction: row; + justify-content: space-between; } #queue-xfade-control { From 3889391f1bc8ebff12225eb6207fbd3bb43ddede Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 5 Dec 2023 03:02:12 +0100 Subject: [PATCH 15/15] static: move #queue definition up --- static/flexbox/sanic.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 5820058..709aec9 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -93,6 +93,13 @@ td { 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; } @@ -225,13 +232,6 @@ table tr:hover td { width: 20px; } -#queue { - display: flex; - flex-direction: column; - flex-grow: 1; - border-bottom: 4px ridge #3a506b; -} - #controls_bottom { display: flex; flex-direction: row;