styling

app/css/cyp.less

@@ -39,6 +39,7 @@ button {
 
 	.flex-row;
 	display: inline-flex;
+	flex-shrink: 0;
 
 	background-color: transparent;
 	padding: 0;

app/css/elements/app.less

@@ -2,13 +2,15 @@ cyp-app {
 	.flex-column;
 
 	box-sizing: border-box;
+	margin: 0 auto;
+	max-width: 800px;
+	height: 100vh;
+
 	font-family: lato, sans-serif;
 	line-height: 1.25;
 	background-color: var(--bg);
 	color: var(--fg);
 	text-shadow: var(--text-shadow);
-	max-width: 800px;
+
-	margin: 0 auto;
+	white-space: nowrap;
-	overflow: hidden;
-	height: 100vh;
 }

app/css/elements/menu.less

@@ -18,8 +18,8 @@ cyp-menu, cyp-commands {
 
 cyp-menu button {
 	flex: 1 0 0;
-	border-top: 4px solid transparent;
+	border-top: var(--border-width) solid transparent;
-	border-bottom: 4px solid transparent;
+	border-bottom: var(--border-width) solid transparent;
 
 	.icon {
 		margin-right: var(--icon-spacing);

app/css/elements/player.less

@@ -34,7 +34,7 @@ cyp-player {
 			margin: 0;
 		}
 
-		.title, .subtitle { .no-wrap; }
+		.title, .subtitle { .ellipsis; }
 	}
 
 	.timeline {

app/css/elements/song.less

@@ -16,6 +16,6 @@ cyp-song {
 			margin: 0;
 		}
 
-//		h2, div { .long-line; } FIXME vyresit zalamovani/vypustku
+		h2, div { .ellipsis; } // FIXME vyresit zalamovani/vypustku
 	}
 }

app/css/icons.less

@@ -1,6 +1,6 @@
 .icon {
 	width: 24px;
-	flex-shrink: 0;
+//	flex-shrink: 0;
 
 	path, polygon, circle {
 		&:not([fill]) {

app/css/mixins.less

@@ -9,8 +9,7 @@
 	flex-direction: column;
 }
 
-.no-wrap {
+.ellipsis {
-	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -24,7 +23,7 @@
 */
 
 .selectable {
-	border-left: 4px solid transparent;
+	border-left: var(--border-width) solid transparent;
 	cursor: pointer;
 
 	&.selected {
@@ -35,9 +34,12 @@
 .item {
 	.flex-row;
 	.selectable;
-	padding: 8px 4px;
+	padding: 8px;
+	padding-left: calc(8px - var(--border-width));
 
 	&:nth-child(odd) { // FIXME nutno poresit lepe s ohledem na search
 		background-color: var(--bg-alt);
 	}
-}
+
+	button .icon { width: 32px; }
+}

app/css/variables.less

@@ -6,6 +6,7 @@ cyp-app {
 	--primary: rgb(var(--primary-raw));
 	--spacing: 8px;
 	--box-shadow: 0 0 3px #000;
+	--border-width: 4px;
 }
 
 .light() {

app/cyp.css

@@ -41,6 +41,7 @@ button {
   flex-direction: row;
   align-items: center;
   display: inline-flex;
+  flex-shrink: 0;
   background-color: transparent;
   padding: 0;
   border: none;
@@ -75,7 +76,6 @@ select {
 }
 .icon {
   width: 24px;
-  flex-shrink: 0;
 }
 .icon path:not([fill]),
 .icon polygon:not([fill]),
@@ -95,8 +95,7 @@ select {
 .flex-column:not([hidden]) {
   display: flex;
 }
-.no-wrap {
+.ellipsis {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -108,7 +107,7 @@ select {
 }
 */
 .selectable {
-  border-left: 4px solid transparent;
+  border-left: var(--border-width) solid transparent;
   cursor: pointer;
 }
 .selectable.selected {
@@ -117,9 +116,10 @@ select {
 .item {
   flex-direction: row;
   align-items: center;
-  border-left: 4px solid transparent;
+  border-left: var(--border-width) solid transparent;
   cursor: pointer;
-  padding: 8px 4px;
+  padding: 8px;
+  padding-left: calc(8px - var(--border-width));
 }
 .item:not([hidden]) {
   display: flex;
@@ -130,6 +130,9 @@ select {
 .item:nth-child(odd) {
   background-color: var(--bg-alt);
 }
+.item button .icon {
+  width: 32px;
+}
 .component header {
   flex-direction: row;
   align-items: center;
@@ -376,6 +379,7 @@ cyp-app {
   --primary: rgb(var(--primary-raw));
   --spacing: 8px;
   --box-shadow: 0 0 3px #000;
+  --border-width: 4px;
 }
 cyp-app[theme=light] {
   --fg: #333;
@@ -422,15 +426,15 @@ cyp-app[color=limegreen] {
 cyp-app {
   flex-direction: column;
   box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 800px;
+  height: 100vh;
   font-family: lato, sans-serif;
   line-height: 1.25;
   background-color: var(--bg);
   color: var(--fg);
   text-shadow: var(--text-shadow);
-  max-width: 800px;
+  white-space: nowrap;
-  margin: 0 auto;
-  overflow: hidden;
-  height: 100vh;
 }
 cyp-app:not([hidden]) {
   display: flex;
@@ -468,8 +472,8 @@ cyp-commands button:not([hidden]) {
 }
 cyp-menu button {
   flex: 1 0 0;
-  border-top: 4px solid transparent;
+  border-top: var(--border-width) solid transparent;
-  border-bottom: 4px solid transparent;
+  border-bottom: var(--border-width) solid transparent;
 }
 cyp-menu button .icon {
   margin-right: var(--icon-spacing);
@@ -501,9 +505,10 @@ cyp-commands button.last {
 cyp-song {
   flex-direction: row;
   align-items: center;
-  border-left: 4px solid transparent;
+  border-left: var(--border-width) solid transparent;
   cursor: pointer;
-  padding: 8px 4px;
+  padding: 8px;
+  padding-left: calc(8px - var(--border-width));
 }
 cyp-song:not([hidden]) {
   display: flex;
@@ -514,6 +519,9 @@ cyp-song.selected {
 cyp-song:nth-child(odd) {
   background-color: var(--bg-alt);
 }
+cyp-song button .icon {
+  width: 32px;
+}
 cyp-song .info {
   flex-grow: 1;
   overflow: hidden;
@@ -527,6 +535,11 @@ cyp-song .info h2 {
   font-size: var(--font-size-large);
   margin: 0;
 }
+cyp-song .info h2,
+cyp-song .info div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 cyp-player {
   flex-direction: row;
   align-items: center;
@@ -574,7 +587,6 @@ cyp-player .info h2 {
 }
 cyp-player .info .title,
 cyp-player .info .subtitle {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -826,9 +838,10 @@ x-range:not([disabled]) .-thumb:hover {
 cyp-playlist {
   flex-direction: row;
   align-items: center;
-  border-left: 4px solid transparent;
+  border-left: var(--border-width) solid transparent;
   cursor: pointer;
-  padding: 8px 4px;
+  padding: 8px;
+  padding-left: calc(8px - var(--border-width));
 }
 cyp-playlist:not([hidden]) {
   display: flex;
@@ -839,6 +852,9 @@ cyp-playlist.selected {
 cyp-playlist:nth-child(odd) {
   background-color: var(--bg-alt);
 }
+cyp-playlist button .icon {
+  width: 32px;
+}
 cyp-playlist:nth-child(odd) {
   background-color: var(--bg-alt);
 }

app/js/elements/song.js

@@ -16,10 +16,11 @@ export default class Song extends Item {
 		html.node("h2", {}, lines.shift(), info);
 		lines.length && html.node("div", {}, lines.shift(), info);
 
-/*
+		html.button({icon:"play"}, "", this).addEventListener("click", async e => {
-				playButton(TYPE_ID, id, node);
+			e.stopPropagation(); // do not select
-*/
+			await this._mpd.command(`playid ${this.data["Id"]}`);
-		}
+		});
+	}
 }
 
 customElements.define("cyp-song", Song);

app/js/ui.js

@@ -90,32 +90,6 @@ function playButton(type, what, parent) {
 	return button;
 }
 
-function deleteButton(type, id, parent) {
-	let title;
-
-	switch (type) {
-		case TYPE_ID: title = "Delete from queue"; break;
-		case TYPE_PLAYLIST: title = "Delete playlist"; break;
-	}
-
-	let button = html.button({icon:"close", title}, "", parent);
-	button.addEventListener("click", async e => {
-		switch (type) {
-			case TYPE_ID:
-				await mpd.command(`deleteid ${id}`);
-				pubsub.publish("queue-change");
-			return;
-			case TYPE_PLAYLIST:
-				let ok = confirm(`Really delete playlist '${id}'?`);
-				if (!ok) { return; }
-				await mpd.command(`rm "${mpd.escape(id)}"`);
-				pubsub.publish("playlists-change");
-			return;
-		}
-	});
-	return button;
-}
-
 function addButton(type, what, parent) {
 	let button = html.button({icon:"plus", title:"Add to queue"}, "", parent);
 	button.addEventListener("click", async e => {
@@ -177,17 +151,3 @@ export function group(ctx, label, urlOrFilter, parent) {
 
 	return node;
 }
-
-export function playlist(name, parent) {
-	let node = html.node("li", {}, "", parent);
-
-	let info = html.node("span", {className:"info"}, "", node);
-	html.icon("playlist-music", info)
-	html.node("h2", {}, name, info);
-
-	playButton(TYPE_PLAYLIST, name, node);
-	addButton(TYPE_PLAYLIST, name, node);
-	deleteButton(TYPE_PLAYLIST, name, node);
-
-	return node;
-}