summaryrefslogtreecommitdiffstats
path: root/src/components/searcher
diff options
context:
space:
mode:
authorjdlugosz963 <jdlugosz963@gmail.com>2021-12-17 00:22:38 +0100
committerjdlugosz963 <jdlugosz963@gmail.com>2021-12-17 00:22:38 +0100
commitc6b4c6a90a3bb77add64994f51d3e2af790c8452 (patch)
treec4faaf7e4e48fa09b555c0f4ba50e204f73e8617 /src/components/searcher
parentcee635ff1db9ba7c9212547831287efe56c69a1f (diff)
downloadlom_frontend-c6b4c6a90a3bb77add64994f51d3e2af790c8452.tar.gz
lom_frontend-c6b4c6a90a3bb77add64994f51d3e2af790c8452.zip
make styles and add some features
Diffstat (limited to 'src/components/searcher')
-rw-r--r--src/components/searcher/Searcher.vue41
-rw-r--r--src/components/searcher/Sugestion.vue21
2 files changed, 10 insertions, 52 deletions
diff --git a/src/components/searcher/Searcher.vue b/src/components/searcher/Searcher.vue
index f8dd51f..e74600a 100644
--- a/src/components/searcher/Searcher.vue
+++ b/src/components/searcher/Searcher.vue
@@ -1,7 +1,8 @@
1<template> 1<template>
2 <div id="searcher"> 2 <div class="searcher">
3 <input 3 <input
4 type="text" 4 type="text"
5 class="w-full bg-gray-800 p-2 mb-4"
5 v-model='search' 6 v-model='search'
6 ref='input' 7 ref='input'
7 @keydown="hotkeys" 8 @keydown="hotkeys"
@@ -13,7 +14,7 @@
13 v-for="sugestion in sugestions" 14 v-for="sugestion in sugestions"
14 :key="sugestion[0]" 15 :key="sugestion[0]"
15 :sugestion="sugestion" 16 :sugestion="sugestion"
16 :class="{selected: sugestion[0] === current[0]}" 17 :class="{'bg-gray-800': sugestion[0] === current[0]}"
17 /> 18 />
18 </div> 19 </div>
19</template> 20</template>
@@ -72,7 +73,11 @@ export default {
72 73
73 hotkeys(e) { 74 hotkeys(e) {
74 switch(e.code) { 75 switch(e.code) {
75 case 'Escape': 76 case 'Escape':
77 e.preventDefault()
78 this.close()
79 break
80 case 'Delete':
76 e.preventDefault() 81 e.preventDefault()
77 this.close() 82 this.close()
78 break 83 break
@@ -127,31 +132,3 @@ export default {
127 } 132 }
128} 133}
129</script> 134</script>
130
131<style scoped>
132 #searcher {
133 position: absolute;
134 width: 30%;
135 height: 80%;
136 top: 50%;
137 left: 50%;
138 background-color: #202020;
139 padding: 20px;
140 border-radius: 10px;
141 transform: translate(-50%, -50%);
142 }
143
144 #searcher input {
145 width: 100%;
146 margin-bottom: 20px;
147 padding: 10px;
148 padding-right: 0px;
149 height: 20px;
150 border: none;
151 background-color: #303030;
152 }
153
154 .selected {
155 background-color: #505050;
156 }
157</style>
diff --git a/src/components/searcher/Sugestion.vue b/src/components/searcher/Sugestion.vue
index 4721ca2..15a177d 100644
--- a/src/components/searcher/Sugestion.vue
+++ b/src/components/searcher/Sugestion.vue
@@ -1,5 +1,5 @@
1<template> 1<template>
2 <div class="sugestion"> 2 <div class="w-auto bg-gray-700 p-2 text-center mt-5">
3 <span>{{sugestion[0]}}</span> 3 <span>{{sugestion[0]}}</span>
4 </div> 4 </div>
5</template> 5</template>
@@ -9,24 +9,5 @@ export default {
9 props: { 9 props: {
10 sugestion: Array 10 sugestion: Array
11 }, 11 },
12
13 created() {
14 this.$nextTick(function () {
15 })
16 }
17
18} 12}
19</script> 13</script>
20
21<style scoped>
22 .sugestion {
23 width: 100%;
24 margin-left: auto;
25 margin-right: auto;
26 background-color: #303030;
27
28 margin-top: 10px;
29 padding: 5px;
30 padding-right: 0px;
31 }
32</style>