Set grid variable and overall size adjustement

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

1 files changed, 43 insertions, 17 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 5f7c998c51c..40be47210ed 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -728,6 +728,7 @@ table.dragshadow td.size {
 
 /* GRID */
 #filestable.view-grid {
+	$grid-size: 180px;
 	display: flex;
 	flex-direction: column;
 
@@ -747,14 +748,14 @@ table.dragshadow td.size {
 	/* MAIN FILE LIST */
 	tbody {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, 180px);
+		grid-template-columns: repeat(auto-fill, $grid-size);
 		justify-content: space-around;
 		row-gap: 15px;
 
 		tr {
 			display: block;
 			position: relative;
-			height: 180px;
+			height: $grid-size;
 			border-radius: var(--border-radius);
 		}
 
@@ -767,16 +768,22 @@ table.dragshadow td.size {
 					min-width: 0;
 
 					.thumbnail {
-						width: 130px;
-						height: 130px;
-						background-size: 130px;
-						margin-left: 26px;
+						width: $grid-size;
+						height: $grid-size - 20px;
+						// 75% of the total size
+						background-size: $grid-size * 0.75;
+						margin: 0;
 						border-radius: var(--border-radius);
+						background-repeat: no-repeat;
+						background-position: center;
 
-						/* Position favorite star related to checkbox to left and 3-dot menu below */
+						/* Position favorite star related to checkbox to left and 3-dot menu below
+						 * Position is inherited from the selection while in grid view
+						 */
 						.favorite-mark {
 							padding: 14px;
-							right: -24px;
+							right: 0;
+							left: auto;
 						}
 					}
 				}
@@ -785,13 +792,16 @@ table.dragshadow td.size {
 					height: 100%;
 
 					.nametext {
-						display: inline-block;
-						width: initial;
-						height: initial;
-						overflow: initial;
-						margin-top: 135px;
+						display: flex;
+						height: 44px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						margin-top: $grid-size - 44px;
 						padding-right: 0;
 						text-align: right;
+						line-height: 44px;
+						padding-left: 14px; // same as action icon right padding
 
 						.innernametext {
 							display: inline-block;
@@ -806,7 +816,17 @@ table.dragshadow td.size {
 
 					.fileactions {
 						height: initial;
-						margin-top: 135px;
+						margin-top: $grid-size - 44px;
+						display: flex;
+						align-items: center;
+						.action {
+							padding: 14px 14px;
+							width: 44px;
+							height: 44px;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+						}
 					}
 				}
 			}
@@ -817,26 +837,32 @@ table.dragshadow td.size {
 				display: none;
 			}
 
-			&.selection {
+			&.selection,
+			&.filename .favorite-mark {
 				position: absolute;
 				top: 0;
 				left: 0;
 				display: flex;
 				width: 44px;
+				height: 44px;
 				z-index: 10;
 				background: transparent;
 
 				label {
 					width: 44px;
 					height: 44px;
-					display: inline-block;
+					display: inline-flex;
+					&::before {
+						margin: 0;
+					}
 				}
 			}
 
 			/* Position actions menu below file */
 			.popovermenu {
 				left: 0;
-				width: 169px;
+				width: $grid-size - 10px; // 2 * margin
+				margin: 0 5px;
 
 				/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
 				.menuitem span:not(.icon) {