blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better style for the sidebar/nav

Browse source
This commit is contained in:
Fabio Manganiello 2023-03-19 22:23:37 +01:00
parent 12096f2dbe
commit 71a3481560
Signed by: blacklight
GPG key ID: D90FBA7F76362774
8 changed files with 35 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
platypush/backend/http/webapp/dist/index.html vendored
View file

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="/fonts/poppins.css"><title>platypush</title><script defer="defer" type="module" src="/static/js/chunk-vendors.95bedba1.js"></script><script defer="defer" type="module" src="/static/js/app.da4780e5.js"></script><link href="/static/css/chunk-vendors.0fcd36f0.css" rel="stylesheet"><link href="/static/css/app.d7cb662c.css" rel="stylesheet"><script defer="defer" src="/static/js/chunk-vendors-legacy.79dede0c.js" nomodule></script><script defer="defer" src="/static/js/app-legacy.c91c6b3d.js" nomodule></script></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="/fonts/poppins.css"><title>platypush</title><script defer="defer" type="module" src="/static/js/chunk-vendors.95bedba1.js"></script><script defer="defer" type="module" src="/static/js/app.027226cc.js"></script><link href="/static/css/chunk-vendors.0fcd36f0.css" rel="stylesheet"><link href="/static/css/app.aa0132dc.css" rel="stylesheet"><script defer="defer" src="/static/js/chunk-vendors-legacy.79dede0c.js" nomodule></script><script defer="defer" src="/static/js/app-legacy.a7f221b9.js" nomodule></script></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

2
platypush/backend/http/webapp/dist/static/css/app.d7cb662c.css → platypush/backend/http/webapp/dist/static/css/app.aa0132dc.css vendored
View file

File diff suppressed because one or more lines are too long

4
platypush/backend/http/webapp/dist/static/js/app-legacy.c91c6b3d.js → platypush/backend/http/webapp/dist/static/js/app-legacy.a7f221b9.js vendored
View file

File diff suppressed because one or more lines are too long

2
platypush/backend/http/webapp/dist/static/js/app-legacy.c91c6b3d.js.map → platypush/backend/http/webapp/dist/static/js/app-legacy.a7f221b9.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
platypush/backend/http/webapp/dist/static/js/app.da4780e5.js → platypush/backend/http/webapp/dist/static/js/app.027226cc.js vendored
View file

File diff suppressed because one or more lines are too long

2
platypush/backend/http/webapp/dist/static/js/app.da4780e5.js.map → platypush/backend/http/webapp/dist/static/js/app.027226cc.js.map vendored
View file

File diff suppressed because one or more lines are too long

26
platypush/backend/http/webapp/src/components/Nav.vue
View file

