diff options
| author | Carl Hetherington <cth@carlh.net> | 2026-02-03 22:35:03 +0100 |
|---|---|---|
| committer | Carl Hetherington <cth@carlh.net> | 2026-02-16 01:20:39 +0100 |
| commit | f3b446cdb542211ba0813c90899bce875f4da772 (patch) | |
| tree | 4deff536b0c1ab4b0274fe8027b8b323914756a7 /web | |
| parent | c4a409429972936045084d333e117a567d909420 (diff) | |
Tidy up playlists.html a bit.
Diffstat (limited to 'web')
| -rw-r--r-- | web/common.css | 20 | ||||
| -rw-r--r-- | web/index.html | 16 | ||||
| -rw-r--r-- | web/playlists.html | 40 |
3 files changed, 37 insertions, 39 deletions
diff --git a/web/common.css b/web/common.css index 8b1378917..f9e9a9742 100644 --- a/web/common.css +++ b/web/common.css @@ -1 +1,21 @@ +div.list { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + border: 2px solid black; + padding: 1em; +} + +ul.list { + padding-left: 0pt; + margin: 0pt; +} + +li.list { + border: 1px solid black; + background-color: #a7bad9; + padding: 3px; + list-style-type: none; + cursor: pointer; +} + + diff --git a/web/index.html b/web/index.html index 02da32acf..659395c7f 100644 --- a/web/index.html +++ b/web/index.html @@ -31,7 +31,7 @@ setInterval(function() { var list = div.appendChild(ul); data.forEach(entry => { var li = document.createElement("li"); - li.classList.add("playlist"); + li.classList.add("list"); li.appendChild(document.createTextNode(entry)); list.appendChild(li); }); @@ -69,7 +69,7 @@ function showPlaylists() response.json().then(data => { data.forEach(playlist => { var li = document.createElement("li"); - li.classList.add("playlist"); + li.classList.add("list"); li.appendChild(document.createTextNode(playlist.name)); li.uuid = playlist['uuid']; li.onclick = function() { @@ -81,7 +81,7 @@ function showPlaylists() nextPlaylist.appendChild(ul); data.content.forEach(content => { var li = document.createElement("li"); - li.classList.add("playlist"); + li.classList.add("list"); li.appendChild(document.createTextNode(content.name)); li.uuid = content.uuid; li.crop_to_ratio = content.crop_to_ratio; @@ -110,7 +110,7 @@ function showContent() response.json().then(data => { data.forEach(content => { var li = document.createElement("li"); - li.classList.add("playlist"); + li.classList.add("list"); li.appendChild(document.createTextNode(content.name)); document.getElementById('content-and-playlists-inner').appendChild(li); @@ -213,14 +213,6 @@ div.tab.selected { background-color: #cccccc; } -li.playlist { - border: 1px solid black; - background-color: #a7bad9; - padding: 3px; - list-style-type: none; - cursor: pointer; -} - div#next-playlist { margin-left: 0px; height: 30vh; diff --git a/web/playlists.html b/web/playlists.html index 723b2ec6c..4bfa9a3ee 100644 --- a/web/playlists.html +++ b/web/playlists.html @@ -1,5 +1,11 @@ <!DOCTYPE html> +<!-- +Playlist editor +--> + <html> +<head> +<link rel="stylesheet" href="common.css"> <script> var selectedPlaylistIndices = []; @@ -66,7 +72,7 @@ function renamePlaylist() function makePlaylistEntry(content) { var li = document.createElement("li"); - li.classList.add("playlist"); + li.classList.add("list"); var table = document.createElement('table'); table.style.width = '100%'; @@ -173,7 +179,7 @@ function updatePlaylist() playlistContents.setAttribute("playlist-id", playlistId); playlistContents.innerHTML = ""; var ul = document.createElement("ul"); - ul.classList.add("playlist"); + ul.classList.add("list"); var list = playlistContents.appendChild(ul); var index = 0; data.content.forEach(content => { @@ -218,7 +224,7 @@ function updatePlaylistList() response.json().then(data => { data.forEach(playlist => { var li = document.createElement("li"); - li.classList.add("playlist"); + li.classList.add("list"); li.appendChild(document.createTextNode(playlist.name)); li.uuid = playlist['uuid']; li.onclick = function() { @@ -244,7 +250,7 @@ fetch("/api/v1/content").then(response => { response.json().then(data => { data.forEach(content => { var li = document.createElement("li"); - li.classList.add("playlist"); + li.classList.add("list"); li.appendChild(document.createTextNode(content.name)); li.draggable = "true"; li.ondragstart = function(event) { @@ -263,29 +269,11 @@ ul#playlists { width: 400px; } -ul.playlist { - padding: 2em; - margin: 0pt; -} - -li.playlist { - border: 1px solid black; - background-color: #a7bad9; - padding: 3px; - list-style-type: none; - cursor: pointer; -} - -li.playlist.selected { +li.list.selected { background-color: #d343e0; cursor: pointer; } -div.playlist, div.content { - box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); - border: 2px solid black; -} - div.content { width: 95%; padding: 1em; @@ -297,8 +285,6 @@ ul#content { } </style> -<head> -<link rel="stylesheet" href="common.css"> <title>Playlists</title> </head> @@ -314,13 +300,13 @@ SIDEBAR </ul> <p>Playlist: <input id="playlist-name" type="text" maxlength="60"></input> <button onclick="renamePlaylist();">Rename</button> -<div id="playlist" class="playlist" ondragover="allowDrop(event)"> +<div id="playlist" class="list" ondragover="allowDrop(event)"> </div> </div> <div style="float: right;"> <p>Content: -<div class="content"> +<div class="list"> <ul id="content"> </div> </ul> |