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

design

Browse source
This commit is contained in:
Ondrej Zara 2019-03-26 12:35:47 +01:00
parent d8644edd7e
commit 3a75581863
16 changed files with 177 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
app/app.css
View file

@ -1,4 +1,11 @@
html {
background-color: #fff;
font-family: lato, sans-serif;
}
body {
background-color: #888;
color: #fff;
text-shadow: 0 1px 1px #000;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
@ -10,6 +17,18 @@ body > header,
body > footer {
box-shadow: 0 0 3px #000;
}
@font-face {
font-family: 'Lato';
src: url('font/LatoLatin-Regular.woff2') format('woff2');
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'Lato';
src: url('font/LatoLatin-bold.woff2') format('woff2');
font-style: bold;
font-weight: normal;
}
main {
flex-grow: 1;
overflow: hidden;
@ -23,7 +42,7 @@ nav ul {
}
nav ul li {
text-align: center;
flex-grow: 1;
flex: 1 0 0;
line-height: 40px;
}
nav ul li:hover {
@ -57,6 +76,27 @@ nav ul li.active {
display: flex;
flex-direction: column;
}
.component ul {
flex-grow: 1;
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
}
.component .grid li {
display: flex;
flex-direction: row;
}
.component .grid li h2 {
flex-grow: 1;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.component .grid li:nth-child(odd) {
background-color: #666;
}
#queue {
height: 100%;
display: flex;
@ -69,6 +109,20 @@ nav ul li.active {
margin: 0;
padding: 0;
}
#queue .grid li {
display: flex;
flex-direction: row;
}
#queue .grid li h2 {
flex-grow: 1;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#queue .grid li:nth-child(odd) {
background-color: #666;
}
#queue li {
display: flex;
flex-direction: row;
@ -76,9 +130,6 @@ nav ul li.active {
#queue li + li {
border-top: 1px solid #888;
}
#queue .info {
flex-grow: 1;
}
#queue .current {
font-weight: bold;
}
@ -94,3 +145,43 @@ nav ul li.active {
margin: 0;
padding: 0;
}
#library .grid li {
display: flex;
flex-direction: row;
}
#library .grid li h2 {
flex-grow: 1;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#library .grid li:nth-child(odd) {
background-color: #666;
}
#fs {
height: 100%;
display: flex;
flex-direction: column;
}
#fs ul {
flex-grow: 1;
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
}
#fs .grid li {
display: flex;
flex-direction: row;
}
#fs .grid li h2 {
flex-grow: 1;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#fs .grid li:nth-child(odd) {
background-color: #666;
}

10
app/css/app.less
View file

@ -1,4 +1,12 @@
html {
background-color: #fff;
font-family: lato, sans-serif;
}
body {
background-color: #888;
color: #fff;
text-shadow: 0 1px 1px #000;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
@ -12,9 +20,11 @@ body {
}
@import "font.less";
@import "main.less";
@import "nav.less";
@import "player.less";
@import "component.less";
@import "queue.less";
@import "library.less";
@import "fs.less";

29
app/css/component.less
View file

@ -2,4 +2,31 @@
height: 100%;
display: flex;
flex-direction: column;
}
ul {
flex-grow: 1;
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
}
.grid {
li {
display: flex;
flex-direction: row;
h2 {
flex-grow: 1;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
li:nth-child(odd) {
background-color: #666;
}
}
}

13
app/css/font.less Normal file
View file

@ -0,0 +1,13 @@
@font-face {
font-family: 'Lato';
src: url('font/LatoLatin-Regular.woff2') format('woff2');
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'Lato';
src: url('font/LatoLatin-bold.woff2') format('woff2');
font-style: bold;
font-weight: normal;
}

3
app/css/fs.less Normal file
View file

@ -0,0 +1,3 @@
#fs {
.component;
}

11
app/css/library.less
View file

@ -1,14 +1,3 @@
#library {
.component;
ul {
flex-grow: 1;
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
}
li {
}
}

2
app/css/nav.less
View file

@ -7,7 +7,7 @@ nav ul {
li {
text-align: center;
flex-grow: 1;
flex: 1 0 0;
line-height: 40px;
&:hover { background-color:red;}

9
app/css/queue.less
View file

@ -1,14 +1,6 @@
#queue {
.component;
ul {
flex-grow: 1;
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: flex;
flex-direction: row;
@ -18,6 +10,5 @@
}
}
.info { flex-grow: 1; }
.current { font-weight: bold; }
}

