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
redlib-org · Jul 18, 2024 · 410872d · 410872d
1 parent c890e80
commit 410872d
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 31 deletions.
diff --git a/static/style.css b/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 {
-	border: 0;
-	background: transparent;
+#search_sort > *, .search_widget_divider_box > *, .search_widget_divider_box #sort_options {
+	background: var(--highlighted);
+	font-size: 15px;
 }
 
-#search_sort > *, #searchbox > * { font-size: 15px; }
-
-#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;
+#search_sort > #search {
+	border: 0;
 	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;

diff --git a/templates/search.html b/templates/search.html
@@ -10,25 +10,34 @@
 {% block content %}
 	<div id="column_one">
 		<form id="search_sort">
-			<input id="search" type="text" name="q" placeholder="Search" value="{{ params.q|safe }}" title="Search redlib">
-			{% if sub != "" %}
-			<div id="inside">
-				<input type="checkbox" name="restrict_sr" id="restrict_sr" {% if params.restrict_sr != "" %}checked{% endif %}>
-				<label for="restrict_sr" class="search_label">in r/{{ sub }}</label>
+			<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 %}>
+						<label for="restrict_sr" class="search_label">in r/{{ sub }}</label>
+					</div>
+					{% endif %}
+					{% 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"> 
+						{% call utils::options(params.t, ["hour", "day", "week", "month", "year", "all"], "all") %}
+					</select>
+					{% endif %}
+				</div>
 			</div>
-			{% endif %}
-			{% 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"> 
-				{% call utils::options(params.t, ["hour", "day", "week", "month", "year", "all"], "all") %}
-			</select>{% endif %}<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" />
-						&rarr;
-					</svg>
-				</button>
+
+			<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" />
+					&rarr;
+				</svg>
+			</button>
  		</form>
 
 		{% if !is_filtered %}