Global search

* Make some heading translatable
* set focus back to search phrase input after clicking a predicate
* Some spacing issues
This commit is contained in:
John R. Supplee 2021-01-21 11:55:58 +02:00
parent 61c691a267
commit 7ced6318a5
4 changed files with 25 additions and 6 deletions

View file

@ -14,7 +14,14 @@ template(name="globalSearch")
if currentUser if currentUser
.wrapper .wrapper
form.global-search-instructions.js-search-query-form form.global-search-instructions.js-search-query-form
input.global-search-query-input(type="text" name="searchQuery" placeholder="{{_ 'search-example'}}" value="{{ query.get }}" autofocus dir="auto") input.global-search-query-input(
id="global-search-input"
type="text"
name="searchQuery"
placeholder="{{_ 'search-example'}}"
value="{{ query.get }}"
autofocus dir="auto"
)
if searching.get if searching.get
+spinner +spinner
else if hasResults.get else if hasResults.get
@ -32,22 +39,22 @@ template(name="globalSearch")
+resultCard(card) +resultCard(card)
else else
.global-search-instructions .global-search-instructions
h2 Boards h2 {{_ 'boards' }}
.lists-wrapper .lists-wrapper
each title in myBoardNames.get each title in myBoardNames.get
span.card-label.list-title.js-board-title span.card-label.list-title.js-board-title
= title = title
h2 Lists h2 {{_ 'lists' }}
.lists-wrapper .lists-wrapper
each title in myLists.get each title in myLists.get
span.card-label.list-title.js-list-title span.card-label.list-title.js-list-title
= title = title
h2 Label Colors h2 {{_ 'label-colors' }}
.palette-colors: each label in labelColors .palette-colors: each label in labelColors
span.card-label.palette-color.js-label-color(class="card-label-{{label.color}}") span.card-label.palette-color.js-label-color(class="card-label-{{label.color}}")
= label.name = label.name
if myLabelNames.get.length if myLabelNames.get.length
h2 Label Names h2 {{_ 'label-names' }}
.lists-wrapper .lists-wrapper
each name in myLabelNames.get each name in myLabelNames.get
span.card-label.list-title.js-label-name span.card-label.list-title.js-label-name

View file

@ -401,6 +401,7 @@ BlazeComponent.extendComponent({
evt.currentTarget.textContent evt.currentTarget.textContent
}"`, }"`,
); );
document.getElementById('global-search-input').focus();
}, },
'click .js-board-title'(evt) { 'click .js-board-title'(evt) {
evt.preventDefault(); evt.preventDefault();
@ -409,6 +410,7 @@ BlazeComponent.extendComponent({
evt.currentTarget.textContent evt.currentTarget.textContent
}"`, }"`,
); );
document.getElementById('global-search-input').focus();
}, },
'click .js-list-title'(evt) { 'click .js-list-title'(evt) {
evt.preventDefault(); evt.preventDefault();
@ -417,6 +419,7 @@ BlazeComponent.extendComponent({
evt.currentTarget.textContent evt.currentTarget.textContent
}"`, }"`,
); );
document.getElementById('global-search-input').focus();
}, },
'click .js-label-name'(evt) { 'click .js-label-name'(evt) {
evt.preventDefault(); evt.preventDefault();
@ -425,6 +428,7 @@ BlazeComponent.extendComponent({
evt.currentTarget.textContent evt.currentTarget.textContent
}"`, }"`,
); );
document.getElementById('global-search-input').focus();
}, },
}, },
]; ];

View file

@ -78,6 +78,12 @@
margin-left: auto margin-left: auto
line-height: 150% line-height: 150%
.global-search-instructions h1
margin-top: 2rem;
.global-search-instructions h2
margin-top: 1rem;
.global-search-query-input .global-search-query-input
width: 90% !important width: 90% !important
margin-right: auto margin-right: auto

View file

@ -916,5 +916,7 @@
"globalSearch-instructions-notes-5": "Currently archived cards are not searched.", "globalSearch-instructions-notes-5": "Currently archived cards are not searched.",
"link-to-search": "Link to this search", "link-to-search": "Link to this search",
"excel-font": "Arial", "excel-font": "Arial",
"number": "Number" "number": "Number",
"label-colors": "Label Colors",
"label-names": "Label Names"
} }