item structure

This commit is contained in:
Ondrej Zara 2020-03-11 10:55:18 +01:00
parent d91a6ca858
commit 2d363bc706
No known key found for this signature in database
GPG key ID: B0A5751E616840C5
6 changed files with 20 additions and 15 deletions

View file

@ -13,6 +13,8 @@ cyp-menu, cyp-commands {
flex-direction: row; flex-direction: row;
span:not([id]) { display: none; } span:not([id]) { display: none; }
} }
.icon + * { margin-top: 2px; }
} }
} }
@ -28,7 +30,7 @@ cyp-menu button {
&.active { &.active {
border-top-color: var(--primary); border-top-color: var(--primary);
color: var(--primary); color: var(--primary);
background-color: rgb(var(--primary-raw), 0.1); background-color: var(--primary-tint);
} }
} }

View file

@ -1,21 +1,20 @@
cyp-song { cyp-song {
.item; .item;
.info { // FIXME zrevidovat .info {
flex-grow: 1; flex-grow: 1;
min-width: 0; // bez tohoto se odmita zmensit min-width: 0; // bez tohoto se odmita zmensit
.flex-column;
/* FIXME toto je relikt z .component
.icon { .icon {
color: var(--primary); color: var(--primary);
margin-right: var(--icon-spacing); margin-right: var(--icon-spacing);
filter: drop-shadow(var(--text-shadow)); filter: drop-shadow(var(--text-shadow));
} }
*/
h2 { .subtitle { .ellipsis; }
font-size: var(--font-size-large); }
margin: 0;
} }
h2, div { .ellipsis; } // FIXME vyresit zalamovani/vypustku
}
}

View file

@ -28,6 +28,7 @@
&.selected { &.selected {
border-left-color: var(--primary); border-left-color: var(--primary);
background-color: var(--primary-tint);
} }
} }
@ -42,7 +43,10 @@
background-color: var(--bg-alt); background-color: var(--bg-alt);
} }
> .icon { margin-right: var(--icon-spacing); } > .icon {
margin-right: var(--icon-spacing);
filter: drop-shadow(var(--text-shadow));
}
.title { .title {
font-size: var(--font-size-large); font-size: var(--font-size-large);

View file

@ -4,6 +4,7 @@ cyp-app {
--font-size-large: 112.5%; --font-size-large: 112.5%;
--icon-spacing: 4px; --icon-spacing: 4px;
--primary: rgb(var(--primary-raw)); --primary: rgb(var(--primary-raw));
--primary-tint: rgba(var(--primary-raw), 0.1);
--box-shadow: 0 0 3px #000; --box-shadow: 0 0 3px #000;
--border-width: 4px; --border-width: 4px;
} }

File diff suppressed because one or more lines are too long

View file

@ -13,8 +13,9 @@ export default class Song extends Item {
let info = html.node("div", {className:"info"}, "", this); let info = html.node("div", {className:"info"}, "", this);
let lines = formatSongInfo(this.data); let lines = formatSongInfo(this.data);
html.node("h2", {}, lines.shift(), info); info.appendChild(this._buildTitle(lines.shift()));
lines.length && html.node("div", {}, lines.shift(), info);
lines.length && html.node("span", {className:"subtitle"}, lines.shift(), info);
} }
} }
@ -24,11 +25,9 @@ customElements.define("cyp-song", Song);
// FIXME vyfaktorovat nekam do haje // FIXME vyfaktorovat nekam do haje
function formatSongInfo(data) { function formatSongInfo(data) {
let lines = []; let lines = [];
let tokens = [];
if (data["Title"]) { if (data["Title"]) {
tokens.push(data["Title"]); lines.push(data["Title"]);
lines.push(tokens.join(" "));
lines.push(format.subtitle(data)); lines.push(format.subtitle(data));
} else { } else {
lines.push(fileName(data)); lines.push(fileName(data));