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

first styling of the sidebar

This commit is contained in:
Roberto Tonino 2020-04-24 21:54:12 +02:00
parent 2c887d9e28
commit 987bbbe710
5 changed files with 92 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.jsbeautifyrc
View File

@ -12,8 +12,8 @@
"indent_with_tabs": true,
"newline_between_rules": true,
"selector_separator": " ",
"selector_separator_newline": true,
"selector_separator_newline": false,
"preserve_newlines": true,
"max_preserve_newlines": 10
"max_preserve_newlines": 3
}
}

15
public/css/modules/base.css
View File

@ -1,3 +1,14 @@
* {
/* Normalizing */
/* margin: 0; */
/* padding: 0; */
box-sizing: border-box;
}
body {
font-size: 16px;
}
:root {
--main-background: #ffffff;
--secondary-background: #eeeeee;
@ -6,7 +17,7 @@
--panels-background: #222324;
--panels-text: #ffffff;
--panels-scroll: #2a2c2c;
--accent-color: #0A84FF;
--accent-color: #0a84ff;
--accent-text: #ffffff;
--tag-background: #0062c4;
--tag-text: #ffffff;
@ -43,4 +54,4 @@ body {
width: calc(100% - 48px);
height: 100%;
display: flex;
}
}

50
public/css/modules/sidebar.css
View File

@ -1,21 +1,51 @@
/* Sidebar section selector */
#sidebar {
background-color: var(--panels-background);
display: flex;
flex-direction: column;
width: 48px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--panels-background);
color: var(--panels-text);
transition: width 125ms ease-in-out 150ms;
}
#sidebar > .side_icon {
font-size: 24px;
padding: 12px;
#sidebar:hover {
width: 200px;
}
.side_icon.active {
#sidebar .main_tablinks_text {
display: none;
display: inline-block;
margin-left: 20px;
opacity: 0;
visibility: hidden;
transition: all 50ms ease-in-out 200ms;
}
#sidebar:hover .main_tablinks_text {
display: inline-block;
opacity: 1;
visibility: visible;
}
#sidebar .main_tablinks {
display: flex;
align-items: center;
margin-top: 5px;
cursor: pointer;
}
#sidebar .main_tablinks:hover {
background-color: #3e3e3e;
}
#sidebar .side_icon {
font-size: 30px;
padding: 9px;
}
#sidebar .main_tablinks.active .side_icon {
color: var(--accent-color);
}
.main_tablinks {
cursor: pointer;
}

31
public/index.html
View File

@ -15,19 +15,21 @@
</head>
<body>
<aside role="navigation" id="sidebar">
<aside id="sidebar" role="navigation">
<i class="material-icons side_icon">menu</i>
<i id="main_search_tablink" class="main_tablinks"></i>
<i role="link" aria-label="home" id="main_home_tablink" class="material-icons side_icon main_tablinks">home</i>
<i role="link" aria-label="charts" id="main_charts_tablink"
class="material-icons side_icon main_tablinks">bubble_chart</i>
<i role="link" aria-label="favorites" id="main_favorites_tablink"
class="material-icons side_icon main_tablinks">album</i>
<i role="link" aria-label="link analyzer" id="main_analyzer_tablink"
class="material-icons side_icon main_tablinks">link</i>
<i role="link" aria-label="settings" id="main_settings_tablink"
class="material-icons side_icon main_tablinks">settings</i>
<i role="link" aria-label="about" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i>
<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="home"><i class=""></i></span>
<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">bubble_chart</i><span class="main_tablinks_text">Charts</span></span>
<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">album</i><span class="main_tablinks_text">Favorites</span></span>
<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">link</i><span class="main_tablinks_text">Link Analyzer</span></span>
<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">settings</i><span class="main_tablinks_text">Settings</span></span>
<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">info</i><span class="main_tablinks_text">Info</span></span>
</aside>
<main id="main_content">
<div id="middle_section">
@ -492,7 +494,8 @@ <h1>{{ title }}</h1>
<tbody>
<tr v-for="release in showTable">
<td class="inline-flex clickable" @click="albumView" v-bind:data-id="release.id">
<img class="rounded coverart" v-bind:src="release.cover_small" style="margin-right: 16px; width: 56px; height: 56px;" />
<img class="rounded coverart" v-bind:src="release.cover_small"
style="margin-right: 16px; width: 56px; height: 56px;" />
<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit"
style="color:#FF3B30;">explicit</i>
{{release.title}}
@ -594,4 +597,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<script type="module" src="/public/js/app.js"></script>
</html>
</html>

35
public/js/modules/tabs.js
View File

@ -54,29 +54,34 @@ export class Tabs {
* @since 0.1.0
*/
function handleSidebarClick(event) {
let targetID = event.target.id
if (!(event.target.matches('.main_tablinks') || event.target.parentElement.matches('.main_tablinks'))) {
return
}
let sidebarEl = event.target.matches('.main_tablinks') ? event.target : event.target.parentElement
let targetID = sidebarEl.getAttribute('id')
switch (targetID) {
case 'main_search_tablink':
changeTab(event, 'main', 'search_tab')
changeTab(sidebarEl, 'main', 'search_tab')
break
case 'main_home_tablink':
changeTab(event, 'main', 'home_tab')
changeTab(sidebarEl, 'main', 'home_tab')
break
case 'main_charts_tablink':
changeTab(event, 'main', 'charts_tab')
changeTab(sidebarEl, 'main', 'charts_tab')
break
case 'main_favorites_tablink':
changeTab(event, 'main', 'favorites_tab')
changeTab(sidebarEl, 'main', 'favorites_tab')
break
case 'main_analyzer_tablink':
changeTab(event, 'main', 'analyzer_tab')
changeTab(sidebarEl, 'main', 'analyzer_tab')
break
case 'main_settings_tablink':
changeTab(event, 'main', 'settings_tab')
changeTab(sidebarEl, 'main', 'settings_tab')
break
case 'main_about_tablink':
changeTab(event, 'main', 'about_tab')
changeTab(sidebarEl, 'main', 'about_tab')
break
default:
@ -89,19 +94,19 @@ function handleTabClick(event) {
switch (targetID) {
case 'search_all_tab':
changeTab(event, 'search', 'main_search')
changeTab(event.target, 'search', 'main_search')
break
case 'search_track_tab':
changeTab(event, 'search', 'track_search')
changeTab(event.target, 'search', 'track_search')
break
case 'search_album_tab':
changeTab(event, 'search', 'album_search')
changeTab(event.target, 'search', 'album_search')
break
case 'search_artist_tab':
changeTab(event, 'search', 'artist_search')
changeTab(event.target, 'search', 'artist_search')
break
case 'search_playlist_tab':
changeTab(event, 'search', 'playlist_search')
changeTab(event.target, 'search', 'playlist_search')
break
default:
@ -117,7 +122,7 @@ function handleTabClick(event) {
// 5. lastSettings
// 6. search_selected
// 7. MainSearch
function changeTab(evt, section, tabName) {
function changeTab(sidebarEl, section, tabName) {
windows_stack = []
currentStack = {}
var i, tabcontent, tablinks
@ -145,7 +150,7 @@ function changeTab(evt, section, tabName) {
// Not choosing .currentTarget beacuse the event
// is delegated
evt.target.classList.add('active')
sidebarEl.classList.add('active')
// Check if you need to load more content in the search tab
if (