From 7e39215142ca43eba959ac4ff1d47013c9d4af52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 19 Apr 2018 16:58:43 +0200
Subject: [PATCH] Use flex based layout inside the filename table cell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/files/css/files.scss  | 96 +++++++++-----------------------------
 apps/files/css/mobile.scss | 12 +----
 2 files changed, 24 insertions(+), 84 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 1be58cff5a..ef5d94b85f 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -282,17 +282,19 @@ table td.fileaction {
 	text-align: center;
 }
 table td.filename a.name {
+	display: flex;
 	position:relative; /* Firefox needs to explicitly have this default set … */
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
-	display: block;
 	height: 50px;
 	line-height: 50px;
 	padding: 0;
 }
 table td.filename .thumbnail-wrapper {
-	position: absolute;
-	width: 50px;
+	/* we need this to make sure flex is working inside a table cell */
+	width: 0;
+	min-width: 50px;
+	max-width: 50px;
 	height: 50px;
 }
 table td.filename .thumbnail-wrapper.icon-loading-small {
@@ -332,24 +334,24 @@ table td.filename .nametext, .modified, .column-last>span:first-child { float:le
 }
 
 /* TODO fix usability bug (accidental file/folder selection) */
-table td.filename .nametext {
-	position: absolute;
-	padding: 0;
-	padding-left: 55px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	width: 70%;
-	max-width: 800px;
-	height: 100%;
-	z-index: 10;
-}
-table td.filename .uploadtext {
-	position: absolute;
-	left: 55px;
-}
-/* ellipsis on file names */
-table td.filename .nametext .innernametext {
-	max-width: calc(100% - 100px) !important;
+table {
+	td.filename .nametext {
+		width: 0;
+		flex-grow: 1;
+		display: flex;
+		padding: 0;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		height: 100%;
+		z-index: 10;
+		padding-right: 20px;
+	}
+
+	.uploadtext {
+		position: absolute;
+		left: 55px;
+	}
 }
 
 .hide-hidden-files #fileList tr.hidden-file,
@@ -371,59 +373,9 @@ table td.filename .nametext .innernametext {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	position: relative;
-	display: inline-block;
 	vertical-align: top;
 }
 
-@media only screen and (min-width: 1500px) {
-	table td.filename .nametext .innernametext {
-		max-width: 790px;
-	}
-	.with-app-sidebar table td.filename .nametext .innernametext {
-		max-width: 390px;
-	}
-}
-@media only screen and (min-width: 1366px) and (max-width: 1500px) {
-	table td.filename .nametext .innernametext {
-		max-width: 660px;
-	}
-	.with-app-sidebar table td.filename .nametext .innernametext {
-		max-width: 290px;
-	}
-}
-@media only screen and (min-width: 1200px) and (max-width: 1366px) {
-	table td.filename .nametext .innernametext {
-		max-width: 500px;
-	}
-	.with-app-sidebar table td.filename .nametext .innernametext {
-		max-width: 230px;
-	}
-}
-@media only screen and (min-width: 1100px) and (max-width: 1200px) {
-	table td.filename .nametext .innernametext {
-		max-width: 400px;
-	}
-	.with-app-sidebar table td.filename .nametext .innernametext {
-		max-width: 230px;
-	}
-}
-@media only screen and (min-width: 1000px) and (max-width: 1100px) {
-	table td.filename .nametext .innernametext {
-		max-width: 310px;
-	}
-	.with-app-sidebar table td.filename .nametext .innernametext {
-		max-width: 230px;
-	}
-}
-@media only screen and (min-width: 768px) and (max-width: 1000px) {
-	table td.filename .nametext .innernametext {
-		max-width: 240px;
-	}
-	.with-app-sidebar table td.filename .nametext .innernametext {
-		max-width: 230px;
-	}
-}
-
 /* for smaller resolutions - see mobile.css */
 
 table td.filename .uploadtext {
@@ -490,8 +442,6 @@ table td.selection {
 
 /* File actions */
 .fileactions {
-	position: absolute;
-	right: 0;
 	z-index: 50;
 }
 
diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss
index 703ae49983..c5bb819392 100644
--- a/apps/files/css/mobile.scss
+++ b/apps/files/css/mobile.scss
@@ -28,12 +28,7 @@ table td {
 table.multiselect thead {
 	padding-left: 0;
 }
-
-/* restrict length of displayed filename to prevent overflow */
-table td.filename .nametext {
-	width: 100%;
-}
-
+	
 #fileList a.action.action-menu img {
 	padding-left: 0;
 }
@@ -46,11 +41,6 @@ table td.filename .nametext {
 	display: none !important;
 }
 
-/* ellipsis on file names */
-table td.filename .nametext .innernametext {
-	max-width: calc(100% - 175px) !important;
-}
-
 /* show the delete icon in name column in lower resolutions */
 table th#headerName .selectedActions .delete-selected {
 	display: inline;