Improve the layout of the search page on mobile

This commit is contained in:
ormai 2023-09-10 21:31:34 +02:00 committed by MatthieuBarbu
parent 4e0967df92
commit 8de723e2fd
2 changed files with 11 additions and 8 deletions

View File

@ -90,6 +90,7 @@ button.category_button {
} }
#search_logo { #search_logo {
padding: 0.5rem 10px 0 10px;
grid-area: logo; grid-area: logo;
display: flex; display: flex;
align-items: center; align-items: center;
@ -122,6 +123,7 @@ button.category_button {
} }
#search_view { #search_view {
padding: 0.5rem 2.8rem 0 0;
grid-area: search; grid-area: search;
} }
@ -291,7 +293,6 @@ html.no-js #clear_search.hide_if_nojs {
.search_box { .search_box {
width: 98%; width: 98%;
display: flex; display: flex;
margin: 0 auto;
} }
#q { #q {
@ -300,7 +301,8 @@ html.no-js #clear_search.hide_if_nojs {
} }
.search_filters { .search_filters {
margin: 0; margin: 0 10px;
padding: 0.5rem 0;
} }
.category { .category {

View File

@ -524,8 +524,7 @@ article[data-vim-selected].category-social {
"pagination sidebar"; "pagination sidebar";
} }
#results #sidebar *:first-child, #results #sidebar *:first-child {
#results #urls *:first-child {
margin-top: 0; margin-top: 0;
} }
@ -740,7 +739,7 @@ summary.title {
#links_on_top { #links_on_top {
position: absolute; position: absolute;
.ltr-right(1.8rem); .ltr-right(1rem);
.ltr-text-align-right(); .ltr-text-align-right();
top: 9.2rem; top: 9.2rem;
padding: 0; padding: 0;
@ -922,7 +921,7 @@ summary.title {
} }
#main_results div#results { #main_results div#results {
margin: 1rem auto 0 auto; margin: 0 auto;
justify-content: center; justify-content: center;
display: grid; display: grid;
grid-template-columns: @results-width; grid-template-columns: @results-width;
@ -1036,7 +1035,7 @@ summary.title {
#main_results div#results { #main_results div#results {
grid-template-columns: 100%; grid-template-columns: 100%;
margin: 1rem 0 0 0; margin: 0 auto;
} }
#links_on_top { #links_on_top {
@ -1065,7 +1064,9 @@ summary.title {
.result { .result {
background: var(--color-result-background); background: var(--color-result-background);
margin: 1rem 0; border: 1px solid var(--color-result-background);
margin: 1rem 10px;
.rounded-corners;
} }
.result-images { .result-images {