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

updated content tabs' style

Browse Source
This commit is contained in:
Roberto Tonino 2020-06-16 21:57:18 +02:00
parent e21469307b
commit ea1938d429
9 changed files with 79 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

40
public/index.html
View File

@ -88,14 +88,14 @@ <h2>Start searching!</h2>
Deezer link Deezer link
</p> </p>
</div> </div>
<div :class="{'hide': results.query == ''}"> <div v-show="results.query !== ''">
<div class="tab"> <ul class="section-tabs">
<button class="search_tablinks" id="search_all_tab">All</button> <li class="section-tabs__tab search_tablinks" id="search_all_tab">All</li>
<button class="search_tablinks" id="search_track_tab">Tracks</button> <li class="section-tabs__tab search_tablinks" id="search_track_tab">Tracks</li>
<button class="search_tablinks" id="search_album_tab">Album</button> <li class="section-tabs__tab search_tablinks" id="search_album_tab">Album</li>
<button class="search_tablinks" id="search_artist_tab">Artist</button> <li class="section-tabs__tab search_tablinks" id="search_artist_tab">Artist</li>
<button class="search_tablinks" id="search_playlist_tab">Playlist</button> <li class="section-tabs__tab search_tablinks" id="search_playlist_tab">Playlist</li>
</div> </ul>
<div id="search_tab_content"> <div id="search_tab_content">
<!-- ### Main Search Tab ### --> <!-- ### Main Search Tab ### -->
<div id="main_search" class="search_tabcontent"> <div id="main_search" class="search_tabcontent">
@ -466,13 +466,14 @@ <h2 class="page_heading">Charts</h2>
</div> </div>
<div id="favorites_tab" class="main_tabcontent"> <div id="favorites_tab" class="main_tabcontent">
<h1>Favorites</h1> <h2 class="page_heading">Favorites</h2>
<div class="tab"> <div class="section-tabs">
<button class="favorites_tablinks" id="favorites_playlist_tab">Playlists</button> <div class="section-tabs__tab favorites_tablinks" id="favorites_playlist_tab">Playlists</div>
<button class="favorites_tablinks" id="favorites_album_tab">Albums</button> <div class="section-tabs__tab favorites_tablinks" id="favorites_album_tab">Albums</div>
<button class="favorites_tablinks" id="favorites_artist_tab">Artists</button> <div class="section-tabs__tab favorites_tablinks" id="favorites_artist_tab">Artists</div>
<button class="favorites_tablinks" id="favorites_track_tab">Tracks</button> <div class="section-tabs__tab favorites_tablinks" id="favorites_track_tab">Tracks</div>
<div @click="reloadTabs" role="button" aria-label="reload" ref="reloadButton" class="right clickable reload-button"> <div @click="reloadTabs" class="right clickable reload-button" style="margin-left: auto;"
ref="reloadButton" role="button" aria-label="reload">
<i class="material-icons">sync</i> <i class="material-icons">sync</i>
</div> </div>
</div> </div>
@ -1193,13 +1194,16 @@ <h1>About</h1>
<h1>Bug Reports</h1> <h1>Bug Reports</h1>
<p> <p>
If you have questions or problems with the app, search for a solution in the If you have questions or problems with the app, search for a solution in the
<a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't find anything <a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't
find anything
you can make a post with your issue on the subreddit. you can make a post with your issue on the subreddit.
</p> </p>
<p> <p>
Before reporting a bug make sure you're running the latest version of the app and that the thing you want Before reporting a bug make sure you're running the latest version of the app and that the thing you
want
to report is acatually a bug and not something that's wrong only on your end.<br /> to report is acatually a bug and not something that's wrong only on your end.<br />
Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been already reported. Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been
already reported.
</p> </p>
<p> <p>
<b>DO NOT</b> open issues for asking questions, there is a subreddit for that. <b>DO NOT</b> open issues for asking questions, there is a subreddit for that.

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

3
src/js/modules/tabs.js
View File

@ -209,6 +209,7 @@ function changeTab(sidebarEl, section, tabName) {
tabcontent[i].style.display = 'none' tabcontent[i].style.display = 'none'
} }
tablinks = document.getElementsByClassName(section + '_tablinks') tablinks = document.getElementsByClassName(section + '_tablinks')
// tablinks = document.getElementsByClassName('section-tabs__tab')
for (i = 0; i < tablinks.length; i++) { for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove('active') tablinks[i].classList.remove('active')
} }
@ -234,7 +235,7 @@ function changeTab(sidebarEl, section, tabName) {
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 && ['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 &&
MainSearch.results[search_selected.split('_')[0] + 'Tab'].data.length == 0 MainSearch.results[search_selected.split('_')[0] + 'Tab'].data.length == 0
) { ) {
console.log(search_selected.split('_')[0] + 'Tab') // console.log(search_selected.split('_')[0] + 'Tab')
MainSearch.search(search_selected.split('_')[0]) MainSearch.search(search_selected.split('_')[0])
} }

4
src/styles/scss/_middle-section.scss
View File

@ -28,7 +28,7 @@ $icon-dimension: 2rem;
i { i {
font-size: $icon-dimension; font-size: $icon-dimension;
transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;
color: var(--main-text); color: var(--foreground);
@include removeSelectionBackground; @include removeSelectionBackground;
} }
@ -41,7 +41,7 @@ $icon-dimension: 2rem;
} }
&:focus-within { &:focus-within {
border: 1px solid var(--main-text); border: 1px solid var(--foreground);
} }
$searchbar-height: calc(2rem + 1em); $searchbar-height: calc(2rem + 1em);

