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

Started working on artist tab style

Browse Source
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; 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="text"],
input[type="password"], input[type="password"],
input[type="number"] { input[type="number"] {
@ -158,4 +168,4 @@ input[type="number"] {
height: 64px; height: 64px;
width: 100%; width: 100%;
margin-top: 24px; margin-top: 24px;
} }

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

@ -1,15 +1,4 @@
/* Main Search Tab */ /* 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 { #main_search>.search_section {
float: none; float: none;
} }
@ -70,4 +59,4 @@
.track_row>td>img { .track_row>td>img {
width: 32px; width: 32px;
height: 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/sidebar.css';
@import 'modules/middle-section.css'; @import 'modules/middle-section.css';
@import 'modules/tabs.css'; @import 'modules/tabs.css';
@import 'modules/stackedTabs.css';
@import 'modules/settings.css'; @import 'modules/settings.css';
@import 'modules/main-search.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="v-app" style="height: 300px;"><app/></div> -->
<div id="search_tab" class="main_tabcontent"> <div id="search_tab" class="main_tabcontent">
<div class="tab"> <div class="tab">
<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button> <button class="search_tablinks selective" 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 selective" 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 selective" 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 selective" 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_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
</div> </div>
<div id="search_tab_content"> <div id="search_tab_content">
<!-- ### Main Search Tab ### --> <!-- ### Main Search Tab ### -->
@ -375,17 +375,15 @@ <h1>Settings</h1>
<div id="about_tab" class="main_tabcontent"><h1>About</h1></div> <div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
<div id="artist_tab" class="main_tabcontent fixed_footer"> <div id="artist_tab" class="main_tabcontent fixed_footer">
<header> <header v-bind:style="{ 'background-image': ' url(\''+image+'\')' }">
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<div class="fab"><i class="material-icons">get_app</i></div> <div class="fab"><i class="material-icons">get_app</i></div>
</header> </header>
<div> <div>
<ul id="artist-tabs"> <template v-for="(item, name, index) in body">
<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>
<li class="tab"><a v-bind:class="index==0 ? 'active' : ''" v-bind:href="'#artist_' + name" v-on:click="changeTab(name)">{{ name }}</a></li> </template>
</template>
</ul>
</div> </div>
<table> <table>