updated content tabs' style
This commit is contained in:
Roberto Tonino
parent
e21469307b
commit
ea1938d429
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
/* Tab links */
|
||||
|
||||
.search_tablinks.active {
|
||||
color: var(--main-text-inverted);
|
||||
color: var(--foreground-inverted);
|
||||
}
|
||||
|
||||
/* Top Result */
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue