From a99d42d93340a2a5a9e5a95d02700c2649012be5 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Fri, 19 Jul 2024 12:23:13 +0200
Subject: [PATCH] optimize tile layout for small screens
---
metager/resources/js/startpage/tiles.js | 8 +++++++-
.../less/metager/pages/startpage/tiles.less | 16 ++++++++++++----
2 files changed, 19 insertions(+), 5 deletions(-)
diff --git a/metager/resources/js/startpage/tiles.js b/metager/resources/js/startpage/tiles.js
index f1fe94634..e96d12b9d 100644
--- a/metager/resources/js/startpage/tiles.js
+++ b/metager/resources/js/startpage/tiles.js
@@ -52,6 +52,7 @@
let tile_width = parseFloat(window.getComputedStyle(document.querySelector("#tiles > a")).width.replace("px", ""));
let tile_gap = parseFloat(window.getComputedStyle(document.querySelector("#tiles"))["column-gap"].replace("px", ""));
let client_width = document.querySelector("html").clientWidth;
+ let client_height = document.querySelector("html").clientHeight;
let desired_tile_count = 8;
@@ -72,7 +73,12 @@
console.log(client_width, tile_width, tile_gap, desired_tile_count);
console.log("Six Tiles", tile_width * 6 + 5 * tile_gap);
if (native_tile_count + min_advertisements > desired_tile_count) {
- desired_tile_count *= 2;
+ // Allow 2x3 Tiles on small displays
+ if (desired_tile_count == 2 && client_height > 850) {
+ desired_tile_count *= 3;
+ } else {
+ desired_tile_count *= 2;
+ }
}
diff --git a/metager/resources/less/metager/pages/startpage/tiles.less b/metager/resources/less/metager/pages/startpage/tiles.less
index 96a8fb8bf..4c0fb83ab 100644
--- a/metager/resources/less/metager/pages/startpage/tiles.less
+++ b/metager/resources/less/metager/pages/startpage/tiles.less
@@ -32,7 +32,7 @@ div#tiles-container {
}
@media(max-width: @four_row_width) {
- width: @two_row_width;
+ width: 100%;
}
display: flex;
@@ -46,6 +46,11 @@ div#tiles-container {
>a {
width: @tile_width;
+
+ @media(max-width: @four_row_width) {
+ width: calc(50% - @tile_gap);
+ }
+
display: flex;
row-gap: .5rem;
flex-direction: column;
@@ -62,7 +67,7 @@ div#tiles-container {
width: @image_size;
height: @image_size;
padding: 0.5rem;
- background-color: @highlight-color;
+ background-color: fade(@highlight-color, 60%);
border-radius: 5px;
transition: background-color 0.5s;
@@ -79,7 +84,6 @@ div#tiles-container {
>div.title {
font-size: .8rem;
color: fade(@text-color, 60%);
- transition: color 0.5s;
width: @tile_width;
text-overflow: ellipsis;
overflow: hidden;
@@ -87,6 +91,10 @@ div#tiles-container {
text-align: center;
line-height: 1;
+ >div.main-title {
+ transition: color 0.5s;
+ }
+
>div.sub-title {
height: 1em;
}
@@ -94,7 +102,7 @@ div#tiles-container {
&:hover {
>div.image {
- background-color: lighten(@highlight-color, 10%);
+ background-color: @highlight-color;
}
>div.title {
--
GitLab