diff --git a/README.md b/README.md index 19f4234..c05e96c 100644 --- a/README.md +++ b/README.md @@ -322,7 +322,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` | | `MASCOT` | `["BoymoderBlahaj", "redsunlib" ... Add more at ./static/mascots] ` | _(none)_ | | `FRONT_PAGE` | `["default", "popular", "all"]` | `default` | -| `LAYOUT` | `["card", "clean", "compact"]` | `card` | +| `LAYOUT` | `["card", "clean", "compact", "old", "waterfall"]` | `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 c7695c3..0f3430e 100644 --- a/static/style.css +++ b/static/style.css @@ -1355,6 +1355,91 @@ summary.comment_data { /* Layouts */ +.waterfall #posts > .post { + break-inside: avoid-column; +} + +.waterfall #posts { + column-width: 500px; + column-gap: 10px; +} + +.old .post { + border-radius: 5px; + background: var(--post); + box-shadow: var(--shadow); + display: grid; + transition: 0.2s background; + grid-template: "post_score post_thumbnail post_header" auto + "post_score post_thumbnail post_title" 1fr + "post_score post_thumbnail post_media" auto + "post_score post_thumbnail post_body" auto + "post_score post_thumbnail post_poll" auto + "post_score post_thumbnail post_notification" auto + "post_score post_thumbnail post_footer" auto + / 4.5em minmax(0, 140px) fit-content(min(90%, 90%)) +} + +/* .old .post_thumbnail { + margin-left: 20px; +} */ + +.old .post_score { + background-color: #ff93da08; + border-radius: 8px; + align-self: center; + width: 53px; + padding-left: 5px; /* REMINDER:pls compact testing only */ + border-top-width: 0px; + border-top-style: solid; + padding-top: 5px; + padding-bottom: 5px; + padding-right: 5px; + margin-left: 5px; + margin-right: 5px; +} + +.old .post_media_content { + max-width: calc(65% - 40px); +} + +.old .highlighted > .post_score { + background-color: unset; + align-self: unset; + margin-top: 20px; + margin-left: 20px; +} + +.old .post_score .label { + display: block; + text-align: center; + text-anchor: middle; + color: gray; +} + +.old .post_preview { + max-height: 72px; +} + +.old #column_one { + width: 100%; + max-width: 100%; +} + +.old #commentQueryForms { + display: flex; + justify-content: center; + justify-self: start; +} + +.old .commentQuery { + margin-left: 20px; +} + +.old main { + max-width: 100% !important; +} + .compact .post:not(.highlighted) { border-radius: 0; margin: 0; diff --git a/templates/base.html b/templates/base.html index b2b2945..20cbc89 100644 --- a/templates/base.html +++ b/templates/base.html @@ -28,7 +28,7 @@ diff --git a/templates/settings.html b/templates/settings.html index ebd26a5..7d9aa46 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -37,13 +37,14 @@
- + + {% if prefs.layout == "old" || prefs.layout == "waterfall" %}ⓘ Wide UI is required for this layout{% endif %}
diff --git a/templates/utils.html b/templates/utils.html index 4c4fae9..e524871 100644 --- a/templates/utils.html +++ b/templates/utils.html @@ -246,7 +246,7 @@ {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %}{% if post.flags.spoiler %} Spoiler{% endif %} - {% if (prefs.layout.is_empty() || prefs.layout == "card") && 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 %} @@ -266,7 +266,7 @@ {% endif %}
- {% else if (prefs.layout.is_empty() || prefs.layout == "card") && (post.post_type == "gif" || post.post_type == "video") %} + {% else if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "waterfall") && (post.post_type == "gif" || post.post_type == "video") %} {% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() || prefs.ffmpeg_video_downloads == "on" && !post.media.alt_url.is_empty() %}