oat
/
deemix-web-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

switch to flexboxes for album display

This commit is contained in:
Jill 2021-10-20 19:38:17 +03:00
parent 2b5aaee718
commit 6e9d4a5d82
2 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/index.css
View File

@ -212,6 +212,8 @@ input {
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out; transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out;
height: 96px; height: 96px;
display: flex;
justify-content: space-between;
} }
.small { .small {
font-size: medium; font-size: medium;
@ -234,29 +236,34 @@ input {
height: 100%; height: 100%;
border-radius: 10px; border-radius: 10px;
transition: 0.1s border ease-out, 0.1s box-shadow ease-out; transition: 0.1s border ease-out, 0.1s box-shadow ease-out;
margin: none; width: 96px;
padding: none; height: 96px;
} }
.album-image-wrapper { .album-image-wrapper {
transition: 0.1s border ease-out; transition: 0.1s border ease-out;
float: right; }
max-height: 100%; .album-metadata {
width: 96px; display: flex;
padding: none; flex-direction: column;
margin: none; width: 100%;
}
.metadata {
height: 100%;
} }
.link { .link {
cursor: pointer; cursor: pointer;
transition: 0.1s color ease-out, 0.1s filter ease-out; transition: 0.1s color ease-out, 0.1s filter ease-out;
} }
.album-download { .album-download {
position: relative;
top: 20px;
width: 32px; width: 32px;
height: 32px; height: 32px;
cursor: pointer; cursor: pointer;
transition: 0.1s filter ease-out; transition: 0.1s filter ease-out;
} }
.track .album-download {
position: relative;
top: 20px;
}
.lds-ring { .lds-ring {
display: inline-block; display: inline-block;
position: relative; position: relative;

30
public/index.js
View File

@ -154,7 +154,23 @@ window.onload = () => {
return; return;
} }
document.getElementById('albums').innerHTML = d.data.map(d => document.getElementById('albums').innerHTML = d.data.map(d =>
`<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="assets/download.svg"></div><div class="album-bottom" id="album-bottom-${d.id}"></div>` `
<div class="album" id="album-${d.id}">
<div class="album-metadata">
<span class="metadata">
<span class="big">${d.title}</span>
<br>
<span class="small">by ${d.artist.name}</span>
</span>
<img class="album-download" width="48" height="48" src="assets/download.svg">
</div>
<div class="album-image-wrapper">
<img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg">
</div>
</div>
<div class="album-bottom" id="album-bottom-${d.id}"></div>
`
).join('<br>'); ).join('<br>');
if (d.data.length === 0) return document.getElementById('albums').innerHTML = '<span class="small">Not found!</span>'; if (d.data.length === 0) return document.getElementById('albums').innerHTML = '<span class="small">Not found!</span>';
@ -180,7 +196,17 @@ window.onload = () => {
} }
document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d => document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
`<div class="track" id="track-${d.id}"><span>${d.artist} - ${d.title}</span><span><span class="track-download-wrapper"><img class="album-download" width="32" height="32" src="assets/download.svg"></span> ${formatTime(d.duration)}</span></div>` `
<div class="track" id="track-${d.id}">
<span>${d.artist} - ${d.title}</span>
<span>
<span class="track-download-wrapper">
<img class="album-download" width="32" height="32" src="assets/download.svg">
</span>
${formatTime(d.duration)}
</span>
</div>
`
).join(''); ).join('');
for (track of document.getElementById('album-bottom-' + id).children) { for (track of document.getElementById('album-bottom-' + id).children) {
let trackId = track.id.split('-')[1]; let trackId = track.id.split('-')[1];