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

styling

Browse source
This commit is contained in:
Ondrej Zara 2020-03-14 22:11:14 +01:00
parent dd64ba4d42
commit ceecbb4952
No known key found for this signature in database
GPG key ID: B0A5751E616840C5
6 changed files with 40 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/css/elements/player.less
View file

@ -1,5 +1,6 @@
cyp-player { cyp-player {
@art-size: 96px; @art-size: 96px;
.flex-row; .flex-row;
align-items: stretch; align-items: stretch;
@ -8,7 +9,7 @@ cyp-player {
&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
x-range { x-range {
flex-grow: 1; flex: auto;
--elapsed-color: var(--primary); --elapsed-color: var(--primary);
} }
@ -21,60 +22,66 @@ cyp-player {
} }
.info { .info {
flex-grow: 2; flex: auto;
flex-basis: 0; min-width: 0;
padding: 0 var(--icon-spacing);
overflow: hidden; // FIXME asi tu ma byt min-width
.flex-column; .flex-column;
justify-content: space-around; justify-content: space-between;
h2 { padding: 0 var(--icon-spacing);
font-size: 125%;
margin: 0; .title {
margin-top: 8px;
.font-large;
font-weight: bold;
} }
.title, .subtitle { .ellipsis; } .title, .subtitle { .ellipsis; }
} }
.timeline { .timeline {
flex: none;
height: 24px;
margin-bottom: 4px;
.flex-row; .flex-row;
.duration, .elapsed { .duration, .elapsed {
flex-basis: 5ch; flex: none;
width: 5ch;
text-align: center; text-align: center;
} }
} }
.controls { .controls {
flex-grow: 1; width: 220px;
flex-basis: 0; min-width: 0;
max-width: 220px;
.flex-column; .flex-column;
justify-content: space-around;
.playback { .playback {
flex: auto;
.flex-row; .flex-row;
justify-content: space-around; justify-content: space-around;
.icon { width: 40px; } .icon { width: 40px; }
.icon-play, .icon-pause { width: 64px; } .icon-play, .icon-pause { width: 64px; }
} }
.volume { .volume {
.flex-row; flex: none;
margin-bottom: 4px;
.mute { margin-right: 4px; } .flex-row;
.mute { margin-right: var(--icon-spacing); }
} }
} }
.misc { .misc {
display: flex; flex: none;
flex-direction: column;
align-self: stretch; .flex-column;
justify-content: space-around; justify-content: space-around;
.icon { width: 32px; } .icon { width: 32px; }
} }

4
app/css/elements/tag.less
View file

@ -1,7 +1,9 @@
cyp-tag { cyp-tag {
.item; .item;
padding: 0; padding-left: 0;
padding-top: 0;
padding-bottom: 0;
.art { .art {
img, .icon { img, .icon {

2
app/cyp.css
View file

File diff suppressed because one or more lines are too long

4
app/index.html
View file

@ -12,8 +12,8 @@
<cyp-player> <cyp-player>
<span class="art"></span> <span class="art"></span>
<div class="info"> <div class="info">
<h2 class="title"></h2> <span class="title"></span>
<div class="subtitle"></div> <span class="subtitle"></span>
<div class="timeline"> <div class="timeline">
<span class="elapsed"></span> <span class="elapsed"></span>
<x-range></x-range> <x-range></x-range>

1
app/js/elements/library.js
View file

@ -181,6 +181,7 @@ class Library extends Component {
node.addButton("chevron-double-right", _ => this._pushState({type:"songs", filter:node.createChildFilter()})); node.addButton("chevron-double-right", _ => this._pushState({type:"songs", filter:node.createChildFilter()}));
break; break;
} }
node.fillArt(this._mpd);
} }
_buildBack() { _buildBack() {

11
app/js/elements/tag.js
View file

@ -17,9 +17,7 @@ export default class Tag extends Item {
} }
connectedCallback() { connectedCallback() {
const art = html.node("span", {className:"art"}, "", this); html.node("span", {className:"art"}, "", this);
this._fillArt(art);
this._buildTitle(this._value); this._buildTitle(this._value);
} }
@ -27,7 +25,8 @@ export default class Tag extends Item {
return Object.assign({[this._type]:this._value}, this._filter); return Object.assign({[this._type]:this._value}, this._filter);
} }
async _fillArt(parent) { async fillArt(mpd) {
const parent = this.firstChild;
const filter = this.createChildFilter(); const filter = this.createChildFilter();
let artist = filter["AlbumArtist"]; let artist = filter["AlbumArtist"];
@ -35,9 +34,9 @@ export default class Tag extends Item {
let src = null; let src = null;
if (artist && album) { if (artist && album) {
src = await art.get(this._mpd, artist, album); src = await art.get(mpd, artist, album);
if (!src) { if (!src) {
let songs = await this._mpd.listSongs(filter, [0,1]); let songs = await mpd.listSongs(filter, [0,1]);
if (songs.length) { if (songs.length) {
src = await art.get(artist, album, songs[0]["file"]); src = await art.get(artist, album, songs[0]["file"]);
} }