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

add tabs

Browse source
This commit is contained in:
XenGi 2024-01-20 13:48:03 +01:00
parent 3e635d9e44
commit 1c0fc195b0
Signed by: xengi
SSH key fingerprint: SHA256:FGp51kRvGOcWnTHiOI39ImwVO4A3fpvR30nPX3LpV7g
3 changed files with 127 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
static/controls.js vendored
View file

@ -21,6 +21,45 @@ const control_volume_down = document.getElementById("control-volume-down");
const queue_table = document.querySelector("#queue tbody");
const control_track = document.getElementById("control-track");
const control_time = document.getElementById("control-time");
const tabs = document.getElementById("tabs");
const tab_browser = document.getElementById("tab-browser");
const tab_search = document.getElementById("tab-search");
const tab_playlists = document.getElementById("tab-playlists");
// UI controls
tab_browser.addEventListener("click", e => {
if (!tab_browser.classList.contains("active")) {
tab_browser.classList.add("active");
tab_search.classList.remove("active")
tab_playlists.classList.remove("active")
document.getElementById("file-browser").style.display = "block";
document.getElementById("search").style.display = "none";
document.getElementById("playlist-browser").style.display = "none";
}
});
tab_search.addEventListener("click", e => {
if (!tab_search.classList.contains("active")) {
tab_browser.classList.remove("active");
tab_search.classList.add("active")
tab_playlists.classList.remove("active")
document.getElementById("file-browser").style.display = "none";
document.getElementById("search").style.display = "block";
document.getElementById("playlist-browser").style.display = "none";
}
});
tab_playlists.addEventListener("click", e => {
if (!tab_playlists.classList.contains("active")) {
tab_browser.classList.remove("active");
tab_search.classList.remove("active")
tab_playlists.classList.add("active")
document.getElementById("file-browser").style.display = "none";
document.getElementById("search").style.display = "none";
document.getElementById("playlist-browser").style.display = "block";
}
});
// Add API calls to controls

49
static/index.html
View file

@ -79,8 +79,53 @@
<tbody></tbody>
</table>
</div>
<div id="browser">browser</div>
<div id="result">result</div>
<div id="browser">
<div id="tabs">
<a id="tab-browser" class="active" href="#">File Browser</a>
<a id="tab-search" href="#">Search</a>
<a id="tab-playlists" href="#">Playlists</a>
</div>
<div id="file-browser">
<div>
file browser
</div>
<div>
actions
</div>
</div>
<div id="search" style="display: none">
<div>
<label for="control-search"></label>
<input type="text" id="control-search" name="search" />
<button>Search</button>
</div>
<div>
actions
</div>
</div>
<div id="playlist-browser" style="display: none">
<div>
playlist browser
</div>
<div>
actions
</div>
</div>
</div>
<div id="result">
<table>
<thead>
<tr>
<th>Artist</th>
<th>Title</th>
<th>Album</th>
<th>Genre</th>
<th>Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<footer>
<a href="https://git.berlin.ccc.de/cccb/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon &copy; 2023
</footer>

42
static/style.css
View file

@ -16,7 +16,7 @@ main {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 2fr;
grid-template-rows: 150px 1fr 1fr;
grid-template-rows: 100px 1fr 1fr;
gap: 0 0;
grid-template-areas: "nav nav" "queue queue" "browser result" "footer footer";
}
@ -191,6 +191,15 @@ input[type=text] {
border-bottom-color: #545454;
}
#nav {
padding: 5px;
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%);
}
#nav > div {
border-right: 1px solid black;
}
thead {
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%);
@ -260,6 +269,37 @@ table tr:hover td {
background-color: #354158 !important; /* TODO: remove !important */
}
#tabs {
display: flex;
}
#tabs a {
width: 50%;
padding: 3pt;
display: inline-block;
text-align: center;
background-color: #28374a;
color: #bbb;
border: 1px solid #545454;
border-top-left-radius: 5pt;
border-top-right-radius: 5pt;
}
#tabs a.active {
background-color: #1a1a1a;
color: #bbb;
border-bottom: none;
/*border-top-color: #1a1a1a;*/
/*border-right-color: #545454;*/
/*border-bottom-color: #545454;*/
/*border-left-color: #1a1a1a;*/
}
#browser {
background-color: #171812;
border-right: 4px ridge #3a506b;
}
footer svg {
color: white;
width: 12pt;