From c890e809b76275e01b8b4057439a318b14cb35c6 Mon Sep 17 00:00:00 2001 From: syeopite <70992037+syeopite@users.noreply.github.com> Date: Thu, 18 Jul 2024 01:27:13 +0000 Subject: [PATCH 01/19] Improve post information widget of user comments for devices under 480px width (#183) * Fix user comment post link disappearing when < 480px * Improve user comment metadata design for mobile * Remove formerly unused CSS class style The prior commit introduced the usage of the `comment_subreddit` class to identify the subreddit that the reddit user posted the comment on. However, this class came with a legacy style within the CSS file that was previously not used anywhere within the current day Redlib As such this style has been removed. --- static/style.css | 30 +++++++++++++++++++++++++----- templates/user.html | 11 +++++++---- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/static/style.css b/static/style.css index 8fa4b31..8835417 100644 --- a/static/style.css +++ b/static/style.css @@ -1233,10 +1233,6 @@ a.search_subreddit:hover { font-weight: bold; } -.comment_subreddit { - font-weight: bold; -} - .comment_score { color: var(--accent); background: var(--foreground); @@ -1346,6 +1342,15 @@ summary.comment_data { cursor: pointer; } +.user_comment_data_divider { + display: flex; + align-items: center; +} + +.user_comment_data_divider .dot { + display: none; +} + .moderator, .admin { opacity: 1; } .op, .moderator, .admin { font-weight: bold; } @@ -1758,8 +1763,23 @@ td, th { .comment_right { padding: 5px 0 10px 2px; } .comment_author { margin-left: 12px; } .comment_data { margin-left: 12px; } + + .user-comment .comment_data { + flex-direction: column; + flex-wrap: wrap; + row-gap: 5px; + } + .comment_data::marker { font-size: 25px; } - .created { width: 100%; } + .user-comment .comment_data > .comment_link { order: 2 } + .user_comment_data_divider { order: 1; } + + .user_comment_data_divider .dot { + display: unset; + margin-left: 5px; + } + + .created-in { display: none; } .comment_score { min-width: 32px; diff --git a/templates/user.html b/templates/user.html index 35e58b2..ccaa0f1 100644 --- a/templates/user.html +++ b/templates/user.html @@ -50,7 +50,7 @@ {% else if !post.title.is_empty() %} {% call utils::post_in_list(post) %} {% else %} -
+

{% if prefs.hide_score != "on" %} @@ -64,9 +64,12 @@

{{ post.link_title }} -  in  - r/{{ post.community }} -  {{ post.rel_time }} +
+  in  + r/{{ post.community }} + • +  {{ post.rel_time }} +

{{ post.body|safe }}

From 410872d988c029373e614ad56c20615a75565740 Mon Sep 17 00:00:00 2001 From: syeopite <70992037+syeopite@users.noreply.github.com> Date: Thu, 18 Jul 2024 01:28:50 +0000 Subject: [PATCH 02/19] Make search bar responsive on mobile devices (#178) * Search: Apply bg on elements rather than container This changes allows moving the individual elements that composes the search bar around without losing the background on the elements. * Update search widget semantic structure * Make search bar design responsive on small screens * Fix border color * Polish --- static/style.css | 78 +++++++++++++++++++++++++++++++++++-------- templates/search.html | 45 +++++++++++++++---------- 2 files changed, 92 insertions(+), 31 deletions(-) diff --git a/static/style.css b/static/style.css index 8835417..58eb010 100644 --- a/static/style.css +++ b/static/style.css @@ -652,7 +652,6 @@ button.submit:hover > svg { stroke: var(--accent); } } #sort_options + #timeframe:not(#search_sort > #timeframe) { - margin-left: 10px; border-radius: 5px 0px 0px 5px; } @@ -662,24 +661,17 @@ button.submit:hover > svg { stroke: var(--accent); } } #search_sort { - background: var(--highlighted); border-radius: 5px; overflow: auto; } -#search_sort > #search { - border: 0; - background: transparent; +#search_sort > *, .search_widget_divider_box > *, .search_widget_divider_box #sort_options { + background: var(--highlighted); + font-size: 15px; } -#search_sort > *, #searchbox > * { font-size: 15px; } - -#search_sort > :not(:first-child), #search_sort > #sort_options { - margin: 0; - border-radius: 0; - border-right: 0; - border-left: 2px solid var(--background); - box-shadow: none; +#search_sort > #search { + border: 0; background: transparent; } @@ -698,6 +690,66 @@ button.submit:hover > svg { stroke: var(--accent); } margin-bottom: 20px; } +#search_sort > .search_widget_divider_box { + width: 100%; +} + +.search_widget_divider_box > * { + border-right: 2px var(--outside) solid; + margin: 0; +} + +.search_widget_divider_box { + display: flex; + align-items: center; + max-width: 100%; + border: 0; +} + +.search_widget_divider_box > #sort_options { + border-radius: 0; + box-shadow: none; +} + +/* When screen size is smaller than 480px we switch to a design better suited for mobile devices */ +@media screen and (max-width: 480px) { + #search_sort { + align-items: unset; + } + + .search_widget_divider_box > #search { + flex: 1; + min-width: unset; + border-right: 0; + border-bottom: 2px var(--outside) solid; + } + + #search:focus { + outline: 0; + } + + #search_sort > .search_widget_divider_box { + flex-wrap: wrap; + } + + .search_widget_divider_box > * { + width: 100%; + } + + #sort_options { + min-width: fit-content; + } + + .search_widget_divider_box > select:last-child { + border-right: 0; + } + + #sort_submit { + height: unset; + border-left: 2px var(--outside) solid; + } +} + #sort_options, #listing_options, main > * > footer > a { border-radius: 5px; align-items: center; diff --git a/templates/search.html b/templates/search.html index 3d91c76..ed72ac5 100644 --- a/templates/search.html +++ b/templates/search.html @@ -10,25 +10,34 @@ {% block content %}
- - {% if sub != "" %} -
- - +
+ +
+ {% if sub != "" %} +
+ + +
+ {% endif %} + {% if params.typed == "sr_user" %}{% endif %} + + {% if params.sort != "new" %} + + {% endif %} +
- {% endif %} - {% if params.typed == "sr_user" %}{% endif %} - {% if params.sort != "new" %}{% endif %} + + {% if !is_filtered %} From 9bdb5c896644ec47e9c8f79f644c8c39dbd762f0 Mon Sep 17 00:00:00 2001 From: Pim Date: Sun, 21 Jul 2024 16:22:40 +0200 Subject: [PATCH 03/19] feat: also blur text in post body for spoilers (#186) chore: simplify blur classes --- static/style.css | 22 ++++++++++++++++------ templates/utils.html | 20 +++++++++----------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/static/style.css b/static/style.css index 58eb010..2ab1eac 100644 --- a/static/style.css +++ b/static/style.css @@ -1019,11 +1019,25 @@ a.search_subreddit:hover { margin: auto; } -.post_nsfw_blur { +.post_blurred img, +.post_blurred svg, +.post_blurred video { filter: blur(1.5rem); } -.post_nsfw_blur:hover { +.post_blurred .post_body { + filter: blur(0.25rem); +} + +.post_blurred .post_thumbnail svg { + filter: blur(0.3rem); +} + +.post_blurred img:hover, +.post_blurred svg:hover, +.post_blurred video:hover, +.post_blurred .post_body:hover, +.post_blurred .post_thumbnail:hover svg { filter: none; } @@ -1199,10 +1213,6 @@ a.search_subreddit:hover { z-index: 0; } -.thumb_nsfw_blur { - filter: blur(0.3rem) -} - .post_thumbnail.no_thumbnail { background-color: var(--highlighted); } diff --git a/templates/utils.html b/templates/utils.html index c5ba45f..b88702b 100644 --- a/templates/utils.html +++ b/templates/utils.html @@ -64,7 +64,7 @@ {% macro post(post) -%} {% set post_should_be_blurred = post.flags.spoiler && prefs.blur_spoiler=="on" -%} -
+

r/{{ post.community }} • @@ -104,12 +104,11 @@ {% if post.media.height == 0 || post.media.width == 0 %} - Post image + Post image {% else %} @@ -123,7 +122,7 @@ {% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
-