improved sidebar smoothness and status feddback

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

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 - Copy and paste functions
- Block selection where it's not needed (keep only titles artists albums labels and useful data) - 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 - There's a SASS mixin for this. Need to use it in the proper classes
- Better feedback for socket.io possible errors
- ? - ?
# License # License

File diff suppressed because one or more lines are too long

View File

@ -58,7 +58,7 @@
</span> </span>
<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info"> <span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info">
<i class="material-icons side_icon">info</i> <i class="material-icons side_icon">info</i>
<span class="main_tablinks_text">Info</span> <span class="main_tablinks_text">About</span>
</span> </span>
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector"> <span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
<i class="material-icons side_icon side_icon--theme">palette</i> <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>
<div id="about_tab" class="main_tabcontent"> <div id="about_tab" class="main_tabcontent">
<h1>About</h1> <h2 class="page_heading">About</h2>
<p> <p>
This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this 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> library to make your own UI for deemix.</br>
@ -1229,7 +1229,7 @@ <h1>Bug Reports</h1>
<p> <p>
Before reporting a bug make sure you're running the latest version of the app and that the thing you Before reporting a bug make sure you're running the latest version of the app and that the thing you
want 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 Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been
already reported. already reported.
</p> </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 <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> href="https://notabug.org/RemixDev/deemix-webui" target="_blank">webui</a>.</p>
<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> 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> Duplicate bug reports will be closed, so keep an eye out on that.</p>
<hr> <hr>
<h3>You want to contribute monetarily? You could make a donation!</h3> <h3>You want to contribute monetarily? You could make a donation!</h3>
<p> <p>
If you can donate you can do that with this links.<br> 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> before supporting the developers.<br>
Don't feel obligated to donate, I appreciate you anyway!</p> Don't feel obligated to donate, I appreciate you anyway!</p>
<p> <p>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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