From a3d0dc49d42606c5636791f4edca7650cd7376ff Mon Sep 17 00:00:00 2001
From: Ondrej Zara <ondrej.zara@gmail.com>
Date: Mon, 15 Apr 2019 08:47:40 +0200
Subject: [PATCH] respo

---
 app/app.css      | 24 +++++++++++++++++-------
 app/css/nav.less | 22 +++++++++++++++-------
 app/css/yt.less  |  2 +-
 app/index.html   | 16 +++++++++-------
 4 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/app/app.css b/app/app.css
index 1b63dcc..7d30fab 100644
--- a/app/app.css
+++ b/app/app.css
@@ -106,21 +106,31 @@ nav ul {
   flex-direction: row;
   align-items: center;
 }
-nav ul .icon {
-  display: block;
-  margin: 4px auto;
-}
 nav ul li {
-  text-align: center;
   flex: 1 0 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   cursor: pointer;
+  padding: 4px 0 8px 0;
   border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
+}
+nav ul li .icon {
+  margin-right: 4px;
 }
 nav ul li.active {
   border-top-color: var(--primary);
   color: var(--primary);
 }
+@media (max-width: 480px) {
+  nav ul li {
+    flex-direction: row;
+    justify-content: center;
+  }
+  nav ul li span:not([id]) {
+    display: none;
+  }
+}
 #player {
   display: flex;
   flex-direction: row;
@@ -643,7 +653,7 @@ nav ul li.active {
 #yt pre {
   flex-grow: 1;
   overflow: auto;
-  white-space: pre-wrap;
+  white-space: pre;
 }
 #yt.pending header {
   background-image: linear-gradient(var(--primary), var(--primary));
diff --git a/app/css/nav.less b/app/css/nav.less
index 308f2eb..6219b4e 100644
--- a/app/css/nav.less
+++ b/app/css/nav.less
@@ -4,22 +4,30 @@ nav ul {
 	list-style: none;
 	.flex-row;
 
-	.icon {
-		display: block;
-		margin: 4px auto;
-	}
-
 	li {
-		text-align: center;
 		flex: 1 0 0;
+
+		.flex-column;
+		align-items: center;
+
 		cursor: pointer;
+		padding: 4px 0 8px 0;
 
 		border-top: 4px solid transparent;
-		border-bottom: 4px solid transparent;
+
+		.icon {
+			margin-right: 4px;
+		}
 
 		&.active {
 			border-top-color: var(--primary);
 			color: var(--primary);
 		}
+
+		@media (max-width: 480px) {
+			flex-direction: row;
+			justify-content: center;
+			span:not([id]) { display: none; }
+		}
 	}
 }
diff --git a/app/css/yt.less b/app/css/yt.less
index 929acb5..1cc0d6c 100644
--- a/app/css/yt.less
+++ b/app/css/yt.less
@@ -16,7 +16,7 @@
 	pre {
 		flex-grow: 1;
 		overflow: auto;
-		white-space: pre-wrap;
+		white-space: pre;
 	}
 
 	&.pending header {
diff --git a/app/index.html b/app/index.html
index 1d3d79b..ec21672 100644
--- a/app/index.html
+++ b/app/index.html
@@ -95,14 +95,16 @@
 			<nav>
 				<ul>
 					<li data-for="queue" data-icon="music">
-						Queue
-						<span id="queue-length"></span>
+						<div>
+							<span>Queue</span>
+							<span id="queue-length"></span>
+						</div>
 					</li>
-					<li data-for="playlists" data-icon="playlist-music">Playlists</li>
-					<li data-for="library" data-icon="library-music">Library</li>
-					<li data-for="fs" data-icon="folder">Files</li>
-					<li data-for="yt" data-icon="download">YouTube</li>
-					<li data-for="settings" data-icon="settings">Settings</li>
+					<li data-for="playlists" data-icon="playlist-music"><span>Playlists</span></li>
+					<li data-for="library" data-icon="library-music"><span>Library</span></li>
+					<li data-for="fs" data-icon="folder"><span>Files</span></li>
+					<li data-for="yt" data-icon="download"><span>YouTube</span></li>
+					<li data-for="settings" data-icon="settings"><span>Settings</span></li>
 				</ul>
 			</nav>
 		</footer>