Search improvements #156

assets/src/components/Search.vue

@@ -17,7 +17,49 @@
 
     <div id="result">
       <div>
-        <span v-if="search.length === 0 && commands.length === 0">{{ text }}</span>
+        <template v-if="search.length === 0 && commands.length === 0">
+          <p>{{ text }}</p>
+
+          <template v-if="value.length === 0">
+            <div class="boxes">
+              <h3>{{ $t('search.types') }}</h3>
+              <div>
+                <div tabindex="0"
+                  role="button"
+                  @click="init('type:image')"
+                  :aria-label="$t('search.images')">
+                  <i class="material-icons">insert_photo</i>
+                  <p>{{ $t('search.images') }}</p>
+                </div>
+
+                <div tabindex="0"
+                  role="button"
+                  @click="init('type:audio')"
+                  :aria-label="$t('search.music')">
+                  <i class="material-icons">volume_up</i>
+                  <p>{{ $t('search.music') }}</p>
+                </div>
+
+                <div tabindex="0"
+                  role="button"
+                  @click="init('type:video')"
+                  :aria-label="$t('search.video')">
+                  <i class="material-icons">movie</i>
+                  <p>{{ $t('search.video') }}</p>
+                </div>
+
+                <div tabindex="0"
+                  role="button"
+                  @click="init('type:pdf')"
+                  :aria-label="$t('search.pdf')">
+                  <i class="material-icons">picture_as_pdf</i>
+                  <p>{{ $t('search.pdf') }}</p>
+                </div>
+              </div>
+            </div>
+          </template>
+
+        </template>
         <ul v-else-if="search.length > 0">
           <li v-for="s in search">
             <router-link @click.native="close" :to="'./' + s.path">
@@ -28,11 +70,11 @@
           </li>
         </ul>
 
-        <ul v-else-if="commands.length > 0">
+        <pre v-else-if="commands.length > 0">
-          <li v-for="c in commands">{{ c }}</li>
+          <template v-for="c in commands">{{ c }}</template>
-        </ul>
+        </pre>
       </div>
-      <p><i class="material-icons spin">autorenew</i></p>
+      <p id="renew"><i class="material-icons spin">autorenew</i></p>
     </div>
   </div>
 </template>
@@ -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

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 {
+#search #result>div {
-  white-space: pre-wrap;
+  max-width: 45em;
-  white-space: -moz-pre-wrap;
+  margin: 0 auto;
-  white-space: -pre-wrap;
-  white-space: -o-pre-wrap;
-  word-wrap: break-word;
 }
 
-#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;
+}

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.
+  types: Types
-  pressToExecute: Press enter to execute.
+  video: Video
+  writeToSearch: Write here to search
 languages:
   en: English
   pt: Portuguese

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: