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

30
public/index.js
View File

@ -154,7 +154,23 @@ window.onload = () => {
return;
}
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>');
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 =>
`<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('');
for (track of document.getElementById('album-bottom-' + id).children) {
let trackId = track.id.split('-')[1];