From 9bb28bab300192b38d29d4fa2809c719af7d0429 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6?= <skjnldsv@protonmail.com>
Date: Fri, 3 Nov 2017 12:53:21 +0100
Subject: [PATCH] Flex to controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
---
 apps/files/js/breadcrumb.js |  5 +++--
 core/css/styles.scss        | 20 +++++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js
index 544ad70352..c5cb97d5b4 100644
--- a/apps/files/js/breadcrumb.js
+++ b/apps/files/js/breadcrumb.js
@@ -226,7 +226,8 @@
 		 * Return the number of items to hide
 		 */
 		_toShrink: function() {
-			var maxWidth = this.$el.width();
+			var maxWidth = this.$el.parent().width();
+			console.log('Available width:' +maxWidth);
 			var smallestWidth = 50;
 			// 50px by default for the ellipsis crumb
 			return Math.ceil((this.totalWidth + 50 - maxWidth) / smallestWidth);
@@ -240,7 +241,7 @@
 		 _hideCrumbs: function(toHide) {
 			 var min = Math.round(this.breadcrumbs.length/2 - toHide/2);
 			 var max = Math.round(this.breadcrumbs.length/2 + toHide/2 - 1);
-			 console.log(this.$el.find('.crumb').slice(min, max));
+			 console.log('toShrink: '+toHide);
 			 this.$el.find('.crumb').removeClass('hidden')
 			 	.slice(min, max).addClass('hidden');
 		 },
diff --git a/core/css/styles.scss b/core/css/styles.scss
index e5e0145cdd..ba3437a4e4 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -237,6 +237,7 @@ body {
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
+	display: inline-flex;
 }
 
 /* position controls for apps with app-navigation */
@@ -1388,32 +1389,33 @@ span.ui-icon {
 }
 
 /* ---- BREADCRUMB ---- */
-
+div.breadcrumb {
+	display: inline-flex;
+	overflow: hidden;
+}
 div.crumb {
-	float: left;
-	display: block;
+	display: inline-flex;
 	background-image: url('../img/breadcrumb.svg?v=1');
 	background-repeat: no-repeat;
 	background-position: right center;
 	height: 44px;
 	background-size: auto 24px;
+	flex: 1 2 50px;
+	max-width: 200px;
 	&.hidden {
 		display: none;
 	}
 	a, > span {
 		position: relative;
-		top: 12px;
 		padding: 14px 24px 14px 17px;
 		color: nc-lighten($color-main-text, 33%);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
 	}
 	&.last a {
 		padding-right: 0;
 	}
-	&:first-child a {
-		position: relative;
-		top: 13px;
-		padding-right: 14px;
-	}
 	&.last {
 		font-weight: 600;
 		margin-right: 10px;