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

Continuing work on artist tab style

Browse Source
This commit is contained in:
RemixDev 2020-04-18 10:08:34 +02:00
parent 21a19d7850
commit 4736c63b7b
3 changed files with 44 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/css/modules/globals.css
View File

@ -60,13 +60,13 @@ span.tag {
padding: 3px 6px;
}
.tracks_table {
table {
width: 100%;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}
.tracks_table td {
table td {
padding: 4px 12px 4px 5px;
vertical-align: middle;
border: 0px black solid;
@ -76,10 +76,13 @@ td img {
vertical-align: middle;
}
.tracks_table tr:nth-child(even) {
table tr:nth-child(even) {
background-color: var(--secondary-background);
border: 0px black solid;
}
th{
text-align: left;
}
p,
.tracks_table td.breakline {
@ -102,6 +105,9 @@ p,
display: flex;
align-items: center;
}
.inline-flex .right{
margin-left: auto;
}
.secondary-text .material-icons {
font-size: 17px !important;
@ -169,3 +175,24 @@ input[type="number"] {
width: 100%;
margin-top: 24px;
}
.tab {
margin: 16px 0px;
}
th.sortable{
-webkit-user-select: none;
user-select: none;
}
th.sort-asc:after {content: "\25b2";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}
th.sort-desc:after {content: "\25bc";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}
.fab{
width: 56px;
height: 56px;
border-radius: 28px;
display: inline-block;
background-color: var(--accent-color);
color: var(--accent-text);
}
.fab i{
font-size: 24px;
padding: 16px;
}

4
public/css/modules/main-search.css
View File

@ -3,10 +3,6 @@
float: none;
}
#search_tab .tab {
margin-bottom: 24px;
}
.top_result {
display: flex;
align-items: center;

26
public/index.html
View File

@ -37,7 +37,7 @@
<div v-if="(section != 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)" class="search_section">
<h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
<!-- Top result -->
<div v-if="section == 'TOP_RESULT'" class="top_result">
<div v-if="section == 'TOP_RESULT'" class="top_result" v-on:click="window[results.TOP_RESULT[0].__TYPE__.toLowerCase()+'View'](event)" v-bind:data-id="results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : ''">
<div class="cover_container">
<img v-bind:src="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + results.TOP_RESULT[0].ART_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + results.TOP_RESULT[0].ALB_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'https://e-cdns-images.dzcdn.net/images/'+ results.TOP_RESULT[0].PICTURE_TYPE +'/' + results.TOP_RESULT[0].PLAYLIST_PICTURE :'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'"
v-bind:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
@ -164,10 +164,12 @@ <h1>Home</h1>
<div id="settings_tab" class="main_tabcontent fixed_footer">
<h1>Settings</h1>
<div id="logged_in_info">
<div id="logged_in_info" class="inline-flex">
<img id="settings_picture" src="" alt="Profile Picture" class="circle" style="width: 125px;height:125px; margin-right: 12px;"/>
<p>You are logged in as <b id="settings_username"></b></p>
<button onclick="logout()" id="settings_btn_logout">Logout</button>
<div>
<p>You are logged in as <b id="settings_username"></b></p>
<button onclick="logout()" id="settings_btn_logout">Logout</button>
</div>
</div>
<div class="inline-flex">
<input autocomplete="off" type="password" id="login_input_arl" placeholder="ARL"/>
@ -363,12 +365,12 @@ <h1>Settings</h1>
<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
<div id="artist_tab" class="main_tabcontent fixed_footer">
<header v-bind:style="{ 'background-image': ' url(\''+image+'\')' }">
<header class="inline-flex" v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<h1>{{ title }}</h1>
<div class="fab"><i class="material-icons">get_app</i></div>
<div class="fab right"><i class="material-icons">get_app</i></div>
</header>
<div>
<div class="tab">
<template v-for="(item, name, index) in body">
<button v-bind:class="'selective' + (name==currentTab ? 'active' : '')" v-bind:href="'#artist_' + name" v-on:click="changeTab(name)">{{ name }}</button>
</template>
@ -377,17 +379,17 @@ <h1>{{ title }}</h1>
<table>
<thead>
<tr>
<td v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null" v-bind:class="{ 'sort-asc': data.sortKey == sortKey && sortOrder == 'asc', 'sort-desc': data.sortKey == sortKey && sortOrder == 'desc', 'sortable': data.sortKey, 'clickable': data.sortKey }">
<th v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null" v-bind:class="{ 'sort-asc': data.sortKey == sortKey && sortOrder == 'asc', 'sort-desc': data.sortKey == sortKey && sortOrder == 'desc', 'sortable': data.sortKey, 'clickable': data.sortKey }">
{{data.title}}
</td>
</th>
</tr>
</thead>
<tbody>
<template v-for="release in showTable">
<tr>
<td>
<img v-bind:src="release.cover_small"/>
<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit">explicit</i>
<td class="inline-flex">
<img class="rounded" v-bind:src="release.cover_small" style="margin-right: 16px;"/>
<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit" style="color:#FF3B30;">explicit</i>
{{release.title}}
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">fiber_new</i>
</td>