| ... |
... |
@@ -53,7 +53,7 @@ |
| 53 |
53 |
this.$('#prev').addEventListener('click', this.handlePrevPage); |
| 54 |
54 |
this.$('#next').addEventListener('click', this.handleNextPage); |
| 55 |
55 |
searchInput.addEventListener('keypress', this.handleKeyPress); |
| 56 |
|
- |
|
56 |
+ searchInput.focus(); |
| 57 |
57 |
} |
| 58 |
58 |
|
| 59 |
59 |
disconnectedCallback() { |
| ... |
... |
@@ -66,8 +66,24 @@ |
| 66 |
66 |
get styles() { |
| 67 |
67 |
return ` |
| 68 |
68 |
input[type="text"] { |
| 69 |
|
- border: 1px solid red; |
|
69 |
+ display: block; |
|
70 |
+ width: 100%; |
|
71 |
+box-sizing: border-box; |
|
72 |
+ padding: 6px 12px; |
|
73 |
+ font-size: 16px; |
|
74 |
+ line-height: 1.428571429; |
|
75 |
+ color: #555555; |
|
76 |
+ background-color: #fff; |
|
77 |
+ background-image: none; |
|
78 |
+ border: 1px solid #ccc; |
|
79 |
+ border-radius: 4px; |
|
80 |
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
|
81 |
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
|
82 |
+ -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
|
83 |
+ -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
|
84 |
+ transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
| 70 |
70 |
} |
|
86 |
+ |
| 71 |
71 |
` |
| 72 |
72 |
} |
| 73 |
73 |
handlePrevPage = () => { |
| ... |
... |
@@ -89,7 +89,9 @@ |
| 89 |
89 |
} |
| 90 |
90 |
|
| 91 |
91 |
handleKeyPress = (e) => { |
| 92 |
|
- console.log(e.keyCode); |
|
108 |
+ if(e.code === 'Enter') { |
|
109 |
+ this.handleSearch(); |
|
110 |
+ } |
| 93 |
93 |
} |
| 94 |
94 |
|
| 95 |
95 |
get html() { |
| ... |
... |
@@ -146,7 +146,7 @@ |
| 146 |
146 |
get html() { |
| 147 |
147 |
return ` |
| 148 |
148 |
<div> |
| 149 |
|
- <a href=${this.hrefAttr}>${this.titleAttr}</a> |
|
167 |
+ <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a> |
| 150 |
150 |
<div> |
| 151 |
151 |
<slot></slot> |
| 152 |
152 |
</div> |
| ... |
... |
@@ -157,6 +157,7 @@ |
| 157 |
157 |
this.attachShadow({ mode: 'open' }); |
| 158 |
158 |
this.shadowRoot.appendChild(this.template.content.cloneNode(true)); |
| 159 |
159 |
} |
|
178 |
+ |
| 160 |
160 |
} |
| 161 |
161 |
); |
| 162 |
162 |
</script> |