From c299e128ab2b909c7b123f7f5db9932d85bc6507 Mon Sep 17 00:00:00 2001 From: robin <8597693+robrobinbin@users.noreply.github.com> Date: Thu, 21 Jan 2021 00:12:54 +0100 Subject: [PATCH 1/2] Inline images rework --- static/style.css | 22 +++++++++++++++++++--- templates/subreddit.html | 2 +- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/static/style.css b/static/style.css index e9f9319..aa9a6ce 100644 --- a/static/style.css +++ b/static/style.css @@ -522,14 +522,30 @@ a.search_subreddit:hover { } .post_media { + grid-area: post_media; + text-align: center; +} + +.post_media img { max-width: calc(100% - 40px); - align-self: center; margin-top: 15px; margin: 5px auto; height: auto; - grid-area: post_media; background-color: var(--highlighted); - display: table; + display: block; + width: auto; + color: transparent; + /* TODO, add background image placeholder? */ + /* + + */ +} + +.post_media img.short { + max-height: 512px; } #post_url { diff --git a/templates/subreddit.html b/templates/subreddit.html index becf8cf..5dbba2c 100644 --- a/templates/subreddit.html +++ b/templates/subreddit.html @@ -55,7 +55,7 @@
{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} - + {% else if post.post_type != "self" %} {% if post.thumbnail.url.is_empty() %} From baf7272cfd2ba4b04f0f42b108f9846dd09f3956 Mon Sep 17 00:00:00 2001 From: robin <8597693+robrobinbin@users.noreply.github.com> Date: Thu, 21 Jan 2021 22:04:06 +0100 Subject: [PATCH 2/2] Absolutly no jumping when images (fail to) load --- static/style.css | 29 ++++++++++------------------- templates/base.html | 4 ++-- templates/post.html | 12 +++++++++++- templates/search.html | 24 ++++++++++++++++++------ templates/subreddit.html | 24 ++++++++++++++++++------ templates/user.html | 24 ++++++++++++++++++------ 6 files changed, 77 insertions(+), 40 deletions(-) diff --git a/static/style.css b/static/style.css index aa9a6ce..a28293a 100644 --- a/static/style.css +++ b/static/style.css @@ -522,30 +522,21 @@ a.search_subreddit:hover { } .post_media { - grid-area: post_media; - text-align: center; -} - -.post_media img { max-width: calc(100% - 40px); + height: auto; + align-self: center; margin-top: 15px; margin: 5px auto; - height: auto; + grid-area: post_media; background-color: var(--highlighted); - display: block; - width: auto; - color: transparent; - /* TODO, add background image placeholder? */ - /* - - */ + background-image: url("data:image/svg+xml;utf8,"); + background-position: 50%; + background-repeat: no-repeat; } -.post_media img.short { +.post_media.short { max-height: 512px; + width: auto; } #post_url { @@ -595,7 +586,7 @@ a.search_subreddit:hover { margin: 5px; } -.post_thumbnail img { +.post_thumbnail svg { grid-area: 1 / 1 / 2 / 2; width: 100%; height: auto; @@ -608,7 +599,7 @@ a.search_subreddit:hover { background-color: var(--highlighted); } -.post_thumbnail svg { +.post_thumbnail.no_thumbnail svg { grid-area: 1 / 1 / 2 / 2; align-self: center; justify-self: center; diff --git a/templates/base.html b/templates/base.html index 15dfe8d..0de8a8e 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,7 +4,7 @@ {% block head %}