Flex to controls

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

2 files changed, 14 insertions, 11 deletions

diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js
index 544ad703523..c5cb97d5b4c 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 e5e0145cddb..ba3437a4e47 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;