item structure
This commit is contained in:
parent
d91a6ca858
commit
2d363bc706
6 changed files with 20 additions and 15 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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
|
@ -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));
|
||||||
|
|
Loading…
Reference in a new issue