Surround searchbox inputs with a div for styling #3616
Conversation
| <style> | ||
| .searchForm-inputs { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .searchForm-inputs .searchForm-query { | ||
| width: auto; | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| @media screen and (min-width: 768px) { | ||
| .searchForm-inputs .searchForm-query { | ||
| flex-grow: 0; | ||
| } | ||
| } | ||
| </style> |
There was a problem hiding this comment.
These styles are just an example and would be removed before merge. The effect is to let the main search box grow on mobile widths to take up whatever space it has available, but to still fit the Find button on the same line if there is nothing else in between. It's nice space saver.
| echo '<input type="hidden" name="sort" value="' . $this->escapeHtmlAttr($lastSort) . '">'; | ||
| } | ||
| ?> | ||
| </div> |
There was a problem hiding this comment.
I'm not actually sure how much should be included within the div. I think everything within it here is inline, and that the filters below are supposed to be below.
|
Thanks, @maccabeelevine -- I'll defer to @crhallberg on this one (though would also welcome opinions from others). Chris is out of office today and might need a little time to catch up after he returns tomorrow, but hopefully you'll hear from him fairly soon. :-) |
Thanks. I've removed the example CSS. |
|
I reviewed the test branch in all three themes by adding filters and resizing the browser window from widest to narrowest. I compared behavior between test and dev in each of those environments. Everything looked identical to me between test and dev in each of the themes. Unless I'm missing something, I would say that this is ready to merge. |
|
Thanks, everyone! |
This is essentially a two-line PR that encloses the searchbox inputs with a named div so that they can be styled. For example the line of inputs could be a flexbox or grid layout.
Currently those elements share the same parent element
<form id="searchForm"with the search tabs (among other stuff), so they are difficult to style.