From 87a7c5680a36264ab788774ce4cba8e19f3b7dfd Mon Sep 17 00:00:00 2001 From: Ondrej Zara Date: Tue, 16 Apr 2019 08:40:16 +0200 Subject: [PATCH] styling, readme --- README.md | 36 ++++++++++++++++++++++++++++++++++++ app/app.css | 34 +++++++++++++++++++++++----------- app/css/app.less | 1 - app/css/component.less | 3 ++- app/css/icons.less | 1 + app/css/nav.less | 2 +- app/css/player.less | 2 +- app/css/settings.less | 4 ++-- app/css/variables.less | 7 +++++++ 9 files changed, 73 insertions(+), 17 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..46abf01 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +# CYP: Control Your Player + +CYP is a web-based frontend for [MPD](https://www.musicpd.org/), the Music Player Daemon. You can use it to control the playback without having to install native application(s). It works in modern web browsers, both desktop and mobile. + +## Features + - Control the playback, queue, volume + - Save and load playlists + - Browse the library by artists/albums/directories + - Display album art via native MPD calls (no need to access the library; requires MPD >= 0.21) + - [Youtube-dl](https://ytdl-org.github.io/youtube-dl/index.html) intergration + +## Installation + +Make sure you have a working MPD setup first. + +```sh +git clone https://github.com/ondras/cyp.git && cd cyp +npm i +node . +``` + +Point your browser to http://localhost:8080 to open the interface. + +## Technology + - Connected to MPD via WebSockets (using the [ws2mpd](https://github.com/ondras/ws2mpd/) bridge) + - Modern ES6+ (modules, async/await) + - Responsive layout via Flexbox + - SVG icons (Material Design) + - Dark/Light theme available + - Album art downloaded directly from MPD (and cached via localStorage) + + +## TODO + + - [ ] Bundling + - [ ] Range styling diff --git a/app/app.css b/app/app.css index aaedb16..d1db4f9 100644 --- a/app/app.css +++ b/app/app.css @@ -44,7 +44,6 @@ button { border: none; line-height: 1; cursor: pointer; - flex-shrink: 0; } select { background-color: transparent; @@ -66,6 +65,7 @@ select { } .icon { width: 24px; + flex-shrink: 0; } .icon path:not([fill]), .icon polygon:not([fill]), @@ -116,7 +116,7 @@ nav ul li { border-top: 4px solid transparent; } nav ul li .icon { - margin-right: 4px; + margin-right: var(--icon-spacing); } nav ul li.active { border-top-color: var(--primary); @@ -167,7 +167,7 @@ nav ul li.active { #player .info { flex-grow: 2; flex-basis: 0; - padding-left: var(--icon-spacing); + padding: 0 var(--icon-spacing); overflow: hidden; display: flex; flex-direction: column; @@ -251,11 +251,12 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 8px; + padding: var(--spacing); } .component header button { font-size: var(--font-size-large); font-weight: bold; + overflow: hidden; } .component header button .icon { margin-right: var(--icon-spacing); @@ -309,11 +310,12 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 8px; + padding: var(--spacing); } #queue header button { font-size: var(--font-size-large); font-weight: bold; + overflow: hidden; } #queue header button .icon { margin-right: var(--icon-spacing); @@ -370,11 +372,12 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 8px; + padding: var(--spacing); } #library header button { font-size: var(--font-size-large); font-weight: bold; + overflow: hidden; } #library header button .icon { margin-right: var(--icon-spacing); @@ -465,11 +468,12 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 8px; + padding: var(--spacing); } #fs header button { font-size: var(--font-size-large); font-weight: bold; + overflow: hidden; } #fs header button .icon { margin-right: var(--icon-spacing); @@ -543,11 +547,12 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 8px; + padding: var(--spacing); } #playlists header button { font-size: var(--font-size-large); font-weight: bold; + overflow: hidden; } #playlists header button .icon { margin-right: var(--icon-spacing); @@ -609,11 +614,12 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 8px; + padding: var(--spacing); } #yt header button { font-size: var(--font-size-large); font-weight: bold; + overflow: hidden; } #yt header button .icon { margin-right: var(--icon-spacing); @@ -691,11 +697,11 @@ nav ul li.active { font-size: var(--font-size-large); } #settings dl { - margin: 8px; + margin: var(--spacing); display: grid; grid-template-columns: max-content 1fr; align-items: center; - grid-gap: 8px; + grid-gap: var(--spacing); } #settings dt { font-weight: bold; @@ -752,6 +758,7 @@ nav ul li.active { --font-size-large: 112.5%; --icon-spacing: 4px; --primary: rgb(var(--primary-raw)); + --spacing: 8px; } :root[data-theme=light] { --fg: #333; @@ -774,3 +781,8 @@ nav ul li.active { :root[data-color=limegreen] { --primary-raw: 50, 205, 50; } +@media (max-width: 480px) { + :root { + --spacing: var(--icon-spacing); + } +} diff --git a/app/css/app.less b/app/css/app.less index 8a8dd48..dabf7e5 100644 --- a/app/css/app.less +++ b/app/css/app.less @@ -42,7 +42,6 @@ button { border: none; line-height: 1; cursor: pointer; - flex-shrink: 0; } select { diff --git a/app/css/component.less b/app/css/component.less index 62de074..6ce48be 100644 --- a/app/css/component.less +++ b/app/css/component.less @@ -4,12 +4,13 @@ header { .flex-row; - padding: 8px; + padding: var(--spacing); button { font-size: var(--font-size-large); font-weight: bold; .icon { margin-right: var(--icon-spacing); } + overflow: hidden; } } diff --git a/app/css/icons.less b/app/css/icons.less index 0e46809..44b7d79 100644 --- a/app/css/icons.less +++ b/app/css/icons.less @@ -1,5 +1,6 @@ .icon { width: 24px; + flex-shrink: 0; path, polygon, circle { &:not([fill]) { diff --git a/app/css/nav.less b/app/css/nav.less index c8dd730..457fabb 100644 --- a/app/css/nav.less +++ b/app/css/nav.less @@ -16,7 +16,7 @@ nav ul { border-top: 4px solid transparent; .icon { - margin-right: 4px; + margin-right: var(--icon-spacing); } &.active { diff --git a/app/css/player.less b/app/css/player.less index a2cb5bb..b2dd044 100644 --- a/app/css/player.less +++ b/app/css/player.less @@ -24,7 +24,7 @@ .info { flex-grow: 2; flex-basis: 0; - padding-left: var(--icon-spacing); + padding: 0 var(--icon-spacing); overflow: hidden; .flex-column; diff --git a/app/css/settings.less b/app/css/settings.less index 1ae103d..7c66706 100644 --- a/app/css/settings.less +++ b/app/css/settings.less @@ -2,11 +2,11 @@ font-size: var(--font-size-large); dl { - margin: 8px; + margin: var(--spacing); display: grid; grid-template-columns: max-content 1fr; align-items: center; - grid-gap: 8px; + grid-gap: var(--spacing); } dt { diff --git a/app/css/variables.less b/app/css/variables.less index f7bba89..df28b38 100644 --- a/app/css/variables.less +++ b/app/css/variables.less @@ -2,6 +2,7 @@ --font-size-large: 112.5%; --icon-spacing: 4px; --primary: rgb(var(--primary-raw)); + --spacing: 8px; } :root[data-theme=light] { @@ -29,3 +30,9 @@ :root[data-color=limegreen] { --primary-raw: 50, 205, 50; } + +@media (max-width: 480px) { + :root { + --spacing: var(--icon-spacing); + } +}