Jerry/cyp
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

shadows

Browse source
This commit is contained in:
Ondrej Zara 2019-04-01 11:18:28 +02:00
parent 127a450791
commit 5dccd9d849
11 changed files with 90 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
app/app.css
View file

@ -12,7 +12,7 @@ body {
line-height: 1.25;
background-color: var(--bg);
color: var(--fg);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
text-shadow: var(--shadow);
max-width: 800px;
margin: 0 auto;
overflow: hidden;
@ -41,7 +41,7 @@ button {
cursor: pointer;
flex-shrink: 0;
}
.art img {
button .icon {
vertical-align: top;
}
.long-line {
@ -70,7 +70,6 @@ button {
font-weight: normal;
}
.icon {
vertical-align: middle;
width: 24px;
}
.icon path:not([fill]),
@ -157,6 +156,9 @@ nav ul li.active {
display: flex;
flex-direction: column;
}
.component header {
display: flex;
}
.component ul {
flex-grow: 1;
overflow: auto;
@ -176,6 +178,7 @@ nav ul li.active {
.component li .info .icon {
color: var(--primary);
margin-right: var(--icon-spacing);
filter: drop-shadow(var(--shadow));
}
.component li .info h2 {
font-size: var(--font-size-large);
@ -201,6 +204,9 @@ nav ul li.active {
display: flex;
flex-direction: column;
}
#queue header {
display: flex;
}
#queue ul {
flex-grow: 1;
overflow: auto;
@ -220,6 +226,7 @@ nav ul li.active {
#queue li .info .icon {
color: var(--primary);
margin-right: var(--icon-spacing);
filter: drop-shadow(var(--shadow));
}
#queue li .info h2 {
font-size: var(--font-size-large);
@ -248,6 +255,9 @@ nav ul li.active {
display: flex;
flex-direction: column;
}
#library header {
display: flex;
}
#library ul {
flex-grow: 1;
overflow: auto;
@ -267,6 +277,7 @@ nav ul li.active {
#library li .info .icon {
color: var(--primary);
margin-right: var(--icon-spacing);
filter: drop-shadow(var(--shadow));
}
#library li .info h2 {
font-size: var(--font-size-large);
@ -290,7 +301,9 @@ nav ul li.active {
#library .art img,
#library .art .icon {
width: 64px;
margin-right: var(--icon-spacing);
}
#library .art .icon {
filter: drop-shadow(var(--shadow));
}
#library .group {
cursor: pointer;
@ -318,6 +331,9 @@ nav ul li.active {
display: flex;
flex-direction: column;
}
#fs header {
display: flex;
}
#fs ul {
flex-grow: 1;
overflow: auto;
@ -337,6 +353,7 @@ nav ul li.active {
#fs li .info .icon {
color: var(--primary);
margin-right: var(--icon-spacing);
filter: drop-shadow(var(--shadow));
}
#fs li .info h2 {
font-size: var(--font-size-large);
@ -373,6 +390,9 @@ nav ul li.active {
display: flex;
flex-direction: column;
}
#playlists header {
display: flex;
}
#playlists ul {
flex-grow: 1;
overflow: auto;
@ -392,6 +412,7 @@ nav ul li.active {
#playlists li .info .icon {
color: var(--primary);
margin-right: var(--icon-spacing);
filter: drop-shadow(var(--shadow));
}
#playlists li .info h2 {
font-size: var(--font-size-large);
@ -427,6 +448,9 @@ nav ul li.active {
align-items: center;
justify-content: center;
}
#yt header {
display: flex;
}
#yt ul {
flex-grow: 1;
overflow: auto;
@ -446,6 +470,7 @@ nav ul li.active {
#yt li .info .icon {
color: var(--primary);
margin-right: var(--icon-spacing);
filter: drop-shadow(var(--shadow));
}
#yt li .info h2 {
font-size: var(--font-size-large);
@ -497,25 +522,44 @@ nav ul li.active {
transform: rotate(360deg);
}
}
.search {
display: flex;
align-items: center;
max-width: 50%;
margin-left: auto;
transition: all 300ms;
}
.search .icon {
width: 32px;
cursor: pointer;
}
.search input {
border: none;
color: inherit;
background-color: inherit;
border-bottom: 1px solid var(--fg);
transition: all 300ms;
padding: 0;
width: 30%;
}
.search:not(.open) input {
xtransition: all 300ms;
width: 0;
padding: 0;
}
.search.open {
flex-grow: 1;
}
.search.open input {
flex-grow: 1;
}
.art {
margin-right: var(--icon-spacing);
}
.art .icon,
.art img {
vertical-align: top;
}
:root {
--primary: dodgerblue;
--fg: #fff;
--bg: #333;
--shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
--font-size-large: 112.5%;
--icon-spacing: 4px;
}

