Adjust design of grid view

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

1 files changed, 70 insertions, 2 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index ed15865b32a..f8185977de0 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -731,26 +731,89 @@ table.dragshadow td.size {
 #filestable.view-grid {
 	display: flex;
 	flex-direction: column;
+
 	thead {
 		display: none;
 	}
+
 	tbody {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, 180px);
 		justify-content: space-around;
 		row-gap: 15px;
+
 		tr {
 			display: block;
+			position: relative;
 			height: 180px;
 		}
+
 		td {
-			display: block;
+			display: inline;
+			border-bottom: none;
+
+			&.filename {
+				.thumbnail-wrapper {
+					min-width: 0;
+
+					.thumbnail {
+						width: 130px;
+						height: 130px;
+						background-size: 130px;
+						margin-left: 26px;
+
+						/* Position favorite star related to checkbox to left and 3-dot menu below */
+						.favorite-mark {
+							padding: 14px;
+							right: -24px;
+						}
+					}
+				}
+
+				.name {
+					height: 100%;
+
+					.nametext {
+						display: inline-block;
+						width: initial;
+						height: initial;
+						overflow: initial;
+						margin-top: 135px;
+						padding-right: 0;
+						text-align: right;
+
+						.innernametext {
+							display: inline-block;
+							max-width: 80px;
+						}
+
+						/* No space for extension in grid view */
+						.extension {
+							display: none;
+						}
+					}
+
+					.fileactions {
+						height: initial;
+						margin-top: 135px;
+					}
+				}
+			}
+
+			/* No space for filesize and date in grid view */
+			&.filesize,
+			&.date {
+				display: none;
+			}
+
 			&.selection {
 				position: absolute;
 				top: 0;
 				left: 0;
 				display: flex;
 				width: 44px;
+				z-index: 10;
+
 				label {
 					width: 44px;
 					height: 44px;
@@ -759,4 +822,9 @@ table.dragshadow td.size {
 			}
 		}
 	}
-}
\ No newline at end of file
+
+	/* Do not show "Shared" text next to icon as there is no space */
+	#fileList .action.action-share.permanent.shared-style span:not(.icon) {
+		display: none;
+	}
+}