From db8b92ea5574f1f66a8599c868723779ed492ea2 Mon Sep 17 00:00:00 2001 From: Butter Cat Date: Thu, 5 Sep 2024 11:59:21 -0400 Subject: [PATCH] Fix a whole bunch of styling bugs (#193) * Fix a whole bunch of mobile styling bugs * Make searchbox scroll fix only apply in mobile mode to prevent bug * Remove the min-width requirement for the main column This was meant to be removed already, this is what fixes posts having an odd right side gap before swapping to the mobile layout * Make margins consistent between fixed and unfixed navbar settings * Remove some empty space from deleted option * Make mobile layout post width fix only apply in mobile mode to prevent bug * Make sure some options only get applied to the elements that need them, also fix the margins on the settings page * Move search comments option before it starts touching the sort options and wrapping the x amount of comments text * Trigger the even further compacted layout a little earlier, right before text begins wrapping in odd ways * In the extra small mobile layout make give up/downvote numbers enough room so they aren't clipping out of their box * Fix https://github.com/redlib-org/redlib/issues/172 * Properly center search box instead of having it slightly skewed * Undo word wrapping since it breaks the sorting options and the only other viable setting has an absolute conniption on Chrome for some reason * Readd word wrapping and just force it to normal for the sorting section * Make post flair line up with title * Make post flair position consistent * Make footer text properly horizontally centered in mobile mode and fix slight vertical misalignment issues * Make feeds button appear in settings menu to keep navbar looking consistent * Fix extra navbar padding on search page * Reduce gap between navbar and content in mobile mode * Reduce gap between navbar and content in mobile mode --- static/style.css | 93 +++++++++++++++++++++++++---------------- templates/base.html | 8 +--- templates/settings.html | 4 ++ templates/utils.html | 2 +- 4 files changed, 63 insertions(+), 44 deletions(-) diff --git a/static/style.css b/static/style.css index 3ab98b4..3592552 100644 --- a/static/style.css +++ b/static/style.css @@ -137,6 +137,7 @@ input { margin: 0; color: var(--text); font-family: "Inter", sans-serif; + word-wrap: anywhere; } html.fixed_navbar { @@ -166,10 +167,8 @@ body.fixed_navbar { } nav { - display: grid; - grid-template-areas: "logo searchbox links"; + display: flex; - justify-content: space-between; align-items: center; color: var(--accent); @@ -202,15 +201,18 @@ nav #code > svg { } nav #logo { - grid-area: logo; white-space: nowrap; margin-right: 5px; + flex-grow: 1; + flex-basis: 0; } nav #links { - grid-area: links; margin-left: 10px; display: flex; + flex-grow: 1; + flex-basis: 0; + justify-content: flex-end; } nav #links svg { @@ -358,10 +360,13 @@ main { #column_one { width: 100%; - max-width: 750px; border-radius: 5px; + max-width: 750px; overflow: inherit; } +@media screen and (max-width: 800px) { + #column_one { max-width: unset; } +} /* Body footer. */ body > footer { @@ -374,14 +379,13 @@ body > footer { bottom: 0; } -.footer-button { +.footer-buttons { align-items: center; border-radius: 0.25rem; box-sizing: border-box; color: var(--text); cursor: pointer; display: inline-flex; - padding-left: 1em; opacity: 0.8; } @@ -458,9 +462,8 @@ aside { border-radius: 5px; overflow: hidden; } -#subreddit, -#sidebar { - min-width: 350px; +@media screen and (min-width: 800px) { + #subreddit, #sidebar { min-width: 350px; } } #user *, @@ -522,7 +525,9 @@ aside { #user_actions { display: grid; grid-template-columns: repeat(2, 1fr); - grid-column-gap: 20px; +} +@media screen and (max-width: 279px) { + #sub_actions { display: unset; } } #user_details > label, @@ -689,6 +694,7 @@ select, display: flex; box-shadow: var(--shadow); border-radius: 5px; + margin-bottom: 0; } #searchbox > *, @@ -698,9 +704,12 @@ select, #search { border-right: 2px var(--outside) solid; - min-width: 0; flex-grow: 1; } +@media screen and (max-width: 800px) { + #search { width: 0; } + #search.commentQuery { width: unset; } +} #inside { display: flex; @@ -779,7 +788,7 @@ button.submit:hover > svg { #sort, #search_sort { display: flex; - align-items: center; + align-items: stretch; margin-bottom: 20px; } @@ -806,10 +815,6 @@ button.submit:hover > svg { /* 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; @@ -834,7 +839,7 @@ button.submit:hover > svg { } #sort_submit { - height: unset; + height: auto; border-left: 2px var(--outside) solid; } } @@ -858,6 +863,7 @@ main > * > footer > a { text-align: center; cursor: pointer; transition: 0.2s background; + word-wrap: normal; } #sort_options > a.selected, @@ -1035,6 +1041,8 @@ a.search_subreddit:hover { border-radius: 5px; font-size: 12px; font-weight: bold; + vertical-align: text-top; + line-height: 1.6; } .awards { @@ -1259,6 +1267,7 @@ a.search_subreddit:hover { #comment_count { font-weight: 500; opacity: 0.9; + align-self: center; } #comment_count > #sorted_by { @@ -1282,7 +1291,7 @@ a.search_subreddit:hover { display: auto; } -@media screen and (min-width: 481px) { +@media screen and (min-width: 508px) { .mobile_item { display: none; } @@ -1894,10 +1903,6 @@ th { /* Mobile */ @media screen and (max-width: 800px) { - body.fixed_navbar { - padding-top: 120px; - } - main { flex-direction: column-reverse; padding: 10px; @@ -1906,9 +1911,11 @@ th { } nav { + display: grid; grid-template-areas: "logo links" "searchbox searchbox"; - padding: 10px; + padding: 5px 10px 0; width: calc(100% - 20px); + margin: 0; } nav #links { @@ -1941,8 +1948,19 @@ th { margin: 0; max-width: 100%; } + #user { margin: 0 0 20px; } + + body.fixed_navbar { + min-height: calc(100vh - 75px); + padding-top: 45px; + #subreddit { margin: 49px 0 0; } + #user { margin: 49px 0 20px 0; } + #settings { margin-top: 48px; } + div.post.highlighted { margin-top: 49px; } + main:not(:has(div + aside)) { #sort { margin-top: 49px; } } + #column_one:has(div.post.highlighted + #commentQueryForms) { #sort { margin-top: 0 } } + } - #user, #sidebar { margin: 20px 0; } @@ -1951,14 +1969,19 @@ th { margin-bottom: 5px; } #searchbox { - width: calc(100vw - 35px); + width: calc(100vw - 20px); + margin-bottom: 10px; } } -@media screen and (max-width: 480px) { - body.fixed_navbar { - padding-top: 100px; +@media screen and (max-width: 580px) { + #commentQueryForms { + display: initial; + justify-content: initial; } +} + +@media screen and (max-width: 507px) { #version { display: none; } @@ -2052,11 +2075,12 @@ th { } .comment_score { - min-width: 32px; + min-width: 34px; height: 20px; - font-size: 15px; + font-size: 12px; padding: 7px 0px; margin-right: -5px; + align-content: center; } #post_links > li { @@ -2080,11 +2104,6 @@ th { .popup-inner { max-width: 80%; } - - #commentQueryForms { - display: initial; - justify-content: initial; - } } .quality-selector { diff --git a/templates/base.html b/templates/base.html index 1c3ef18..bb11560 100644 --- a/templates/base.html +++ b/templates/base.html @@ -74,12 +74,8 @@ {% block footer %} {% endblock %} diff --git a/templates/settings.html b/templates/settings.html index 434f0d2..3940cc7 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -3,6 +3,10 @@ {% block title %}Redlib Settings{% endblock %} +{% block subscriptions %} + {% call utils::sub_list("") %} +{% endblock %} + {% block search %} {% call utils::search("".to_owned(), "") %} {% endblock %} diff --git a/templates/utils.html b/templates/utils.html index b88702b..879f138 100644 --- a/templates/utils.html +++ b/templates/utils.html @@ -87,12 +87,12 @@ {% endif %}

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