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

@@ -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 {
+#search_sort > *, .search_widget_divider_box > *, .search_widget_divider_box #sort_options {
-	border: 0;
+	background: var(--highlighted);
-	background: transparent;
+	font-size: 15px;
 }
 
-#search_sort > *, #searchbox > * { font-size: 15px; }
+#search_sort > #search {
-
+	border: 0;
-#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;
 	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;

templates/search.html

@@ -10,7 +10,9 @@
 {% block content %}
 	<div id="column_one">
 		<form id="search_sort">
+			<div class="search_widget_divider_box">
 				<input id="search" type="text" name="q" placeholder="Search" value="{{ params.q|safe }}" title="Search redlib">
+				<div class="search_widget_divider_box">
 					{% if sub != "" %}
 					<div id="inside">
 						<input type="checkbox" name="restrict_sr" id="restrict_sr" {% if params.restrict_sr != "" %}checked{% endif %}>
@@ -20,9 +22,16 @@
 					{% if params.typed == "sr_user" %}<input type="hidden" name="type" value="sr_user">{% endif %}
 					<select id="sort_options" name="sort" title="Sort results by">
 						{% call utils::options(params.sort, ["relevance", "hot", "top", "new", "comments"], "") %}
-			</select>{% if params.sort != "new" %}<select id="timeframe" name="t" title="Timeframe"> 
+					</select>
+					{% if params.sort != "new" %}
+					<select id="timeframe" name="t" title="Timeframe"> 
 						{% call utils::options(params.t, ["hour", "day", "week", "month", "year", "all"], "all") %}
-			</select>{% endif %}<button id="sort_submit" class="submit">
+					</select>
+					{% endif %}
+				</div>
+			</div>
+
+			<button id="sort_submit" class="submit">
 				<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
 					<path d="M20 50 H100" />
 					<path d="M75 15 L100 50 L75 85" />