evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed the grid layout in the search tab

Browse Source
This commit is contained in:
RemixDev 2020-04-09 14:07:24 +02:00
parent 11164375be
commit e84947fedb
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/css/style.css
View File

@ -98,6 +98,9 @@ div#middle_section {
#main_search > .search_section{ #main_search > .search_section{
float: none; float: none;
} }
#search_tab .tab{
margin-bottom: 24px;
}
.top_result { .top_result {
display: flex; display: flex;
@ -122,14 +125,21 @@ div#middle_section {
} }
.release_grid{ .release_grid{
display: flex; display: grid;
align-items:flex-start; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
grid-gap: 1rem;
}
.release_grid.firstrow_only{
grid-template-rows: 1fr;
grid-auto-rows: 0;
grid-row-gap: 0px;
overflow-y: hidden;
} }
.release{ .release{
display: inline-block; display: inline-block;
width: 156px; width: 156px;
margin-right: 24px;
} }
/* Download tab section */ /* Download tab section */

4
public/index.html
View File

@ -60,8 +60,8 @@ <h1>{{ names[section] }}</h1>
</tr> </tr>
</table> </table>
</div> </div>
<div v-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid"> <div v-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only">
<div v-for="release in results[section].data.slice(0, 6)" class="release"> <div v-for="release in results[section].data.slice(0, 10)" class="release">
<img v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'" v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'"> <img v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'" v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'">
<p class="title">{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p> <p class="title">{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p>
<p class="subtitle">{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p> <p class="subtitle">{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p>