Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign/DRY search box on search pages #9146

Merged
merged 28 commits into from
Jun 12, 2024
Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
8607bf5
Changed search buttons to combined rectangle, darker button design
0simoo Apr 23, 2024
1a5ba53
small color adjustment to match the rest of the website
0simoo Apr 23, 2024
199cbc1
created new CSS class for search buttons and text inputs
0simoo Apr 24, 2024
7e93eef
minor change to comment title in buttonSearch.less
0simoo Apr 24, 2024
4a2b3e9
fix linter issues
0simoo Apr 24, 2024
7ae992f
Created template for new search button design
0simoo May 8, 2024
99b3fd0
new search design and changes to resolve comments
0simoo May 9, 2024
4c730c0
resolve comment for adding blank line
0simoo May 9, 2024
b129864
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] May 9, 2024
5ea014f
add blank line to search_bar.html to resolve comment
0simoo May 9, 2024
de1a708
for search buttons: changed background color, unified font sized, inc…
0simoo May 18, 2024
07a8d3a
Merge branch 'master' into fix-unify-search-buttons
0simoo May 22, 2024
4cb5e48
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] May 22, 2024
936186d
fix some height issues under the search bars except for the authors s…
0simoo May 22, 2024
c85f5b8
restore h6 style rule in work.less
0simoo May 22, 2024
e1bc16a
revert accidental changes in work.less
0simoo May 22, 2024
6e73b6d
revert changes made in prior commit in work.less
May 23, 2024
0f12539
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] May 23, 2024
cef5788
minor design changes and bug fixes to searchbox
0simoo May 25, 2024
60184fc
Apply suggestions from code review
RayBB May 26, 2024
6e3c603
revert work.less to master
RayBB May 26, 2024
69a59bc
fix missing >
RayBB May 26, 2024
1423eb1
Apply suggestions from code review
cdrini Jun 11, 2024
ed9feba
Update static/css/components/searchbox.less
0simoo Jun 12, 2024
db6dd7d
move import of searchbox.less to page-user from buttonsAndLinks
0simoo Jun 12, 2024
22b39ae
nesting searchbox style rules and also added a comment to page-user.less
0simoo Jun 12, 2024
9e01e82
Feedback from code review
cdrini Jun 12, 2024
459cf00
Update static/css/components/searchbox.less
cdrini Jun 12, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion openlibrary/templates/search/advancedsearch.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ <h1>$_('Advanced Search')</h1>
<input type="text" name="publisher" id="qtop-publisher" placeholder="" size="35">
</div>
</fieldset>
<button type="submit" class="larger">$_('Search')</button>
<button type="submit" class="search-btn">$_('Search')</button>
<div class="searchPlus">
<a href="https://openlibrary.org/search/howto">$_('How to search?')</a>
<a href="/search/inside">$_('Full Text Search?')</a>
Expand Down
9 changes: 5 additions & 4 deletions openlibrary/templates/search/authors.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ <h1>$_("Search Authors")</h1>
<div id="contentBody">
$:macros.SearchNavigation()

0simoo marked this conversation as resolved.
Show resolved Hide resolved
<form class="siteSearch olform" action="">
<input type="text" class="larger" name="q" size="100" value="$q"/>
<input type="submit" class="larger" value="$_('Search')"/>
</form>
<div class="section">
<form class="siteSearch olform" action="">
$:render_template("search/search_bar")
</form>
</div>
</div>

<div id="contentMeta">
Expand Down
9 changes: 5 additions & 4 deletions openlibrary/templates/search/inside.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ <h1>$_("Search Inside")</h1>

<div id="contentBody">
$:macros.SearchNavigation()
<form class="siteSearch olform" action="/search/inside">
<input type="text" class="larger" name="q" size="100" value="$q"/>
<input type="submit" class="larger" value="$_('Search')">
</form>
<div class="section">
<form class="siteSearch olform" action="/search/inside">
$:render_template("search/search_bar")
</form>
</div>
$ num_found = 0
$if q:
$if results and 'error' not in results and results['hits']:
Expand Down
9 changes: 5 additions & 4 deletions openlibrary/templates/search/lists.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ <h1>$_("Search Lists")</h1>

<div id="contentBody">
$:macros.SearchNavigation()
<form class="siteSearch olform" action="/search/lists">
<input type="text" class="larger" name="q" size="100" value="$q"/>
<input type="submit" class="larger" value="$_('Search')">
</form>
<div class="section">
<form class="siteSearch olform" action="/search/lists">
$:render_template("search/search_bar")
</form>
</div>

