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, "indent_with_tabs": true,
"newline_between_rules": true, "newline_between_rules": true,
"selector_separator": " ", "selector_separator": " ",
"selector_separator_newline": true, "selector_separator_newline": false,
"preserve_newlines": true, "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 { :root {
--main-background: #ffffff; --main-background: #ffffff;
--secondary-background: #eeeeee; --secondary-background: #eeeeee;
@ -6,7 +17,7 @@
--panels-background: #222324; --panels-background: #222324;
--panels-text: #ffffff; --panels-text: #ffffff;
--panels-scroll: #2a2c2c; --panels-scroll: #2a2c2c;
--accent-color: #0A84FF; --accent-color: #0a84ff;
--accent-text: #ffffff; --accent-text: #ffffff;
--tag-background: #0062c4; --tag-background: #0062c4;
--tag-text: #ffffff; --tag-text: #ffffff;
@ -43,4 +54,4 @@ body {
width: calc(100% - 48px); width: calc(100% - 48px);
height: 100%; height: 100%;
display: flex; display: flex;
} }

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

@ -1,21 +1,51 @@
/* Sidebar section selector */
#sidebar { #sidebar {
background-color: var(--panels-background); display: flex;
flex-direction: column;
width: 48px; width: 48px;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0;
left: 0;
background-color: var(--panels-background);
color: var(--panels-text); color: var(--panels-text);
transition: width 125ms ease-in-out 150ms;
} }
#sidebar > .side_icon { #sidebar:hover {
font-size: 24px; width: 200px;
padding: 12px;
} }
.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); color: var(--accent-color);
} }
.main_tablinks {
cursor: pointer;
}

31
public/index.html
View File

@ -15,19 +15,21 @@
</head> </head>
<body> <body>
<aside role="navigation" id="sidebar"> <aside id="sidebar" role="navigation">
<i class="material-icons side_icon">menu</i> <i class="material-icons side_icon">menu</i>
<i id="main_search_tablink" class="main_tablinks"></i> <span id="main_search_tablink" class="main_tablinks" role="link" aria-label="home"><i class=""></i></span>
<i role="link" aria-label="home" id="main_home_tablink" class="material-icons side_icon main_tablinks">home</i> <span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
<i role="link" aria-label="charts" id="main_charts_tablink" class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
class="material-icons side_icon main_tablinks">bubble_chart</i> <span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="home"><i
<i role="link" aria-label="favorites" id="main_favorites_tablink" class="material-icons side_icon">bubble_chart</i><span class="main_tablinks_text">Charts</span></span>
class="material-icons side_icon main_tablinks">album</i> <span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="home"><i
<i role="link" aria-label="link analyzer" id="main_analyzer_tablink" class="material-icons side_icon">album</i><span class="main_tablinks_text">Favorites</span></span>
class="material-icons side_icon main_tablinks">link</i> <span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="home"><i
<i role="link" aria-label="settings" id="main_settings_tablink" class="material-icons side_icon">link</i><span class="main_tablinks_text">Link Analyzer</span></span>
class="material-icons side_icon main_tablinks">settings</i> <span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="home"><i
<i role="link" aria-label="about" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</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> </aside>
<main id="main_content"> <main id="main_content">
<div id="middle_section"> <div id="middle_section">
@ -492,7 +494,8 @@ <h1>{{ title }}</h1>
<tbody> <tbody>
<tr v-for="release in showTable"> <tr v-for="release in showTable">
<td class="inline-flex clickable" @click="albumView" v-bind:data-id="release.id"> <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" <i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit"
style="color:#FF3B30;">explicit</i> style="color:#FF3B30;">explicit</i>
{{release.title}} {{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> <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 * @since 0.1.0
*/ */
function handleSidebarClick(event) { 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) { switch (targetID) {
case 'main_search_tablink': case 'main_search_tablink':
changeTab(event, 'main', 'search_tab') changeTab(sidebarEl, 'main', 'search_tab')
break break
case 'main_home_tablink': case 'main_home_tablink':
changeTab(event, 'main', 'home_tab') changeTab(sidebarEl, 'main', 'home_tab')
break break
case 'main_charts_tablink': case 'main_charts_tablink':
changeTab(event, 'main', 'charts_tab') changeTab(sidebarEl, 'main', 'charts_tab')
break break
case 'main_favorites_tablink': case 'main_favorites_tablink':
changeTab(event, 'main', 'favorites_tab') changeTab(sidebarEl, 'main', 'favorites_tab')
break break
case 'main_analyzer_tablink': case 'main_analyzer_tablink':
changeTab(event, 'main', 'analyzer_tab') changeTab(sidebarEl, 'main', 'analyzer_tab')
break break
case 'main_settings_tablink': case 'main_settings_tablink':
changeTab(event, 'main', 'settings_tab') changeTab(sidebarEl, 'main', 'settings_tab')
break break
case 'main_about_tablink': case 'main_about_tablink':
changeTab(event, 'main', 'about_tab') changeTab(sidebarEl, 'main', 'about_tab')
break break
default: default:
@ -89,19 +94,19 @@ function handleTabClick(event) {
switch (targetID) { switch (targetID) {
case 'search_all_tab': case 'search_all_tab':
changeTab(event, 'search', 'main_search') changeTab(event.target, 'search', 'main_search')
break break
case 'search_track_tab': case 'search_track_tab':
changeTab(event, 'search', 'track_search') changeTab(event.target, 'search', 'track_search')
break break
case 'search_album_tab': case 'search_album_tab':
changeTab(event, 'search', 'album_search') changeTab(event.target, 'search', 'album_search')
break break
case 'search_artist_tab': case 'search_artist_tab':
changeTab(event, 'search', 'artist_search') changeTab(event.target, 'search', 'artist_search')
break break
case 'search_playlist_tab': case 'search_playlist_tab':
changeTab(event, 'search', 'playlist_search') changeTab(event.target, 'search', 'playlist_search')
break break
default: default:
@ -117,7 +122,7 @@ function handleTabClick(event) {
// 5. lastSettings // 5. lastSettings
// 6. search_selected // 6. search_selected
// 7. MainSearch // 7. MainSearch
function changeTab(evt, section, tabName) { function changeTab(sidebarEl, section, tabName) {
windows_stack = [] windows_stack = []
currentStack = {} currentStack = {}
var i, tabcontent, tablinks var i, tabcontent, tablinks
@ -145,7 +150,7 @@ function changeTab(evt, section, tabName) {
// Not choosing .currentTarget beacuse the event // Not choosing .currentTarget beacuse the event
// is delegated // is delegated
evt.target.classList.add('active') sidebarEl.classList.add('active')
// Check if you need to load more content in the search tab // Check if you need to load more content in the search tab
if ( if (