DMC/multiplayer
13
0
Fork 0
Code Issues1 Pull Requests Releases Wiki Activity

Updated the playlist to list descriptions, and changed the styling a bit

Browse Source
This commit is contained in:
Erik Thuning 2022-04-01 00:17:41 +02:00
parent cf572c31bf
commit 0992b25488
3 changed files with 22 additions and 6 deletions

3
index.html

@ -171,7 +171,8 @@
<li class="playlist-item"> <li class="playlist-item">
<a> <a>
<img/> <img/>
<span></span> <span class="title"></span>
<span class="desc"></span>
</a> </a>
</li> </li>
</template> </template>

3
player.js

@ -472,7 +472,8 @@ function setupPlaylist(body, playlistfile) {
} }
node.querySelector('img').src = item.thumb node.querySelector('img').src = item.thumb
node.querySelector('a').href = item.link node.querySelector('a').href = item.link
node.querySelector('span').textContent = item.title node.querySelector('span.title').textContent = item.title
node.querySelector('span.desc').textContent = item.description
parent.appendChild(node) parent.appendChild(node)
}) })

22
style.css

@ -108,20 +108,34 @@ body {
/*padding-right: calc(var(--gap) * 10);*/ /*padding-right: calc(var(--gap) * 10);*/
/*border: var(--gap) solid var(--fade);*/ /*border: var(--gap) solid var(--fade);*/
color: var(--foreground); color: var(--foreground);
display: flex; display: grid;
align-items: center; grid-template-areas: "thumb title" "thumb description";
grid-template-columns: 290px auto;
justify-items: start;
/*display: flex;*/
/*align-items: center;*/
text-decoration: none; text-decoration: none;
} }
.playlist-item img { .playlist-item img {
width: 150px; width: 100%;
height: auto; height: auto;
margin: var(--gap); margin: var(--gap);
border: 1px solid var(--fade); border: 1px solid var(--fade);
grid-area: thumb;
} }
.playlist-item span { .playlist-item span {
margin: calc(var(--gap) * 3); margin: calc(var(--gap) * 3);
max-width: 30vw; max-width: 30vw;
} }
.playlist-item span.title {
grid-area: title;
align-self: end;
font-size: 110%;
}
.playlist-item span.desc {
grid-area: description;
align-self: start;
}
.current a { .current a {
background-color: var(--background-other); background-color: var(--background-other);
/*color: var(--fade-other);*/ /*color: var(--fade-other);*/
@ -470,4 +484,4 @@ svg:focus,
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 8px; border-radius: 8px;
} }