-
Notifications
You must be signed in to change notification settings - Fork 483
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
New Search Modal UI #2202
Merged
Merged
New Search Modal UI #2202
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
97f261c
- Added a fresh new Search UI
Hetarth02 44b191f
- Updated CHANGELOG.md
Hetarth02 73e5ad7
Merge branch 'master' of https://github.com/Hetarth02/Documenter.jl i…
Hetarth02 184d9f0
- Removed commits for other fixes
Hetarth02 a43afe9
- Added new code comments for better understanding
Hetarth02 ffaa26f
Merge branch 'master' of https://github.com/Hetarth02/Documenter.jl i…
Hetarth02 e8dc4ff
- Made the modal full size for all screen widths
Hetarth02 653d48c
Merge branch 'master' of https://github.com/Hetarth02/Documenter.jl i…
Hetarth02 1004f75
- Remove render search page function
Hetarth02 dc15b89
Merge branch 'master' of https://github.com/Hetarth02/Documenter.jl i…
Hetarth02 7726507
update issue references
mortenpi File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,100 @@ | ||
| let searchbox = document.querySelector("#documenter-search-query"); | ||
| let sidebar = document.querySelector(".docs-sidebar"); | ||
| // libraries: jquery | ||
| // arguments: $ | ||
|
|
||
| let search_modal_header = ` | ||
| <header class="modal-card-head gap-2 is-align-items-center is-justify-content-space-between w-100 px-3"> | ||
| <div class="field mb-0 w-100"> | ||
| <p class="control has-icons-right"> | ||
| <input class="input documenter-search-input" type="text" placeholder="Search" /> | ||
| <span class="icon is-small is-right has-text-primary-dark"> | ||
| <i class="fas fa-magnifying-glass"></i> | ||
| </span> | ||
| </p> | ||
| </div> | ||
| <div class="icon is-size-4 is-clickable close-search-modal"> | ||
| <i class="fas fa-times"></i> | ||
| </div> | ||
| </header> | ||
| `; | ||
|
|
||
| let initial_search_body = ` | ||
| <div class="has-text-centered my-5 py-5">Type something to get started!</div> | ||
| `; | ||
|
|
||
| let search_modal_footer = ` | ||
| <footer class="modal-card-foot"> | ||
| <span> | ||
| <kbd class="search-modal-key-hints">Ctrl</kbd> + | ||
| <kbd class="search-modal-key-hints">/</kbd> to search | ||
| </span> | ||
| <span class="ml-3"> <kbd class="search-modal-key-hints">esc</kbd> to close </span> | ||
| </footer> | ||
| `; | ||
|
|
||
| $(document.body).append( | ||
| ` | ||
| <div class="modal" id="search-modal"> | ||
| <div class="modal-background"></div> | ||
| <div class="modal-card search-min-width-50 search-min-height-100 is-justify-content-center"> | ||
| ${search_modal_header} | ||
| <section class="modal-card-body is-flex is-flex-direction-column is-justify-content-center gap-4 search-modal-card-body"> | ||
| ${initial_search_body} | ||
| </section> | ||
| ${search_modal_footer} | ||
| </div> | ||
| </div> | ||
| ` | ||
| ); | ||
|
|
||
| document.querySelector(".docs-search-query").addEventListener("click", () => { | ||
| openModal(); | ||
| }); | ||
|
|
||
| document.querySelector(".close-search-modal").addEventListener("click", () => { | ||
| closeModal(); | ||
| }); | ||
|
|
||
| $(document).on("click", ".search-result-link", function () { | ||
| closeModal(); | ||
| }); | ||
|
|
||
| document.addEventListener("keydown", (event) => { | ||
| if ((event.ctrlKey || event.metaKey) && event.key === "/") { | ||
| if (!sidebar.classList.contains("visible")) { | ||
| sidebar.classList.add("visible"); | ||
| } | ||
| searchbox.focus(); | ||
| return false; | ||
| openModal(); | ||
| } else if (event.key === "Escape") { | ||
| if (sidebar.classList.contains("visible")) { | ||
| sidebar.classList.remove("visible"); | ||
| } | ||
| searchbox.blur(); | ||
| return false; | ||
| closeModal(); | ||
| } | ||
|
|
||
| return false; | ||
| }); | ||
|
|
||
| // Functions to open and close a modal | ||
| function openModal() { | ||
| let searchModal = document.querySelector("#search-modal"); | ||
|
|
||
| searchModal.classList.add("is-active"); | ||
| document.querySelector(".documenter-search-input").focus(); | ||
| } | ||
|
|
||
| function closeModal() { | ||
| let searchModal = document.querySelector("#search-modal"); | ||
| let initial_search_body = ` | ||
| <div class="has-text-centered my-5 py-5">Type something to get started!</div> | ||
| `; | ||
|
|
||
| searchModal.classList.remove("is-active"); | ||
| document.querySelector(".documenter-search-input").blur(); | ||
|
|
||
| if (!$(".search-modal-card-body").hasClass("is-justify-content-center")) { | ||
| $(".search-modal-card-body").addClass("is-justify-content-center"); | ||
| } | ||
|
|
||
| $(".documenter-search-input").val(""); | ||
| $(".search-modal-card-body").html(initial_search_body); | ||
| } | ||
|
|
||
| document | ||
| .querySelector("#search-modal .modal-background") | ||
| .addEventListener("click", () => { | ||
| closeModal(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,133 @@ | ||
| // Additional styling for the search page | ||
| #documenter .docs-main { | ||
| #documenter-search-info { | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| #documenter-search-results { | ||
| list-style-type: circle; | ||
| list-style-position: outside; | ||
|
|
||
| li { | ||
| margin-left: 2rem; | ||
| } | ||
|
|
||
| .search-result-link { | ||
| border-radius: 0.7em; | ||
| transition: all 300ms; | ||
| } | ||
|
|
||
| .search-result-link:hover, .search-result-link:focus { | ||
| background-color: $search-result-link-hover; | ||
| } | ||
|
|
||
| .search-result-link .property-search-result-badge { | ||
| transition: all 300ms; | ||
| } | ||
|
|
||
| .property-search-result-badge { | ||
| padding: 0.15em 0.5em; | ||
| font-size: 0.8em; | ||
| font-style: italic; | ||
| text-transform: none !important; | ||
| line-height: 1.5; | ||
| color: $search-result-badge-color; | ||
| background-color: $search-result-badge-background-color; | ||
| border-radius: 0.6rem; | ||
| } | ||
|
|
||
| .search-result-link:hover .property-search-result-badge, .search-result-link:focus .property-search-result-badge { | ||
| color: $search-result-link-text-color; | ||
| background-color: $search-result-link-text-background-color; | ||
| } | ||
|
|
||
| .search-result-highlight { | ||
| background-color: $search-result-highlight; | ||
| color: black; | ||
| } | ||
|
|
||
| .search-divider { | ||
| border-bottom: 1px solid $border; | ||
| } | ||
|
|
||
| .search-result-title { | ||
| color: $search-result-title-text-color; | ||
| } | ||
|
|
||
| .w-100 { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .gap-2 { | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .gap-4 { | ||
| gap: 1rem; | ||
| } | ||
| } | ||
| /* Code from https://dylanatsmith.com/wrote/styling-the-kbd-element */ | ||
| kbd.search-modal-key-hints { | ||
| border-radius: 0.25rem; | ||
| border: 1px solid $search-modal-kbd-color; | ||
| box-shadow: 0 2px 0 1px $search-modal-kbd-color; | ||
| cursor: default; | ||
| font-size: 0.9rem; | ||
| line-height: 1.5; | ||
| min-width: 0.75rem; | ||
| text-align: center; | ||
| padding: 0.1rem 0.3rem; | ||
| position: relative; | ||
| top: -1px; | ||
| } | ||
|
|
||
| .search-min-width-50 { | ||
| min-width: 50%; | ||
| } | ||
|
|
||
| .search-min-height-100 { | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| .search-modal-card-body { | ||
| max-height: calc(100vh - 15rem); | ||
| } | ||
|
|
||
| .search-result-link { | ||
| border-radius: 0.7em; | ||
| transition: all 300ms; | ||
| } | ||
|
|
||
| .search-result-link:hover, .search-result-link:focus { | ||
| background-color: $search-result-link-hover; | ||
| } | ||
|
|
||
| .search-result-link .property-search-result-badge { | ||
| transition: all 300ms; | ||
| } | ||
|
|
||
| .property-search-result-badge { | ||
| padding: 0.15em 0.5em; | ||
| font-size: 0.8em; | ||
| font-style: italic; | ||
| text-transform: none !important; | ||
| line-height: 1.5; | ||
| color: $search-result-badge-color; | ||
| background-color: $search-result-badge-background-color; | ||
| border-radius: 0.6rem; | ||
| } | ||
|
|
||
| .search-result-link:hover .property-search-result-badge, .search-result-link:focus .property-search-result-badge { | ||
| color: $search-result-link-text-color; | ||
| background-color: $search-result-link-text-background-color; | ||
| } | ||
|
|
||
| .search-filter { | ||
| @extend .property-search-result-badge; | ||
|
|
||
| color: $search-filter-color; | ||
| background-color: $search-filter-background-color; | ||
| transition: all 300ms; | ||
| } | ||
|
|
||
| .search-filter:hover, .search-filter:focus { | ||
| color: $search-filter-color; | ||
| } | ||
|
|
||
| .search-filter-selected { | ||
| color: $search-modal-selected-filter-color; | ||
| background-color: $search-modal-selected-filter-background-color; | ||
| } | ||
|
|
||
| .search-filter-selected:hover, .search-filter-selected:focus { | ||
| color: $search-modal-selected-filter-color; | ||
| } | ||
|
|
||
| .search-result-highlight { | ||
| background-color: $search-result-highlight; | ||
| color: black; | ||
| } | ||
|
|
||
| .search-divider { | ||
| border-bottom: 1px solid $border; | ||
| } | ||
|
|
||
| .search-result-title { | ||
| width: 85%; | ||
| color: $search-result-title-text-color; | ||
| } | ||
|
|
||
| .search-result-code-title { | ||
| font-size: 0.875rem; | ||
| font-family: $family-monospace; | ||
| } | ||
|
|
||
| // Search modal custom scrollbar | ||
| #search-modal .modal-card-body::-webkit-scrollbar, | ||
| #search-modal .filter-tabs::-webkit-scrollbar { | ||
| height: 10px; | ||
| width: 10px; | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| #search-modal .modal-card-body::-webkit-scrollbar-thumb, | ||
| #search-modal .filter-tabs::-webkit-scrollbar-thumb { | ||
| background-color: $search-modal-scrollbar-background-color; | ||
| border-radius: 1rem; | ||
| } | ||
|
|
||
| #search-modal .modal-card-body::-webkit-scrollbar-track, | ||
| #search-modal .filter-tabs::-webkit-scrollbar-track { | ||
| -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| // Helpers for search modal | ||
| .w-100 { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .gap-2 { | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .gap-4 { | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| .gap-8 { | ||
| gap: 2rem; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can leave this as is, but in general I am not a fan of these kinds of helpers -- essentially you're using HTML to do the styling again.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I find these kinds of helper more useful, maybe it has to do something with me using bootstrap normally...