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:
parent
c494fbec31
commit
db8b92ea55
@ -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 {
|
||||||
|
@ -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") }} </span><a href="/info" title="View instance information">ⓘ View instance info</a> <a href="https://github.com/redlib-org/redlib" title="View code on GitHub"><> 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"><> Code</a>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
@ -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 %}
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user