48
src/styles/scss/base/_base.scss
View File

@ -1,38 +1,38 @@
html { html {
height: 100vh; height: 100vh;
--main-scroll: #555; --main-scroll: hsl(0, 0%, 33%);
--panels-scroll: #2a2c2c; --panels-scroll: hsl(180, 2%, 17%);
--accent-color: #0a84ff; --accent-color: hsl(210, 100%, 52%);
--tag-background: #0062c4; --tag-background: hsl(210, 100%, 38%);
--tag-text: #ffffff; --tag-text: hsl(0, 0%, 100%);
--toast-background: #000000dd; --toast-background: hsla(0, 0%, 0%, 0.867);
--toast-secondary: #ffffff22; --toast-secondary: hsla(0, 0%, 100%, 0.133);
--toast-text: #ffffffde; --toast-text: hsla(0, 0%, 100%, 0.871);
--separator: #8f8f8f; --separator: hsl(0, 0%, 50%);
--explicit-separator: 0.3125em; --explicit-separator: 0.3125em;
} }
html[data-theme='light'] { html[data-theme='light'] {
--main-background: #ffffff; --main-background: hsl(0, 0%, 100%);
--secondary-background: #eeeeee; --secondary-background: hsl(0, 0%, 93%);
--main-text: #333333; --foreground: hsl(0, 0%, 20%);
--main-text-inverted: #eeeeee; --foreground-inverted: hsl(0, 0%, 93%);
--panels-background: #222324; --panels-background: hsl(210, 3%, 14%);
--panels-text: #ffffff; --panels-text: hsl(0, 0%, 100%);
--accent-text: black; --accent-text: hsl(0, 0%, 0%);
--table-bg: #ffffff; --table-bg: hsl(0, 0%, 100%);
--table-zebra: #c9c9c9; --table-zebra: hsl(0, 0%, 79%);
--table-highlight: #8f8f8f; --table-highlight: hsl(0, 0%, 56%);
} }
html[data-theme='dark'] { html[data-theme='dark'] {
--main-background: hsl(0, 0%, 8%); --main-background: hsl(0, 0%, 8%);
--secondary-background: hsl(0, 0%, 14%); --secondary-background: hsl(0, 0%, 14%);
--main-text: hsl(0, 0%, 93%); --foreground: hsl(0, 0%, 93%);
--main-text-inverted: hsl(0, 0%, 20%); --foreground-inverted: hsl(0, 0%, 20%);
--panels-background: hsl(0, 0%, 10%); --panels-background: hsl(0, 0%, 10%);
--panels-text: hsl(0, 0%, 100%); --panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%); --accent-text: hsl(0, 0%, 87%);
@ -45,9 +45,9 @@ html[data-theme='dark'] {
html[data-theme='purple'] { html[data-theme='purple'] {
--main-background: hsl(261, 74%, 6%); --main-background: hsl(261, 74%, 6%);
--secondary-background: hsl(257, 61%, 10%); --secondary-background: hsl(257, 61%, 10%);
--main-text: hsl(0, 0%, 93%); --foreground: hsl(0, 0%, 93%);
--foreground-inverted: hsl(258, 62%, 8%);
--accent-color: hsl(261, 85%, 37%); --accent-color: hsl(261, 85%, 37%);
--main-text-inverted: hsl(258, 62%, 8%);
--panels-background: hsl(257, 70%, 9%); --panels-background: hsl(257, 70%, 9%);
--panels-text: hsl(0, 0%, 100%); --panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%); --accent-text: hsl(0, 0%, 87%);
@ -64,5 +64,5 @@ body {
font-family: 'Open Sans'; font-family: 'Open Sans';
overflow: hidden; overflow: hidden;
background: var(--main-background); background: var(--main-background);
color: var(--main-text); color: var(--foreground);
} }

4
src/styles/scss/globals/_globals.scss
View File

@ -214,13 +214,13 @@ a:visited {
button[disabled] { button[disabled] {
background-color: var(--secondary-background); background-color: var(--secondary-background);
color: var(--main-text); color: var(--foreground);
opacity: 0.75; opacity: 0.75;
} }
button.selective { button.selective {
background-color: var(--main-background); background-color: var(--main-background);
color: var(--main-text); color: var(--foreground);
} }
button.selective.active { button.selective.active {

2
src/styles/scss/tabs/_search-tab.scss
View File

@ -26,7 +26,7 @@
/* Tab links */ /* Tab links */
.search_tablinks.active { .search_tablinks.active {
color: var(--main-text-inverted); color: var(--foreground-inverted);
} }
/* Top Result */ /* Top Result */

23
src/styles/scss/tabs/_tabs.scss
View File

@ -10,7 +10,7 @@
.tab button { .tab button {
background-color: var(--primary-background); background-color: var(--primary-background);
color: var(--main-text); color: var(--foreground);
} }
.tab button.active { .tab button.active {
@ -32,3 +32,24 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.section-tabs {
list-style-type: none;
display: flex;
margin: 16px 0 24px 0;
cursor: pointer;
&__tab {
flex: 1;
font-size: 1.2rem;
// width: 10rem;
padding: 1em;
border-top: 3px solid var(--foreground);
text-align: center;
&.active {
color: var(--accent-color);
border-top: 3px solid var(--accent-color);
}
}
}