From 653b0e7024e22e846aa7af2c536d1b5298fdf7b6 Mon Sep 17 00:00:00 2001 From: robin <8597693+robrobinbin@users.noreply.github.com> Date: Wed, 3 Feb 2021 20:11:04 +0100 Subject: [PATCH] Don't use display contents and remove duplication --- static/style.css | 36 ++++++++++----------------- templates/post.html | 8 +++--- templates/search.html | 52 +------------------------------------- templates/subreddit.html | 52 +------------------------------------- templates/user.html | 52 +------------------------------------- templates/utils.html | 54 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 74 insertions(+), 180 deletions(-) diff --git a/static/style.css b/static/style.css index 5a344aa..5515df8 100644 --- a/static/style.css +++ b/static/style.css @@ -622,34 +622,29 @@ a.search_subreddit:hover { font-weight: bold; } -.post_media { +.post_media_image, .post .__NoScript_PlaceHolder__, .post_media_video { max-width: calc(100% - 40px); + grid-area: post_media; + margin: 15px auto 5px auto; +} + +.post_media_image.short svg, .post_media_image.short img{ + max-height: 512px; + width: auto; +} + +.post_media_image svg{ + max-width: 100%; height: auto; align-self: center; - margin-top: 15px; - margin: 5px auto; - grid-area: post_media; background-color: var(--highlighted); background-image: url("data:image/svg+xml;utf8,"); background-position: 50%; background-repeat: no-repeat; } -.post_media_wrapper { - display: contents; - /* Fallback for browsers insufficiently supporting "display: contents"*/ - grid-area: post_media; - text-align: center; -} - -.post_media.short { - max-height: 512px; - width: auto; -} - -img.post_media { +.post_media_image img { max-width: 100%; - width: auto; } #post_url { @@ -658,11 +653,6 @@ img.post_media { grid-area: post_media; } -.post .__NoScript_PlaceHolder__ { - max-width: calc(100% - 40px); - grid-area: post_media; -} - .post_body { opacity: 0.9; font-weight: normal; diff --git a/templates/post.html b/templates/post.html index a6832e2..b9e78f3 100644 --- a/templates/post.html +++ b/templates/post.html @@ -65,19 +65,19 @@ {% if post.post_type == "image" %} - - + - Post image + Post image {% else if post.post_type == "video" || post.post_type == "gif" %} - + {% else if post.post_type == "link" %} {{ post.media.url }} {% endif %} diff --git a/templates/search.html b/templates/search.html index dbce9df..00e91d1 100644 --- a/templates/search.html +++ b/templates/search.html @@ -48,57 +48,7 @@ {% if post.flags.nsfw && prefs.show_nsfw != "on" %} {% else if post.title != "Comment" %} -
-

- r/{{ post.community }} - • - u/{{ post.author.name }} - • - {{ post.rel_time }} -

-

- {% if post.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.flair.flair_parts) %} - {% endif %} - {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} -

- - {% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} - - - - - Post image - - - - {% else if post.post_type != "self" %} - - {% if post.thumbnail.url.is_empty() %} - - Thumbnail - - - {% else %} - - - - Thumbnail - - - {% endif %} - {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} - - {% endif %} - -
{{ post.score }} Upvotes
-
- {{ post.comments }} comments -
-
+ {% call utils::post_in_list(post) %} {% else %}
diff --git a/templates/subreddit.html b/templates/subreddit.html index f7a307e..c2a8ce6 100644 --- a/templates/subreddit.html +++ b/templates/subreddit.html @@ -43,57 +43,7 @@ {% for post in posts %} {% if !(post.flags.nsfw && prefs.show_nsfw != "on") %}
-
-

- r/{{ post.community }} - • - u/{{ post.author.name }} - • - {{ post.rel_time }} -

-

- {% if post.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.flair.flair_parts) %} - {% endif %} - {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} -

- - {% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} - - - - - Post image - - - - {% else if post.post_type != "self" %} - - {% if post.thumbnail.url.is_empty() %} - - Thumbnail - - - {% else %} - - - - Thumbnail - - - {% endif %} - {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} - - {% endif %} - -
{{ post.score }} Upvotes
-
- {{ post.comments }} comments -
-
+ {% call utils::post_in_list(post) %} {% endif %} {% endfor %}
diff --git a/templates/user.html b/templates/user.html index d100c56..dab4f64 100644 --- a/templates/user.html +++ b/templates/user.html @@ -33,57 +33,7 @@ {% if post.flags.nsfw && prefs.show_nsfw != "on" %} {% else if post.title != "Comment" %} -
-

- r/{{ post.community }} - • - u/{{ post.author.name }} - • - {{ post.rel_time }} -

-

- {% if post.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.flair.flair_parts) %} - {% endif %} - {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} -

- - {% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} - - - - - Post image - - - - {% else if post.post_type != "self" %} - - {% if post.thumbnail.url.is_empty() %} - - Thumbnail - - - {% else %} - - - - Thumbnail - - - {% endif %} - {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} - - {% endif %} - -
{{ post.score }} Upvotes
-
- {{ post.comments }} comments -
-
+ {% call utils::post_in_list(post) %} {% else %}
diff --git a/templates/utils.html b/templates/utils.html index 5c82b48..d8ff4b6 100644 --- a/templates/utils.html +++ b/templates/utils.html @@ -57,3 +57,57 @@ {% endif %} {%- endmacro %} + +{% macro post_in_list(post) -%} +
+

+ r/{{ post.community }} + • + u/{{ post.author.name }} + • + {{ post.rel_time }} +

+

+ {% if post.flair.flair_parts.len() > 0 %} + {% call render_flair(post.flair.flair_parts) %} + {% endif %} + {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} +

+ + {% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} + + + + + Post image + + + + {% else if post.post_type != "self" %} + + {% if post.thumbnail.url.is_empty() %} + + Thumbnail + + + {% else %} + + + + Thumbnail + + + {% endif %} + {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} + + {% endif %} + +
{{ post.score }} Upvotes
+
+ {{ post.comments }} comments +
+
+{%- endmacro %}