From 2b8112a3fbddcb384e9d529d3be3cb53c4f928ed Mon Sep 17 00:00:00 2001 From: ayaka Date: Sun, 30 Jun 2024 00:04:46 +1200 Subject: [PATCH 1/2] mosaic layout --- README.md | 2 +- static/style.css | 10 +++++++++- templates/base.html | 2 +- templates/settings.html | 6 +++--- templates/utils.html | 6 +++--- 5 files changed, 17 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 6bda401..d903174 100644 --- a/README.md +++ b/README.md @@ -374,7 +374,7 @@ Assign a default value for each user-modifiable setting by passing environment v | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------- | | `THEME` | `["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox", "gruvboxdark", "gruvboxlight", "tokyoNight", "icebergDark"]` | `system` | | `FRONT_PAGE` | `["default", "popular", "all"]` | `default` | -| `LAYOUT` | `["card", "clean", "compact"]` | `card` | +| `LAYOUT` | `["card", "clean", "compact", "old", "mosaic"]` | `card` | | `WIDE` | `["on", "off"]` | `off` | | `POST_SORT` | `["hot", "new", "top", "rising", "controversial"]` | `hot` | | `COMMENT_SORT` | `["confidence", "top", "new", "controversial", "old"]` | `confidence` | diff --git a/static/style.css b/static/style.css index 87b3c3b..414d1c3 100644 --- a/static/style.css +++ b/static/style.css @@ -1325,6 +1325,15 @@ summary.comment_data { /* Layouts */ +.mosaic #posts > .post { + break-inside: avoid-column; +} + +.mosaic #posts { + column-width: 500px; + column-gap: 10px; +} + .old .post { border-radius: 5px; background: var(--post); @@ -1397,7 +1406,6 @@ summary.comment_data { margin-left: 20px; } - .old main { max-width: 100% !important; } diff --git a/templates/base.html b/templates/base.html index 2e06a48..233f66c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -28,7 +28,7 @@ diff --git a/templates/settings.html b/templates/settings.html index 2caa345..f3dcc82 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -31,14 +31,14 @@
- - {% if prefs.layout == "old" %}ⓘ Wide UI is always enabled with this layout{% endif %} + + {% if prefs.layout == "old" || prefs.layout == "mosaic" %}ⓘ Wide UI is always enabled with this layout{% endif %}
diff --git a/templates/utils.html b/templates/utils.html index a99e2be..10f28a0 100644 --- a/templates/utils.html +++ b/templates/utils.html @@ -225,7 +225,7 @@ {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} - {% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} + {% if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "mosaic") && post.post_type == "image" %}
{% if post.media.height == 0 || post.media.width == 0 %} @@ -245,11 +245,11 @@ {% endif %}
- {% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "gif" %} + {% else if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "mosaic") && post.post_type == "gif" %}
- {% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "video" %} + {% else if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "mosaic") && post.post_type == "video" %} {% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
diff --git a/templates/utils.html b/templates/utils.html index 10f28a0..8d4da34 100644 --- a/templates/utils.html +++ b/templates/utils.html @@ -225,7 +225,7 @@ {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} - {% if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "mosaic") && post.post_type == "image" %} + {% if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "waterfall") && post.post_type == "image" %}
{% if post.media.height == 0 || post.media.width == 0 %} @@ -245,11 +245,11 @@ {% endif %}
- {% else if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "mosaic") && post.post_type == "gif" %} + {% else if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "waterfall") && post.post_type == "gif" %}
- {% else if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "mosaic") && post.post_type == "video" %} + {% else if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "waterfall") && post.post_type == "video" %} {% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}