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

improved sidebar smoothness and status feddback

Browse Source
This commit is contained in:
Roberto Tonino 2020-06-19 20:57:05 +02:00
parent 5314f7c07e
commit 973dc630c5
11 changed files with 145 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -21,6 +21,7 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
- Copy and paste functions
- Block selection where it's not needed (keep only titles artists albums labels and useful data)
- There's a SASS mixin for this. Need to use it in the proper classes
- Better feedback for socket.io possible errors
- ?
# License

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

12
public/index.html
View File

@ -58,7 +58,7 @@
</span>
<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info">
<i class="material-icons side_icon">info</i>
<span class="main_tablinks_text">Info</span>
<span class="main_tablinks_text">About</span>
</span>
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
<i class="material-icons side_icon side_icon--theme">palette</i>
@ -1202,7 +1202,7 @@ <h3 class="settings-group__header settings-group__header--with-icon">
</div>
<div id="about_tab" class="main_tabcontent">
<h1>About</h1>
<h2 class="page_heading">About</h2>
<p>
This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this
library to make your own UI for deemix.</br>
@ -1229,7 +1229,7 @@ <h1>Bug Reports</h1>
<p>
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 actually 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.
</p>
@ -1252,14 +1252,16 @@ <h3>You want to contribute to this project? You can do that <b>in different ways
<p>If you know JavaScript, HTML or CSS you could contribute to the <a
href="https://notabug.org/RemixDev/deemix-webui" target="_blank">webui</a>.</p>
<p>
If you find some bugs you can report them in the repo, just make sure your bug isn't something that only
If you find some bugs you can report them in the repo, just make sure your bug isn't something that
only
affects you and it can be reproducible by other users as well.<br>
Duplicate bug reports will be closed, so keep an eye out on that.</p>
<hr>
<h3>You want to contribute monetarily? You could make a donation!</h3>
<p>
If you can donate you can do that with this links.<br>
You shoud remember that <b>this is a free project</b> and <b>you should support the artists you love</b>
You shoud remember that <b>this is a free project</b> and <b>you should support the artists you
love</b>
before supporting the developers.<br>
Don't feel obligated to donate, I appreciate you anyway!</p>
<p>

90
src/styles/scss/_sidebar.scss
View File

@ -1,14 +1,17 @@
$sidebar-timing: 125ms;
$sidebar-delay: 75ms;
#sidebar {
display: flex;
flex-direction: column;
width: 48px;
width: $sidebar-width;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--panels-background);
color: var(--panels-text);
transition: width 125ms ease-in-out 75ms;
transition: width $sidebar-timing ease-in-out $sidebar-delay;
z-index: 999;
&:hover {
@ -16,77 +19,99 @@
}
.main_tablinks {
&.active .side_icon {
color: var(--accent-color);
transition: all 500ms;
&.active {
background-color: var(--accent-color);
}
&:not(#theme_selector) {
display: flex;
align-items: center;
margin-top: 5px;
height: 55px;
cursor: pointer;
&:hover {
background-color: #3e3e3e;
background-color: var(--sidebar-link-bg);
.side_icon {
color: var(--accent-color);
}
}
}
}
.main_tablinks_text {
display: none;
display: inline-block;
margin-left: 20px;
opacity: 0;
visibility: hidden;
overflow: hidden;
white-space: nowrap;
transition: all 50ms ease-in-out 200ms;
}
.side_icon {
font-size: 30px;
padding: 9px;
transition: all 500ms;
&.side_icon--theme {
&--theme {
cursor: default;
}
&::selection {
background: none;
}
@include removeSelectionBackground;
}
&:hover {
#theme_togglers {
position: relative;
opacity: 1;
transition-delay: 200ms;
.main_tablinks {
&:hover {
background: var(--sidebar-link-bg-20);
filter: grayscale(0) opacity(1);
}
&.active {
background: var(--sidebar-link-bg);
filter: grayscale(1);
// Fix for purple theme in which grayscale shows incoherent color
html[data-theme='purple'] & {
background: var(--sidebar-link-bg);
filter: grayscale(0);
}
&:hover {
background: var(--sidebar-link-bg-20);
filter: grayscale(0);
}
}
}
.main_tablinks_text {
display: inline-block;
opacity: 1;
visibility: visible;
}
#theme_togglers {
opacity: 1;
}
}
}
/* Theme selector */
#theme_selector {
/* Theme selector */
#theme_selector {
margin-top: 20px;
display: flex;
height: 50px;
}
}
#theme_togglers {
#theme_togglers {
position: relative;
display: flex;
opacity: 0;
width: 100%;
justify-content: space-evenly;
align-items: center;
transition: all 50ms ease 0s;
}
width: 100%;
opacity: 0;
transition: all $sidebar-timing ease-in-out $sidebar-delay;
}
.theme_toggler {
.theme_toggler {
width: 25px;
height: 25px;
border-radius: 1000px;
@ -103,10 +128,11 @@
}
&[data-theme-variant='dark'] {
background: #141414;
background: hsl(0, 0%, 8%);
}
&[data-theme-variant='purple'] {
background: #460ead;
background: hsl(261, 85%, 37%);
}
}
}

