improved sidebar smoothness and status feddback
This commit is contained in:
Roberto Tonino
parent
5314f7c07e
commit
973dc630c5
@ -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
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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,61 +19,82 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
@ -78,12 +102,13 @@
|
||||
}
|
||||
|
||||
#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 {
|
||||
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
1
src/styles/scss/base/_variables.scss
Normal file
@ -0,0 +1 @@
|
||||
$sidebar-width: 48px;
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
// SASS only
|
||||
@import './base/variables';
|
||||
|
||||
@import './base/base';
|
||||
@import './base/normalize';
|
||||
@import './base/mixins';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user