7
app/css/app.less
View file

@ -10,7 +10,7 @@ body {
line-height: 1.25;
background-color: var(--bg);
color: var(--fg);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
text-shadow: var(--shadow);
max-width: 800px;
margin: 0 auto;
overflow: hidden;
@ -39,10 +39,8 @@ button {
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.art img {
vertical-align: top;
.icon { vertical-align: top; }
}
.long-line {
@ -71,4 +69,5 @@ button {
@import "playlists.less";
@import "yt.less";
@import "search.less";
@import "art.less";
@import "variables.less";

7
app/css/art.less Normal file
View file

@ -0,0 +1,7 @@
.art {
margin-right: var(--icon-spacing);
.icon, img {
vertical-align: top;
}
}

5
app/css/component.less
View file

@ -3,6 +3,10 @@
display: flex;
flex-direction: column;
header {
display: flex;
}
ul {
flex-grow: 1;
overflow: auto;
@ -23,6 +27,7 @@
.icon {
color: var(--primary);
margin-right: var(--icon-spacing);
filter: drop-shadow(var(--shadow));
}
h2 {

1
app/css/icons.less
View file

@ -1,5 +1,4 @@
.icon {
vertical-align: middle;
width: 24px;
path, polygon, circle {

5
app/css/library.less
View file

@ -3,7 +3,10 @@
.art img, .art .icon {
width: 64px;
margin-right: var(--icon-spacing);
}
.art .icon {
filter: drop-shadow(var(--shadow));
}
.group {

16
app/css/search.less
View file

@ -1,6 +1,13 @@
.search {
display: flex;
align-items: center;
max-width: 50%;
margin-left: auto;
transition: all 300ms;
.icon {
width: 32px;
cursor: pointer;
}
input {
@ -8,14 +15,15 @@
color: inherit;
background-color: inherit;
border-bottom: 1px solid var(--fg);
transition: all 300ms;
xtransition: all 300ms;
width: 0;
padding: 0;
width: 30%;
}
&:not(.open) {
&.open {
flex-grow: 1;
input {
width: 0;
flex-grow: 1;
}
}
}

1
app/css/variables.less
View file

@ -2,6 +2,7 @@
--primary: dodgerblue;
--fg: #fff;
--bg: #333;
--shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
--font-size-large: 112.5%;
--icon-spacing: 4px;

4
app/js/fs.js
View file

@ -13,8 +13,6 @@ function buildHeader(path) {
let header = node.querySelector("header");
html.clear(header);
header.appendChild(search.getNode());
let button = html.button({}, "/", header);
button.addEventListener("click", e => list(""));
@ -23,6 +21,8 @@ function buildHeader(path) {
let path = all.slice(0, index+1).join("/");
button.addEventListener("click", e => list(path));
});
header.appendChild(search.getNode());
}
function buildDirectory(data, parent) {

2
app/js/lib/mpd.js
View file

@ -39,7 +39,7 @@ function serializeFilter(filter) {
let tokens = ["("];
Object.entries(filter).forEach(([key, value], index) => {
index && tokens.push(" AND ");
tokens.push(`(${key} == "${value}")`);
tokens.push(`(${key} == "${escape(value)}")`);
});
tokens.push(")");

4
app/js/library.js
View file

@ -13,8 +13,6 @@ function buildHeader(filter) {
let header = node.querySelector("header");
html.clear(header);
header.appendChild(search.getNode());
let button = html.button({}, "Music Library", header);
button.addEventListener("click", e => listArtists());
@ -31,6 +29,8 @@ function buildHeader(filter) {
button.addEventListener("click", e => listSongs(albumFilter));
}
}
header.appendChild(search.getNode());
}
function buildAlbum(album, filter, parent) {