$if lists:
<div class="mybooks-list">
Expand Down
4 changes: 4 additions & 0 deletions openlibrary/templates/search/search_bar.html
RayBB marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="search-div">
<input type="text" class="search-input" name="q" size="100" placeholder="$_('Search')" aria-label="Search" autocomplete="off"><!--
--><input type="submit" value="" class="search-btn-icon" aria-label="Search submit">
RayBB marked this conversation as resolved.
Show resolved Hide resolved
</div>
3 changes: 1 addition & 2 deletions openlibrary/templates/search/subjects.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ <h1>
$:macros.SearchNavigation()
<div class="section">
<form class="siteSearch olform" action="">
<input type="text" class="larger" name="q" size="100" value="$q"/>
<input type="submit" class="larger" value="$_('Search')"/>
$:render_template("search/search_bar")
</form>
</div>

Expand Down
3 changes: 1 addition & 2 deletions openlibrary/templates/work_search.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ <h1>$_("Search Books")</h1>

<form method="get" action="/search" class="siteSearch olform">
<label for="q" class="hidden">$_('Keywords')</label>
<input type="text" name="q" id="q" value="$q_param" size="100"/>
<button type="submit" class="larger" id="searchsubmit">$_("Search")</button>
$:render_template("search/search_bar")
<span class="mode-options">
<input type="radio" name="mode" value="everything" id="mode-search-everything" class="search-mode">
<label for="mode-search-everything">$_('Everything')</label>
Expand Down
51 changes: 51 additions & 0 deletions static/css/components/buttonSearch.less
RayBB marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* Search button and text input
* [TODO: Link to documentation]
*/

.search-div {
0simoo marked this conversation as resolved.
Show resolved Hide resolved
// @grey-fafafa;
background-color: @white;
border: 1px solid @dark-beige;
border-radius: .3em;
position: relative;
display: inline-flex;
align-items: center;
padding: .2%;
padding-left: .5%;
width: 50%;
}

.search-btn-icon {
RayBB marked this conversation as resolved.
Show resolved Hide resolved
background: url(/static/images/search-icon.svg) center no-repeat;
width: 35px;
height: 45px;
cursor: pointer;
border: 0;
flex: 0 0 auto;
}

.search-input {
margin: 0 !important;
border: 0;
outline: none;
RayBB marked this conversation as resolved.
Show resolved Hide resolved
background: transparent;
color: @grey !important;
flex-grow: 1;
font-size: 1em !important;
height: 45px;
max-width: 93% !important;
}

.search-btn {
cdrini marked this conversation as resolved.
Show resolved Hide resolved
width: auto;
display: inline-block;
margin: 0;
height: 38px;
border: 1px solid @dark-beige;
border-radius: 6px;
vertical-align: middle;
background-color: @light-beige;
color: @grey;
font-size: 18px !important;
}
1 change: 1 addition & 0 deletions static/css/components/buttonsAndLinks.less
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,4 @@ button {
@import "components/buttonLink.less";
@import "components/buttonGhost.less";
@import "components/buttonBtn.less";
@import "components/buttonSearch.less";
12 changes: 6 additions & 6 deletions static/css/components/work.less
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ div.editionAbout {

p {
margin: 1em 0;
font-size: @font-size-body-medium;
font-size: 13px;
RayBB marked this conversation as resolved.
Show resolved Hide resolved
}
p.book-description {
margin: 0;
Expand Down Expand Up @@ -91,7 +91,7 @@ textarea[name="edition--notes"] + h3 + .wmd-preview,
.edition-notes,
textarea[name="work--description"] + h3 + .wmd-preview,
.book-description {
font-size: @font-size-label-medium;
font-size: .8rem;
margin-top: 5px;
margin-bottom: 20px;

Expand Down Expand Up @@ -131,7 +131,7 @@ textarea[name="work--description"] + h3 + .wmd-preview,
}

0simoo marked this conversation as resolved.
Show resolved Hide resolved
.section h6 {
font-size: @font-size-label-medium;
font-size: .8em;
}

.edition-overview {
Expand Down Expand Up @@ -169,7 +169,7 @@ a.section-anchor {
}

.meta dt, .meta dd {
font-size: @font-size-label-medium;
font-size: 12px;
}

.book-subtitle{
Expand Down Expand Up @@ -250,14 +250,14 @@ div.editionTools {
margin: 0 4px;
border: 1px solid @lighter-grey;
border-radius: 5px;
font-size: @font-size-body-medium;
font-size: .8em;
word-break: break-word;
text-align: center;
min-width: 100px;

div {
margin-bottom: 4px;
font-size: @font-size-label-medium;
font-size: .9em;
color: @grey;
word-wrap: break-word;
}
Expand Down
Loading