BIN
app/font/LatoLatin-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
app/font/LatoLatin-Regular.woff2 Normal file
View file

Binary file not shown.

9
app/index.html
View file

@ -26,7 +26,7 @@
<main>
<section id="queue">
<header></header>
<ul></ul>
<ul class="grid"></ul>
</section>
<section id="playlists"></section>
<section id="library">
@ -35,14 +35,17 @@
</section>
<section id="fs">
<header></header>
<ul></ul>
<ul class="grid"></ul>
</section>
<section id="misc"></section>
</main>
<footer>
<nav>
<ul>
<li data-for="queue">Q</li>
<li data-for="queue">
Q
<span id="queue-length"></span>
</li>
<li data-for="playlists">Playlists</li>
<li data-for="library">Library</li>
<li data-for="fs">FS</li>

3
app/js/app.js
View file

@ -22,13 +22,14 @@ export function activate(what) {
}
async function init() {
await mpd.init();
nav.init(document.querySelector("nav"));
for (let id in components) {
let node = document.querySelector(`#${id}`);
components[id].init(node);
}
await mpd.init();
player.init(document.querySelector("#player"));
activate("fs");

25
app/js/fs.js
View file

@ -8,26 +8,17 @@ import * as ui from "./lib/ui.js";
let node;
function buildHeader(path) {
filter = filter || {};
let header = node.querySelector("header");
html.clear(header);
let button = html.button({}, "Music Library", header);
button.addEventListener("click", e => listArtists());
let button = html.button({}, "/", header);
button.addEventListener("click", e => list(""));
let artist = filter["Artist"];
if (artist) {
let artistFilter = {"Artist":artist};
let button = html.button({}, artist, header);
button.addEventListener("click", e => listAlbums(artistFilter));
let album = filter["Album"];
if (album) {
let albumFilter = Object.assign({}, artistFilter, {"Album":album});
let button = html.button({}, album, header);
button.addEventListener("click", e => listSongs(albumFilter));
}
}
path.split("/").filter(x => x).forEach((name, index, all) => {
let button = html.button({}, name, header);
let path = all.slice(0, index+1).join("/");
button.addEventListener("click", e => list(path));
});
}
function buildDirectory(data, parent) {
@ -53,7 +44,7 @@ function buildResults(results) {
async function list(path) {
let results = await mpd.listPath(path);
buildResults(results);
// buildHeader(path);
buildHeader(path);
}
export async function activate() {

7
app/js/lib/ui.js
View file

@ -100,11 +100,10 @@ export function song(type, data, parent) {
}
export function group(type, label, urlOrFilter, parent) {
let node = html.node("li", {}, label, parent);
let node = html.node("li", {}, "", parent);
if (type == GROUP_DIRECTORY) {
node.insertBefore(html.text("📁 "), node.firstChild);
}
if (type == GROUP_DIRECTORY) { label = `📁 ${label}`; }
html.node("h2", {}, label, node);
addAndPlayButton(urlOrFilter, node);
addButton(urlOrFilter, node);

6
app/js/library.js
View file

@ -44,6 +44,8 @@ function buildArtist(artist, filter, parent) {
function buildSongs(songs, filter) {
let ul = node.querySelector("ul");
html.clear(ul);
ul.classList.remove("tiles");
ul.classList.add("grid");
songs.map(song => ui.song(ui.SONG_LIBRARY, song, ul));
}
@ -51,6 +53,8 @@ function buildSongs(songs, filter) {
function buildAlbums(albums, filter) {
let ul = node.querySelector("ul");
html.clear(ul);
ul.classList.add("tiles");
ul.classList.remove("grid");
albums.map(album => buildAlbum(album, filter, ul));
}
@ -58,6 +62,8 @@ function buildAlbums(albums, filter) {
function buildArtists(artists, filter) {
let ul = node.querySelector("ul");
html.clear(ul);
ul.classList.add("tiles");
ul.classList.remove("grid");
artists.map(artist => buildArtist(artist, filter, ul));
}

3
app/js/queue.js
View file

@ -34,7 +34,7 @@ function onQueueChange(message, publisher, data) {
async function syncQueue() {
let songs = await mpd.listQueue();
buildSongs(songs);
// FIXME updateCount(songs.length)
document.querySelector("#queue-length").textContent = `(${songs.length})`;
}
export async function activate() {
@ -43,6 +43,7 @@ export async function activate() {
export function init(n) {
node = n;
syncQueue();
pubsub.subscribe("song-change", onSongChange);
pubsub.subscribe("queue-change", onQueueChange);
}