iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 4 Wiki Activity

Make search bar responsive on mobile devices (#178)

Browse Source 
* 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
This commit is contained in:
syeopite 2024-07-18 01:28:50 +00:00 committed by GitHub
parent c890e809b7
commit 410872d988
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 92 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
static/style.css
View File

@ -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;

13
templates/search.html
View File

@ -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" />