11
src/styles/scss/base/_animations.scss
View File

@ -49,3 +49,14 @@
transform: rotate(360deg);
}
}
// You can find a better name, I have no ideas
@keyframes grayscalize {
from {
filter: grayscale(0);
}
to {
filter: grayscale(1);
}
}

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

@ -3,7 +3,6 @@ html {
--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);
@ -19,10 +18,14 @@ html[data-theme='light'] {
--secondary-background: hsl(0, 0%, 93%);
--foreground: hsl(0, 0%, 20%);
--foreground-inverted: hsl(0, 0%, 93%);
--accent-color: hsl(210, 100%, 52%);
--panels-background: hsl(210, 3%, 14%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 0%);
--sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--table-bg: hsl(0, 0%, 100%);
--table-zebra: hsl(0, 0%, 79%);
--table-highlight: hsl(0, 0%, 56%);
@ -33,10 +36,14 @@ html[data-theme='dark'] {
--secondary-background: hsl(0, 0%, 14%);
--foreground: hsl(0, 0%, 93%);
--foreground-inverted: hsl(0, 0%, 20%);
--accent-color: hsl(210, 100%, 52%);
--panels-background: hsl(0, 0%, 10%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%);
--sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--table-bg: hsl(0, 0%, 8%);
--table-zebra: hsl(0, 0%, 14%);
--table-highlight: hsl(0, 0%, 20%);
@ -52,6 +59,9 @@ html[data-theme='purple'] {
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%);
--sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
--table-bg: hsl(261, 74%, 6%);
--table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%);

1
src/styles/scss/base/_variables.scss Normal file
View File

@ -0,0 +1 @@
$sidebar-width: 48px;

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

@ -84,21 +84,21 @@ button {
text-transform: uppercase;
cursor: pointer;
transition: transform 50ms ease-in-out, background-color 200ms ease;
}
button:active {
&:active {
background-color: var(--accent-color);
transform: scale(0.95);
}
}
button:hover {
&:hover {
background: none;
border: 1px solid var(--accent-color);
}
}
#main_content {
margin-left: 48px;
width: calc(100% - 48px);
margin-left: $sidebar-width;
width: calc(100% - $sidebar-width);
height: 100%;
display: flex;
}

3
src/styles/scss/style.scss
View File

@ -1,3 +1,6 @@
// SASS only
@import './base/variables';
@import './base/base';
@import './base/normalize';
@import './base/mixins';

14
src/styles/scss/tabs/_about-tab.scss
View File

@ -1,9 +1,13 @@
#about_tab p {
#about_tab {
p {
margin-bottom: 8px;
}
#about_tab h3 {
}
h3 {
margin: 8px 0px;
}
#about_tab hr {
}
hr {
margin: 12px 0px;
}
}

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

@ -28,11 +28,6 @@
margin-bottom: 10px;
}
.main_tablinks_text {
overflow: hidden;
white-space: nowrap;
}
.section-tabs {
list-style-type: none;
display: flex;
@ -42,7 +37,7 @@
&__tab {
flex: 1;
font-size: 1.2rem;
padding: .8em;
padding: 0.8em;
border-top: 3px solid var(--foreground);
text-align: center;