From 8331a0d3a32a964a1fc6a12d8435777a4e91b437 Mon Sep 17 00:00:00 2001
From: Ondrej Zara <ondrej.zara@gmail.com>
Date: Mon, 15 Apr 2019 09:13:39 +0200
Subject: [PATCH] respo

---
 app/app.css         | 13 +++++++++++++
 app/css/player.less | 17 ++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/app.css b/app/app.css
index 7d30fab..6da1868 100644
--- a/app/app.css
+++ b/app/app.css
@@ -148,6 +148,7 @@ nav ul li.active {
   opacity: 0.5;
 }
 #player .art {
+  margin-right: 0;
   height: 96px;
 }
 #player .art img,
@@ -160,6 +161,7 @@ nav ul li.active {
 }
 #player .info {
   flex-grow: 1;
+  padding-left: var(--icon-spacing);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -173,6 +175,7 @@ nav ul li.active {
 }
 #player [type=range] {
   margin: 0;
+  min-width: 0;
 }
 #player .timeline {
   display: flex;
@@ -225,6 +228,16 @@ nav ul li.active {
 #player .misc .icon {
   width: 32px;
 }
+@media (max-width: 519px) {
+  #player {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  #player .info {
+    order: 1;
+    height: 96px;
+  }
+}
 .component {
   height: 100%;
   display: flex;
diff --git a/app/css/player.less b/app/css/player.less
index 79b64ba..3a40a3f 100644
--- a/app/css/player.less
+++ b/app/css/player.less
@@ -7,6 +7,7 @@
 	&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
 
 	.art {
+		margin-right: 0;
 		@size: 96px;
 		height: @size;
 		img, .icon {
@@ -22,6 +23,7 @@
 	.info { 
 		flex-grow: 1;
 
+		padding-left: var(--icon-spacing);
 		overflow: hidden;
 		.flex-column;
 		justify-content: space-around;
@@ -29,7 +31,10 @@
 
 	.title, .subtitle { .long-line; }
 
-	[type=range] { margin: 0; }
+	[type=range] {
+		margin: 0;
+		min-width: 0; // fails to shrink otherwise
+	}
 
 	.timeline {
 		.flex-row;
@@ -81,4 +86,14 @@
 		justify-content: space-around;
 		.icon { width: 32px; }
 	}
+
+	@media (max-width: 519px) {
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.info {
+			order: 1;
+			height: 96px;
+		}
+	}
 }