danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Started working on artist tab style

This commit is contained in:
RemixDev 2020-04-17 21:04:51 +02:00
parent 534da272d4
commit 18fb5020bb
5 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,6 +130,16 @@ button[disabled] {
opacity: 0.75;
}
button.selective {
background-color: var(--main-background);
color: var(--main-text);
}
button.selective.active {
background-color: var(--accent-color);
color: var(--accent-text);
}
input[type="text"],
input[type="password"],
input[type="number"] {
@ -158,4 +168,4 @@ input[type="number"] {
height: 64px;
width: 100%;
margin-top: 24px;
}
}

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

@ -1,15 +1,4 @@
/* Main Search Tab */
.search_tablinks {
background-color: var(--main-background);
color: var(--main-text);
}
.search_tablinks.active {
background-color: var(--accent-color);
color: var(--accent-text);
}
#main_search>.search_section {
float: none;
}
@ -70,4 +59,4 @@
.track_row>td>img {
width: 32px;
height: 32px;
}
}

5
public/css/modules/stackedTabs.css Normal file
View File

@ -0,0 +1,5 @@
#artist_tab header{
background-position: 0% 35%;
background-size: cover;
padding: 220px 24px 8px;
}

3
public/css/style.css
View File

@ -3,6 +3,7 @@
@import 'modules/sidebar.css';
@import 'modules/middle-section.css';
@import 'modules/tabs.css';
@import 'modules/stackedTabs.css';
@import 'modules/settings.css';
@import 'modules/main-search.css';
@import 'modules/download-tab.css';
@import 'modules/download-tab.css';

20
public/index.html
View File

@ -36,11 +36,11 @@
<!-- <div id="v-app" style="height: 300px;"><app/></div> -->
<div id="search_tab" class="main_tabcontent">
<div class="tab">
<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
<button class="search_tablinks" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
<button class="search_tablinks" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
<button class="search_tablinks" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
<button class="search_tablinks" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
<button class="search_tablinks selective" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
<button class="search_tablinks selective" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
<button class="search_tablinks selective" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
<button class="search_tablinks selective" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
<button class="search_tablinks selective" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
</div>
<div id="search_tab_content">
<!-- ### Main Search Tab ### -->
@ -375,17 +375,15 @@ <h1>Settings</h1>
<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
<div id="artist_tab" class="main_tabcontent fixed_footer">
<header>
<header v-bind:style="{ 'background-image': ' url(\''+image+'\')' }">
<h1>{{ title }}</h1>
<div class="fab"><i class="material-icons">get_app</i></div>
</header>
<div>
<ul id="artist-tabs">
<template v-for="(item, name, index) in body">
<li class="tab"><a v-bind:class="index==0 ? 'active' : ''" v-bind:href="'#artist_' + name" v-on:click="changeTab(name)">{{ name }}</a></li>
</template>
</ul>
<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>
</div>
<table>