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
This commit is contained in:
Butter Cat 2024-09-05 11:59:21 -04:00 committed by GitHub
parent c494fbec31
commit db8b92ea55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 63 additions and 44 deletions

View File

@ -137,6 +137,7 @@ input {
margin: 0; margin: 0;
color: var(--text); color: var(--text);
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
word-wrap: anywhere;
} }
html.fixed_navbar { html.fixed_navbar {
@ -166,10 +167,8 @@ body.fixed_navbar {
} }
nav { nav {
display: grid; display: flex;
grid-template-areas: "logo searchbox links";
justify-content: space-between;
align-items: center; align-items: center;
color: var(--accent); color: var(--accent);
@ -202,15 +201,18 @@ nav #code > svg {
} }
nav #logo { nav #logo {
grid-area: logo;
white-space: nowrap; white-space: nowrap;
margin-right: 5px; margin-right: 5px;
flex-grow: 1;
flex-basis: 0;
} }
nav #links { nav #links {
grid-area: links;
margin-left: 10px; margin-left: 10px;
display: flex; display: flex;
flex-grow: 1;
flex-basis: 0;
justify-content: flex-end;
} }
nav #links svg { nav #links svg {
@ -358,10 +360,13 @@ main {
#column_one { #column_one {
width: 100%; width: 100%;
max-width: 750px;
border-radius: 5px; border-radius: 5px;
max-width: 750px;
overflow: inherit; overflow: inherit;
} }
@media screen and (max-width: 800px) {
#column_one { max-width: unset; }
}
/* Body footer. */ /* Body footer. */
body > footer { body > footer {
@ -374,14 +379,13 @@ body > footer {
bottom: 0; bottom: 0;
} }
.footer-button { .footer-buttons {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
box-sizing: border-box; box-sizing: border-box;
color: var(--text); color: var(--text);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
padding-left: 1em;
opacity: 0.8; opacity: 0.8;
} }
@ -458,9 +462,8 @@ aside {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
} }
#subreddit, @media screen and (min-width: 800px) {
#sidebar { #subreddit, #sidebar { min-width: 350px; }
min-width: 350px;
} }
#user *, #user *,
@ -522,7 +525,9 @@ aside {
#user_actions { #user_actions {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px; }
@media screen and (max-width: 279px) {
#sub_actions { display: unset; }
} }
#user_details > label, #user_details > label,
@ -689,6 +694,7 @@ select,
display: flex; display: flex;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: 5px; border-radius: 5px;
margin-bottom: 0;
} }
#searchbox > *, #searchbox > *,
@ -698,9 +704,12 @@ select,
#search { #search {
border-right: 2px var(--outside) solid; border-right: 2px var(--outside) solid;
min-width: 0;
flex-grow: 1; flex-grow: 1;
} }
@media screen and (max-width: 800px) {
#search { width: 0; }
#search.commentQuery { width: unset; }
}
#inside { #inside {
display: flex; display: flex;
@ -779,7 +788,7 @@ button.submit:hover > svg {
#sort, #sort,
#search_sort { #search_sort {
display: flex; display: flex;
align-items: center; align-items: stretch;
margin-bottom: 20px; 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 */ /* When screen size is smaller than 480px we switch to a design better suited for mobile devices */
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#search_sort {
align-items: unset;
}
.search_widget_divider_box > #search { .search_widget_divider_box > #search {
flex: 1; flex: 1;
min-width: unset; min-width: unset;
@ -834,7 +839,7 @@ button.submit:hover > svg {
} }
#sort_submit { #sort_submit {
height: unset; height: auto;
border-left: 2px var(--outside) solid; border-left: 2px var(--outside) solid;
} }
} }
@ -858,6 +863,7 @@ main > * > footer > a {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: 0.2s background; transition: 0.2s background;
word-wrap: normal;
} }
#sort_options > a.selected, #sort_options > a.selected,
@ -1035,6 +1041,8 @@ a.search_subreddit:hover {
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
vertical-align: text-top;
line-height: 1.6;
} }
.awards { .awards {
@ -1259,6 +1267,7 @@ a.search_subreddit:hover {
#comment_count { #comment_count {
font-weight: 500; font-weight: 500;
opacity: 0.9; opacity: 0.9;
align-self: center;
} }
#comment_count > #sorted_by { #comment_count > #sorted_by {
@ -1282,7 +1291,7 @@ a.search_subreddit:hover {
display: auto; display: auto;
} }
@media screen and (min-width: 481px) { @media screen and (min-width: 508px) {
.mobile_item { .mobile_item {
display: none; display: none;
} }
@ -1894,10 +1903,6 @@ th {
/* Mobile */ /* Mobile */
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
body.fixed_navbar {
padding-top: 120px;
}
main { main {
flex-direction: column-reverse; flex-direction: column-reverse;
padding: 10px; padding: 10px;
@ -1906,9 +1911,11 @@ th {
} }
nav { nav {
display: grid;
grid-template-areas: "logo links" "searchbox searchbox"; grid-template-areas: "logo links" "searchbox searchbox";
padding: 10px; padding: 5px 10px 0;
width: calc(100% - 20px); width: calc(100% - 20px);
margin: 0;
} }
nav #links { nav #links {
@ -1941,8 +1948,19 @@ th {
margin: 0; margin: 0;
max-width: 100%; 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 { #sidebar {
margin: 20px 0; margin: 20px 0;
} }
@ -1951,14 +1969,19 @@ th {
margin-bottom: 5px; margin-bottom: 5px;
} }
#searchbox { #searchbox {
width: calc(100vw - 35px); width: calc(100vw - 20px);
margin-bottom: 10px;
} }
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 580px) {
body.fixed_navbar { #commentQueryForms {
padding-top: 100px; display: initial;
justify-content: initial;
} }
}
@media screen and (max-width: 507px) {
#version { #version {
display: none; display: none;
} }
@ -2052,11 +2075,12 @@ th {
} }
.comment_score { .comment_score {
min-width: 32px; min-width: 34px;
height: 20px; height: 20px;
font-size: 15px; font-size: 12px;
padding: 7px 0px; padding: 7px 0px;
margin-right: -5px; margin-right: -5px;
align-content: center;
} }
#post_links > li { #post_links > li {
@ -2080,11 +2104,6 @@ th {
.popup-inner { .popup-inner {
max-width: 80%; max-width: 80%;
} }
#commentQueryForms {
display: initial;
justify-content: initial;
}
} }
.quality-selector { .quality-selector {

View File

@ -74,12 +74,8 @@
<!-- FOOTER --> <!-- FOOTER -->
{% block footer %} {% block footer %}
<footer> <footer>
<p id="version">v{{ env!("CARGO_PKG_VERSION") }}</p> <div class="footer-buttons">
<div class="footer-button"> <p><span id="version">v{{ env!("CARGO_PKG_VERSION") }}&emsp;</span><a href="/info" title="View instance information">ⓘ View instance info</a>&emsp;<a href="https://github.com/redlib-org/redlib" title="View code on GitHub">&lt;&gt; Code</a></p>
<a href="/info" title="View instance information">ⓘ View instance info</a>
</div>
<div class="footer-button">
<a href="https://github.com/redlib-org/redlib" title="View code on GitHub">&lt;&gt; Code</a>
</div> </div>
</footer> </footer>
{% endblock %} {% endblock %}

View File

@ -3,6 +3,10 @@
{% block title %}Redlib Settings{% endblock %} {% block title %}Redlib Settings{% endblock %}
{% block subscriptions %}
{% call utils::sub_list("") %}
{% endblock %}
{% block search %} {% block search %}
{% call utils::search("".to_owned(), "") %} {% call utils::search("".to_owned(), "") %}
{% endblock %} {% endblock %}

View File

@ -87,12 +87,12 @@
{% endif %} {% endif %}
</p> </p>
<h1 class="post_title"> <h1 class="post_title">
{{ post.title }}
{% if post.flair.flair_parts.len() > 0 %} {% if post.flair.flair_parts.len() > 0 %}
<a href="/r/{{ post.community }}/search?q=flair_name%3A%22{{ post.flair.text }}%22&restrict_sr=on" <a href="/r/{{ post.community }}/search?q=flair_name%3A%22{{ post.flair.text }}%22&restrict_sr=on"
class="post_flair" class="post_flair"
style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call render_flair(post.flair.flair_parts) %}</a> style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call render_flair(post.flair.flair_parts) %}</a>
{% endif %} {% endif %}
{{ post.title }}
{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %} {% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
{% if post.flags.spoiler %} <small class="spoiler">Spoiler</small>{% endif %} {% if post.flags.spoiler %} <small class="spoiler">Spoiler</small>{% endif %}
</h1> </h1>