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

42
public/index.html
View File

@ -88,14 +88,14 @@ <h2>Start searching!</h2>
Deezer link
</p>
</div>
<div :class="{'hide': results.query == ''}">
<div class="tab">
<button class="search_tablinks" id="search_all_tab">All</button>
<button class="search_tablinks" id="search_track_tab">Tracks</button>
<button class="search_tablinks" id="search_album_tab">Album</button>
<button class="search_tablinks" id="search_artist_tab">Artist</button>
<button class="search_tablinks" id="search_playlist_tab">Playlist</button>
</div>
<div v-show="results.query !== ''">
<ul class="section-tabs">
<li class="section-tabs__tab search_tablinks" id="search_all_tab">All</li>
<li class="section-tabs__tab search_tablinks" id="search_track_tab">Tracks</li>
<li class="section-tabs__tab search_tablinks" id="search_album_tab">Album</li>
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">Artist</li>
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">Playlist</li>
</ul>
<div id="search_tab_content">
<!-- ### Main Search Tab ### -->
<div id="main_search" class="search_tabcontent">
@ -466,13 +466,14 @@ <h2 class="page_heading">Charts</h2>
</div>
<div id="favorites_tab" class="main_tabcontent">
<h1>Favorites</h1>
<div class="tab">
<button class="favorites_tablinks" id="favorites_playlist_tab">Playlists</button>
<button class="favorites_tablinks" id="favorites_album_tab">Albums</button>
<button class="favorites_tablinks" id="favorites_artist_tab">Artists</button>
<button class="favorites_tablinks" id="favorites_track_tab">Tracks</button>
<div @click="reloadTabs" role="button" aria-label="reload" ref="reloadButton" class="right clickable reload-button">
<h2 class="page_heading">Favorites</h2>
<div class="section-tabs">
<div class="section-tabs__tab favorites_tablinks" id="favorites_playlist_tab">Playlists</div>
<div class="section-tabs__tab favorites_tablinks" id="favorites_album_tab">Albums</div>
<div class="section-tabs__tab favorites_tablinks" id="favorites_artist_tab">Artists</div>
<div class="section-tabs__tab favorites_tablinks" id="favorites_track_tab">Tracks</div>
<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>
</div>
</div>
@ -1193,13 +1194,16 @@ <h1>About</h1>
<h1>Bug Reports</h1>
<p>
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.
</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 />
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>
<b>DO NOT</b> open issues for asking questions, there is a subreddit for that.
@ -1469,4 +1473,4 @@ <h1>Errors for {{ title }}</h1>
<script src="/public/js/bundle.js"></script>
</html>
</html>

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

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

@ -46,7 +46,7 @@ export function showView(viewType, event) {
showTab(viewType, id)
}
export function showErrors(event){
export function showErrors(event) {
ErrorsTab.showErrors(event.data.item)
changeTab(event.target, 'main', 'errors_tab')
}
@ -209,6 +209,7 @@ function changeTab(sidebarEl, section, tabName) {
tabcontent[i].style.display = 'none'
}
tablinks = document.getElementsByClassName(section + '_tablinks')
// tablinks = document.getElementsByClassName('section-tabs__tab')
for (i = 0; i < tablinks.length; i++) {
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 &&
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])
}

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

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

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

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

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

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

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

@ -10,7 +10,7 @@
.tab button {
background-color: var(--primary-background);
color: var(--main-text);
color: var(--foreground);
}
.tab button.active {
@ -32,3 +32,24 @@
overflow: hidden;
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);
}
}
}