Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

Added rate limiting and server security

Browse Source 
Ton of little visual style tweaks and little up improvements for mobile
This commit is contained in:
Max G
2020-03-26 04:45:23 +00:00
parent 4cc6014581
commit 1b14a8fd31
17 changed files with 283 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
client/src/components/SearchInput.vue
View File

@@ -1,10 +1,46 @@
<style type="text/css" scoped>
.fixed-search {
position: fixed;
top: 50%;
left: 0;
right: 0;
padding: 10px;
}
</style>
<template>
<div class="ui form">
<div class="ui left icon fluid input">
<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes and Files" />
<i class="search icon"></i>
<span>
<div class="ui form" v-if="!$store.getters.getIsUserOnMobile">
<!-- normal search menu -->
<div class="ui left icon fluid input">
<input v-model="searchTerm" @keyup="searchKeyUp" @keyup.enter="search" placeholder="Search Notes and Files" ref="searchInput"/>
<i class="search icon"></i>
</div>
</div>
</div>
<span class="ui basic icon button" v-on:click="openFloatingSearch">
<i class="green search icon"></i>
</span>
<div class="fixed-search" v-if="showFixedSearch">
<div class="ui raised segment">
<h2 class="ui center aligned header">Search!</h2>
<div class="ui form">
<div class="ui left icon fluid input">
<input
ref="fixedSearch"
v-model="searchTerm"
@keyup.enter="search"
v-on:blur="showFixedSearch = false"
placeholder="Press Enter to Search" />
<i class="search icon"></i>
</div>
</div>
</div>
</div>
</span>
</template>
<script>
@@ -16,6 +52,7 @@
searchTerm: '',
searchTimeout: null,
searchDebounceDuration: 300,
showFixedSearch: false,
}
},
beforeCreate: function(){
@@ -29,13 +66,27 @@
},
methods: {
openFloatingSearch(){
this.showFixedSearch = !this.showFixedSearch
if(this.showFixedSearch){
this.$nextTick( () => {
this.searchTerm = ''
this.$refs.fixedSearch.focus()
})
}
},
searchKeyUp(){
//This event is not triggered on mobile
clearTimeout(this.searchTimeout)
this.searchTimeout = setTimeout(() => {
this.search()
}, this.searchDebounceDuration)
},
search(){
if(this.$store.getters.getIsUserOnMobile){
this.$refs.fixedSearch.blur()
}
this.$bus.$emit('update_search_term', this.searchTerm)
},
}