diff --git a/assets/src/components/Search.vue b/assets/src/components/Search.vue index b821df3f..baf854aa 100644 --- a/assets/src/components/Search.vue +++ b/assets/src/components/Search.vue @@ -17,7 +17,49 @@
- {{ text }} + - + 
+          
+
-

autorenew

+

autorenew

@@ -66,6 +108,8 @@ export default { this.$store.commit('setReload', true) } + document.body.style.overflow = 'auto' + this.reset() this.$refs.input.blur() } @@ -74,6 +118,7 @@ export default { if (val === 'search') { this.reload = false this.$refs.input.focus() + document.body.style.overflow = 'hidden' } } }, @@ -123,19 +168,19 @@ export default { }, methods: { // Sets the search to active. - open: function (event) { + open (event) { this.$store.commit('showHover', 'search') }, // Closes the search and prevents the event // of propagating so it doesn't trigger the // click event on #search. - close: function (event) { + close (event) { event.stopPropagation() event.preventDefault() this.$store.commit('closeHovers') }, // Checks if the current input is a supported command. - supported: function () { + supported () { let pieces = this.value.split(' ') for (let i = 0; i < this.user.commands.length; i++) { @@ -146,11 +191,24 @@ export default { return false }, + // Initializes the search with a default value. + init (string) { + this.value = string + ' ' + this.$refs.input.focus() + }, + // Resets the search box value. + reset () { + this.value = '' + this.active = false + this.ongoing = false + this.search = [] + this.commands = [] + }, // When the user presses a key, if it is ESC // then it will close the search box. Otherwise, // it will set the search box to active and clean // the search results, as well as commands'. - keyup: function (event) { + keyup (event) { if (event.keyCode === 27) { this.close(event) return @@ -160,7 +218,7 @@ export default { this.commands.length = 0 }, // Submits the input to the server and sets ongoing to true. - submit: function (event) { + submit (event) { this.ongoing = true let path = this.$route.path diff --git a/assets/src/css/header.css b/assets/src/css/header.css index 770a6a3a..3172a5b0 100644 --- a/assets/src/css/header.css +++ b/assets/src/css/header.css @@ -50,7 +50,7 @@ header>div div { position: relative; } -header > div:last-child div { +header>div:last-child div { display: flex; } @@ -129,10 +129,10 @@ header .search-button { #search #result { visibility: visible; max-height: none; - background-color: #fff; + background-color: #f8f8f8; text-align: left; - color: #ccc; padding: 0; + color: rgba(0, 0, 0, 0.6); height: 0; transition: .1s ease height, .1s ease padding; overflow-x: hidden; @@ -140,6 +140,10 @@ header .search-button { z-index: 1; } +#search #result>div>*:first-child { + margin-top: 0; +} + #search.active #result { padding: .5em; height: calc(100% - 4em); @@ -155,15 +159,12 @@ header .search-button { margin-bottom: .5em; } -#search #result div { - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; +#search #result>div { + max-width: 45em; + margin: 0 auto; } -#search #result p { +#search #result #renew { width: 100%; text-align: center; display: none; @@ -171,7 +172,7 @@ header .search-button { max-width: none; } -#search.ongoing #result p { +#search.ongoing #result #renew { display: block; } @@ -179,7 +180,7 @@ header .search-button { color: #ccc; } -#search.active #result > p > i { +#search.active #result>p>i { text-align: center; margin: 0 auto; display: table; @@ -212,3 +213,47 @@ header .search-button { #search:-ms-input-placeholder { color: rgba(255, 255, 255, .5); } + +#search .boxes { + border: 1px solid rgba(0, 0, 0, 0.075); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + background: #fff; + margin: 1em 0; +} + +#search .boxes h3 { + margin: 0; + font-weight: 500; + font-size: 1em; + color: #212121; + padding: .5em; +} + +#search .boxes>div { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-right: -1em; + margin-bottom: -1em; +} + +#search .boxes>div>div { + background: #2196F3; + color: #fff; + text-align: center; + width: 10em; + padding: 1em; + cursor: pointer; + margin-bottom: 1em; + margin-right: 1em; + flex-grow: 1; +} + +#search .boxes p { + margin: 1em 0 0; +} + +#search .boxes i { + color: #fff !important; + font-size: 3.5em; +} diff --git a/assets/src/i18n/en.yaml b/assets/src/i18n/en.yaml index 2326a176..77f42b67 100644 --- a/assets/src/i18n/en.yaml +++ b/assets/src/i18n/en.yaml @@ -159,13 +159,18 @@ sidebar: servedWith: Served with settings: Settings search: - writeToSearch: Write here to search + images: Images + music: Music + pdf: PDF + pressToExecute: Press enter to execute. + pressToSearch: Press enter to search. + search: Search... searchOrCommand: Search or execute a command... searchOrSupportedCommand: 'Search or use one of your supported commands:' - search: Search... type: Type and press enter to search. - pressToSearch: Press enter to search. - pressToExecute: Press enter to execute. + types: Types + video: Video + writeToSearch: Write here to search languages: en: English pt: Portuguese diff --git a/assets/src/i18n/pt.yaml b/assets/src/i18n/pt.yaml index eb758cdd..d8959a16 100644 --- a/assets/src/i18n/pt.yaml +++ b/assets/src/i18n/pt.yaml @@ -160,11 +160,16 @@ sidebar: servedWith: Servido com settings: Configurações search: + images: Imagens + music: Música + pdf: PDF writeToSearch: Escreva aqui para pesquisar searchOrCommand: Pesquise ou execute um comando... searchOrSupportedCommand: 'Pesquise ou utilize um dos seus comandos:' search: Pesquise... type: Escreva e prima enter para pesquisar. + types: Tipos + video: Vídeos pressToSearch: Prima enter para pesquisar. pressToExecute: Prima enter para executar. languages: diff --git a/rice-box.go.REMOVED.git-id b/rice-box.go.REMOVED.git-id index 1f0e95ec..64d7323c 100644 --- a/rice-box.go.REMOVED.git-id +++ b/rice-box.go.REMOVED.git-id @@ -1 +1 @@ -1f3ae0f4595621cd6a7492418bafc23660342685 \ No newline at end of file +824bbb2a05401392205f299b61d082c54ed3f3d2 \ No newline at end of file