mirrors/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-04-03 04:57:38 +03:00
Code Issues Projects Releases Packages 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
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;