@ -107,7 +107,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$toggler-height: 2em; $toggler-height: 2em;
$footer-collapsed-height: 4em; $footer-collapsed-height: 4em;
$footer-expanded-height: 7.5em; $footer-expanded-height: 7.1em;
nav { nav {
@media screen and (max-width: #{$tablet - 1px}) { @media screen and (max-width: #{$tablet - 1px}) {
@ -148,10 +148,9 @@ nav {
} }
li { li {
border: $nav-entry-border; border-bottom: $nav-entry-border;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
letter-spacing: 0.04em;
a { a {
display: block; display: block;
@ -162,13 +161,14 @@ nav {
} }
} }
&:hover {
background: $nav-entry-hover-bg;
}
&.selected { &.selected {
background: $nav-entry-selected-bg; background: $nav-entry-selected-bg;
border: $nav-entry-selected-border; border: 1px solid rgba(0, 0, 0, 0);
}
&:hover {
background: $nav-entry-hover-bg;
border: 1px solid rgba(0, 0, 0, 0);
} }
.name { .name {
@ -183,8 +183,8 @@ nav {
.toggler { .toggler {
width: 100%; width: 100%;
height: $toggler-height; height: $toggler-height;
display: flex;
background: $nav-toggler-bg; background: $nav-toggler-bg;
display: flex;
font-size: 1.5em; font-size: 1.5em;
cursor: pointer; cursor: pointer;
padding: 0.4em; padding: 0.4em;
@ -208,15 +208,20 @@ nav {
} }
.plugins { .plugins {
height: calc(100% - #{$toggler-height} - #{$footer-expanded-height} - 1.4em); height: calc(100% - #{$toggler-height} - #{$footer-expanded-height} - 1em);
overflow: auto; overflow: auto;
} }
.footer { .footer {
height: $footer-expanded-height; height: $footer-expanded-height;
background: $nav-footer-bg; background: $nav-footer-bg;
box-shadow: $nav-footer-shadow;
padding: 0; padding: 0;
margin: 0; margin: 0;
li:last-child {
border: 0;
}
} }
ul { ul {
@ -278,6 +283,7 @@ nav {
background: none; background: none;
padding: 0; padding: 0;
margin-bottom: .5em; margin-bottom: .5em;
box-shadow: none;
} }
@media screen and (max-width: #{$tablet - 1px}) { @media screen and (max-width: #{$tablet - 1px}) {

21
platypush/backend/http/webapp/src/style/themes/light.scss
View file

@ -87,23 +87,24 @@ $active-bg: #8fefb7 !default;
$disabled-fg: rgb(155, 155, 155); $disabled-fg: rgb(155, 155, 155);
/// Navigator /// Navigator
$nav-bg: white !default; $nav-bg: #4c4c4c !default;
$nav-fg: #5a5e5b !default; $nav-fg: white !default;
$nav-toggler-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default; $nav-toggler-bg: rgba(0, 0, 0, 0.25) !default;
$nav-toggler-collapsed-bg: $nav-bg !default; $nav-toggler-collapsed-bg: none !default;
$nav-toggler-collapsed-mobile-bg: #3c3c3c !default; $nav-toggler-collapsed-mobile-bg: #3c3c3c !default;
$nav-toggler-collapsed-mobile-fg: white !default; $nav-toggler-collapsed-mobile-fg: white !default;
$nav-toggler-shadow: 0 0 1px 2px #c9cdca !default; $nav-toggler-shadow: 1px 1px 1.5px 1px rgba(0,0,0,0.5) !default;
$nav-footer-bg: rgb(240, 240, 240) !default; $nav-footer-shadow: 1px -1px 1.5px 1px rgba(0,0,0,0.5) !default;
$nav-entry-selected-bg: $selected-bg !default; $nav-footer-bg: rgba(0, 0, 0, 0.25) !default;
$nav-entry-selected-bg: rgba(80,120,110,0.8) !default;
$nav-entry-selected-border: 1px solid #b1ebba !default; $nav-entry-selected-border: 1px solid #b1ebba !default;
$nav-entry-hover-bg: $hover-bg !default; $nav-entry-hover-bg: #5a8c78 !default;
$nav-entry-collapsed-selected-bg: rgba(160, 245, 178, 0.95) !default; $nav-entry-collapsed-selected-bg: rgba(160, 245, 178, 0.95) !default;
$nav-entry-collapsed-hover-bg: rgba(160, 245, 178, 0.60) !default; $nav-entry-collapsed-hover-bg: rgba(160, 245, 178, 0.60) !default;
$nav-box-shadow-main: 1px 0 2px #aaa; $nav-box-shadow-main: 1px 1px 1.5px 1px rgba(0,0,0,0.5) !default;
$nav-box-shadow-entry: 0 0 1px 1px #c9cdca !default; $nav-box-shadow-entry: 0 0 1px 1px #c9cdca !default;
$nav-box-shadow-collapsed: 1px 0 2px 1px #bbb !default; $nav-box-shadow-collapsed: 1px 0 2px 1px #bbb !default;
$nav-entry-border: 1px solid $border-color-3 !default; $nav-entry-border: 1px solid rgba(255,255,255,0.15) !default;
$nav-collapsed-bg: white; $nav-collapsed-bg: white;
$nav-collapsed-fg: #5e5e5e; $nav-collapsed-fg: #5e5e5e;