song playback in queue, item style

Makefile

@@ -13,7 +13,7 @@ $(ICONS): $(APP)/icons/*
 	$(APP)/svg2js.sh $(APP)/icons > $@
 
 $(CSS): $(APP)/css/* $(APP)/css/elements/*
-	$(LESS) $(APP)/css/cyp.less > $@
+	$(LESS) -x $(APP)/css/cyp.less > $@
 
 service: $(SERVICE)
 	systemctl --user enable $(PWD)/$(SERVICE)

app/css/cyp.less

@@ -20,7 +20,8 @@ header, footer {
 }
 
 footer {
-	position: relative;
+	position: relative; // kotva pro cyp-commands
+	overflow: hidden; // vyjizdenici cyp-commands
 	height: 56px;
 	@media (max-width: @breakpoint-menu) {
 		height: 40px;

app/css/elements/settings.less

@@ -1,4 +1,6 @@
 cyp-settings {
+	--spacing: 8px;
+
 	font-size: var(--font-size-large);
 
 	dl {

app/css/mixins.less

@@ -34,6 +34,7 @@
 .item {
 	.flex-row;
 	.selectable;
+
 	padding: 8px;
 	padding-left: calc(8px - var(--border-width));
 
@@ -41,5 +42,13 @@
 		background-color: var(--bg-alt);
 	}
 
+	> .icon { margin-right: var(--icon-spacing); }
+
+	.title {
+		font-size: var(--font-size-large);
+		flex-grow: 1;
+		min-width: 0; // bez tohoto se odmita zmensit
+	}
+
 	button .icon { width: 32px; }
 }

app/css/variables.less

@@ -4,7 +4,6 @@ cyp-app {
 	--font-size-large: 112.5%;
 	--icon-spacing: 4px;
 	--primary: rgb(var(--primary-raw));
-	--spacing: 8px;
 	--box-shadow: 0 0 3px #000;
 	--border-width: 4px;
 }
@@ -45,9 +44,3 @@ cyp-app[color=darkorange] {
 cyp-app[color=limegreen] {
 	--primary-raw: 50, 205, 50;
 }
-
-@media (max-width: @breakpoint-menu) {
-	:root {
-		--spacing: var(--icon-spacing);
-	}
-}

app/js/component.js

@@ -1,3 +1,4 @@
+import * as html from "./html.js";
 import Selection from "./selection.js";
 
 export class HasApp extends HTMLElement {
@@ -10,6 +11,10 @@ export class Item extends HasApp {
 		super();
 		this.addEventListener("click", _ => this.parentNode.selection.toggle(this));
 	}
+
+	_buildTitle(title) {
+		return html.node("span", {className:"title"}, title, this);
+	}
 }
 
 export default class Component extends HasApp {

app/js/elements/playlist.js

@@ -8,8 +8,8 @@ export default class Playlist extends Item {
 	}
 
 	connectedCallback() {
-		html.icon("playlist-music", this)
+		html.icon("playlist-music", this);
-		html.node("h2", {}, this.name, this);
+		this._buildTitle(this.name);
 	}
 }
 

app/js/elements/queue.js

@@ -65,7 +65,15 @@ class Queue extends Component {
 		html.clear(this);
 		this.selection.clear();
 
-		songs.forEach(song => this.appendChild(new Song(song)));
+		songs.forEach(song => {
+			const node = new Song(song);
+			this.appendChild(node);
+
+			html.button({icon:"play"}, "", node).addEventListener("click", async e => {
+				e.stopPropagation(); // do not select
+				await this._mpd.command(`playid ${song["Id"]}`);
+			});
+		});
 
 		this._updateCurrent();
 	}

app/js/elements/song.js

@@ -15,11 +15,6 @@ export default class Song extends Item {
 		let lines = formatSongInfo(this.data);
 		html.node("h2", {}, lines.shift(), info);
 		lines.length && html.node("div", {}, lines.shift(), info);
-
-		html.button({icon:"play"}, "", this).addEventListener("click", async e => {
-			e.stopPropagation(); // do not select
-			await this._mpd.command(`playid ${this.data["Id"]}`);
-		});
 	}
 }
 

app/js/mpd-mock.js

@@ -3,7 +3,7 @@ import * as mpd from "./mpd.js";
 export const escape = mpd.escape;
 
 export function command(cmd) {
-	console.warn(`MOCK does not know "${cmd}"`);
+	console.warn(`mpd-mock does not know "${cmd}"`);
 }
 
 export function commandAndStatus(cmd) {