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.

Sign up for GitHub

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

Jump to bottom

[WIP]change in Search bar on focus #155

Closed
wants to merge 8 commits into from
Closed

[WIP]change in Search bar on focus #155

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bc672ac
Merge pull request #5 from edamontology/main
raashika03 Apr 28, 2021
94770d4
Changing search icon position
raashika03 Apr 28, 2021
ce0370d
activating cancel button, providing transition to search box
raashika03 Apr 28, 2021
46ab738
Changed theme-button position
raashika03 Apr 28, 2021
febf8d3
Update index.css
raashika03 Apr 28, 2021
35f37fa
Changed 6.5em to 26em to show all the placeholder text which is impor…
raashika03 Apr 28, 2021
400e938
Reverting changes for theme-button position
raashika03 Apr 29, 2021
342d3ed
Update index.html
raashika03 Apr 29, 2021
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
17 changes: 16 additions & 1 deletion css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,22 @@
.flex-column{
flex-direction: column;
}

input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rather not use it as https://developer.mozilla.org/fr/docs/Web/CSS/::-webkit-search-cancel-button and also we have to move the glass, I rather stay with standard web stuf when we can.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok then we can set that cancel button dynamically only, because bootstrap doesn't renders that to be displayed by default. But I guess cancel button is not so useful so, I should leave this.
I looked for many approaches then still bootstrap hasn't fixed it. So should I leave this or create dynamically using JS.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See this discussion bootstrap hides it purposely.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed I wasn't aware of that. So if even Bootstrap says we should not have cancel button, we should not have it.

As a conclusion no css changes, not html changes ? Just close this PR ?

}
input[type="search"] {
width: 26em;
-webkit-transition: width 0.1s ease-in-out;
transition: width 0.1s ease-in-out;
}
input[type="search"]:focus {
width: 60vw;
}
@media screen and (min-width: 1200px) {
input[type="search"]:focus {
width: 50vw;
}
}
.meta-info>*{
font-size:0;
color:white;
Expand Down
20 changes: 9 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,17 +120,20 @@ <h1 id="pageTitle">EDAM ontology</h1>
</div>
</div>
<div>
<button class="btn-toggle" title="Change theme mode">
<svg style="fill: var(--color-profile-color-modes-toggle-moon);" aria-hidden="true" width="20" height="20" viewBox="0 0 14 13" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.52208 7.71754C7.5782 7.71754 10.0557 5.24006 10.0557 2.18394C10.0557 1.93498 10.0392 1.68986 10.0074 1.44961C9.95801 1.07727 10.3495 0.771159 10.6474 0.99992C12.1153 2.12716 13.0615 3.89999 13.0615 5.89383C13.0615 9.29958 10.3006 12.0605 6.89485 12.0605C3.95334 12.0605 1.49286 10.001 0.876728 7.24527C0.794841 6.87902 1.23668 6.65289 1.55321 6.85451C2.41106 7.40095 3.4296 7.71754 4.52208 7.71754Z"></path>
</svg>
</button>
<div class="btn-group" role="group" style="width: 100%;z-index:1">
<input
type="text"
type="search"
tabindex="1"
class="form-control ui-autocomplete-input search-term"
placeholder="Search for concepts here, enter at least two letters"
style="font-family: FontAwesome, Arial;"
class="form-control ui-autocomplete-input search-term"
placeholder="&#xf002; Search for concepts here, enter at least two letters"
onclick="$(this).select();"
>
<span class="input-group-text border-0" id="search-addon" >
<i class="glyphicon glyphicon-search form-control-feedback text-muted" style="font-size: 15px;"></i>
</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -182,11 +185,6 @@ <h1 id="pageTitle">EDAM ontology</h1>
</div>
</div>
</div>
<button class="btn-toggle" title="Change theme mode">
<svg style="fill: var(--color-profile-color-modes-toggle-moon);" aria-hidden="true" width="20" height="20" viewBox="0 0 14 13" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.52208 7.71754C7.5782 7.71754 10.0557 5.24006 10.0557 2.18394C10.0557 1.93498 10.0392 1.68986 10.0074 1.44961C9.95801 1.07727 10.3495 0.771159 10.6474 0.99992C12.1153 2.12716 13.0615 3.89999 13.0615 5.89383C13.0615 9.29958 10.3006 12.0605 6.89485 12.0605C3.95334 12.0605 1.49286 10.001 0.876728 7.24527C0.794841 6.87902 1.23668 6.65289 1.55321 6.85451C2.41106 7.40095 3.4296 7.71754 4.52208 7.71754Z"></path>
</svg>
</button>
<div class="pull-right">
<dl class="dl-horizontal meta-info">
<dt>Current version</dt>
Expand Down