From d2c157bb8f41278f27b591fa20cac1a9f2867b49 Mon Sep 17 00:00:00 2001
From: Ondrej Zara <ondrej.zara@gmail.com>
Date: Mon, 15 Apr 2019 16:00:59 +0200
Subject: [PATCH] respo styling

---
 app/app.css         | 16 ++++++++--------
 app/css/player.less | 35 ++++++++++++++---------------------
 2 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/app/app.css b/app/app.css
index faeaf74..9e02d47 100644
--- a/app/app.css
+++ b/app/app.css
@@ -150,7 +150,8 @@ nav ul li.active {
 }
 #player [type=range] {
   margin: 0;
-  min-width: 0;
+  width: 0;
+  flex-grow: 1;
 }
 #player .art {
   margin-right: 0;
@@ -161,7 +162,8 @@ nav ul li.active {
   width: 96px;
 }
 #player .info {
-  flex-grow: 1;
+  flex-grow: 2;
+  flex-basis: 0;
   padding-left: var(--icon-spacing);
   overflow: hidden;
   display: flex;
@@ -188,10 +190,10 @@ nav ul li.active {
   flex-basis: 5ch;
   text-align: center;
 }
-#player .timeline [type=range] {
-  flex-grow: 1;
-}
 #player .controls {
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 220px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -217,9 +219,6 @@ nav ul li.active {
 #player .controls .volume .mute {
   margin-right: 4px;
 }
-#player .controls .volume [type=range] {
-  width: 132px;
-}
 #player .misc {
   display: flex;
   flex-direction: column;
@@ -236,6 +235,7 @@ nav ul li.active {
   }
   #player .info {
     order: 1;
+    flex-basis: 100%;
     height: 96px;
   }
 }
diff --git a/app/css/player.less b/app/css/player.less
index e03a045..a2cb5bb 100644
--- a/app/css/player.less
+++ b/app/css/player.less
@@ -9,7 +9,8 @@
 
 	[type=range] {
 		margin: 0;
-		min-width: 0; // fails to shrink otherwise
+		width: 0; // fails to shrink otherwise
+		flex-grow: 1;
 	}
 
 	.art {
@@ -20,11 +21,12 @@
 		}
 	}
 
-	.info { 
-		flex-grow: 1;
-
+	.info {
+		flex-grow: 2;
+		flex-basis: 0;
 		padding-left: var(--icon-spacing);
 		overflow: hidden;
+
 		.flex-column;
 		justify-content: space-around;
 
@@ -43,13 +45,13 @@
 			flex-basis: 5ch;
 			text-align: center;
 		}
-
-		[type=range] {
-			flex-grow: 1;
-		}
 	}
 
 	.controls {
+		flex-grow: 1;
+		flex-basis: 0;
+		max-width: 220px;
+
 		.flex-column;
 		justify-content: space-around;
 
@@ -57,25 +59,15 @@
 			.flex-row;
 			justify-content: space-around;
 
-			.icon { 
-				width: 40px;
-			}
+			.icon { width: 40px; }
 
-			.icon-play, .icon-pause {
-				width: 64px;
-			}
+			.icon-play, .icon-pause { width: 64px; }
 		}
 
 		.volume {
 			.flex-row;
 
-			.mute {
-				margin-right: 4px;
-			}
-
-			[type=range] {
-				width: 132px;
-			}
+			.mute { margin-right: 4px; }
 		}
 	}
 
@@ -93,6 +85,7 @@
 
 		.info {
 			order: 1;
+			flex-basis: 100%;
 			height: @art-size;
 		}
 	}