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

@@ -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;
+    display: flex;
-    grid-template-areas: "logo searchbox links";
 
-    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,
+@media screen and (min-width: 800px) {
-#sidebar {
+    #subreddit, #sidebar { min-width: 350px; }
-    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) {
+@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 {
         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 {

templates/base.html

@@ -74,12 +74,8 @@
 		<!-- FOOTER -->
 		{% block 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>
 			</footer>
 		{% endblock %}

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 %}

templates/utils.html

@@ -87,12 +87,12 @@
 		{% endif %}
 	</p>
 	<h1 class="post_title">
-		{{ post.title }}
 		{% 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"
 				class="post_flair"
 				style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call render_flair(post.flair.flair_parts) %}</a>
 		{% endif %}
+		{{ post.title }}
 		{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
 		{% if post.flags.spoiler %} <small class="spoiler">Spoiler</small>{% endif %}
 	</h1>