Move user-finder into navbar and hide it behind a toggle button, update fontello icons with user-plus and menu.

src/App.scss

@@ -52,6 +52,8 @@ button{
 
 .item {
     flex: 1;
+    line-height: 21px;
+    height: 21px;
 }
 
 .gaps > .item {

src/App.vue

@@ -6,6 +6,7 @@
           <router-link :to="{ name: 'root'}">{{sitename}}</router-link>
         </div>
         <div class='item right'>
+          <user-finder></user-finder>
           <router-link :to="{ name: 'settings'}"><i class="icon-cog"></i></router-link>
         </div>
       </div>
@@ -19,7 +20,7 @@
         <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
           <div class="sidebar-container">
             <user-panel></user-panel>
-            <user-finder></user-finder>
+
             <nav-panel></nav-panel>
             <notifications v-if="currentUser"></notifications>
           </div>

src/components/user_finder/user_finder.js

@@ -1,6 +1,7 @@
 const UserFinder = {
   data: () => ({
-    username: undefined
+    username: undefined,
+    hidden: true
   }),
   methods: {
     findUser (username) {
@@ -11,6 +12,9 @@ const UserFinder = {
             this.$router.push({name: 'user-profile', params: {id: user.id}})
           }
         })
+    },
+    toggleHidden () {
+      this.hidden = !this.hidden
     }
   }
 }

src/components/user_finder/user_finder.vue

@@ -1,13 +1,23 @@
 <template>
-  <div class="user-finder-panel panel panel-default base00-background">
-    <input @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text" />
-  </div>
+  <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent="toggleHidden"/></a>
+  <span v-else>
+    <input class="user-finder-input base03-border" @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text"/>
+    <i class="icon-cancel user-finder-icon" @click="toggleHidden"/>
+  </span>
 </template>
 
 <script src="./user_finder.js"></script>
 
 <style lang="scss">
- .user-finder-panel {
-   padding: 10px;
+ .user-finder-icon {
+   margin-right: 0.25em;
+ }
+
+ .user-finder-input {
+   border-width: 1px;
+   border-style: solid;
+   border-color: inherit;
+   border-radius: 5px;
+   padding: 0.1em 0.2em 0.2em 0.2em;
  }
 </style>

static/font/config.json

@@ -77,6 +77,18 @@
       "css": "cog",
       "code": 59399,
       "src": "fontawesome"
+    },
+    {
+      "uid": "1bafeeb1808a5fe24484c7890096901a",
+      "css": "user-plus",
+      "code": 62004,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "559647a6f430b3aeadbecd67194451dd",
+      "css": "menu",
+      "code": 61641,
+      "src": "fontawesome"
     }
   ]
 }

static/font/css/fontello-codes.css

@@ -9,5 +9,7 @@
 .icon-cog:before { content: '\e807'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
+.icon-menu:before { content: '\f0c9'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
-.icon-binoculars:before { content: '\f1e5'; } /* '' */
+.icon-binoculars:before { content: '\f1e5'; } /* '' */
+.icon-user-plus:before { content: '\f234'; } /* '' */

static/font/css/fontello-ie7-codes.css

@@ -9,5 +9,7 @@
 .icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello-ie7.css

@@ -20,5 +20,7 @@
 .icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?90538621');
-  src: url('../font/fontello.eot?90538621#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?90538621') format('woff2'),
-       url('../font/fontello.woff?90538621') format('woff'),
-       url('../font/fontello.ttf?90538621') format('truetype'),
-       url('../font/fontello.svg?90538621#fontello') format('svg');
+  src: url('../font/fontello.eot?79576261');
+  src: url('../font/fontello.eot?79576261#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?79576261') format('woff2'),
+       url('../font/fontello.woff?79576261') format('woff'),
+       url('../font/fontello.ttf?79576261') format('truetype'),
+       url('../font/fontello.svg?79576261#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?90538621#fontello') format('svg');
+    src: url('../font/fontello.svg?79576261#fontello') format('svg');
   }
 }
 */
@@ -65,5 +65,7 @@
 .icon-cog:before { content: '\e807'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
+.icon-menu:before { content: '\f0c9'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
-.icon-binoculars:before { content: '\f1e5'; } /* '' */
+.icon-binoculars:before { content: '\f1e5'; } /* '' */
+.icon-user-plus:before { content: '\f234'; } /* '' */

static/font/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?15442171');
-      src: url('./font/fontello.eot?15442171#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?15442171') format('woff'),
-           url('./font/fontello.ttf?15442171') format('truetype'),
-           url('./font/fontello.svg?15442171#fontello') format('svg');
+      src: url('./font/fontello.eot?13861244');
+      src: url('./font/fontello.eot?13861244#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?13861244') format('woff'),
+           url('./font/fontello.ttf?13861244') format('truetype'),
+           url('./font/fontello.svg?13861244#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -315,8 +315,12 @@ body {
       <div class="row">
         <div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
         <div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
+        <div title="Code: 0xf0c9" class="the-icons span3"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
         <div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
+      </div>
+      <div class="row">
         <div title="Code: 0xf1e5" class="the-icons span3"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
+        <div title="Code: 0xf234" class="the-icons span3"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
       </div>
     </div>
     <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>

static/font/font/fontello.svg

@@ -26,9 +26,13 @@
 
 <glyph glyph-name="spin4" unicode="&#xe834;" d="M498 850c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" />
 
+<glyph glyph-name="menu" unicode="&#xf0c9;" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="reply" unicode="&#xf112;" d="M1000 225q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" />
 
 <glyph glyph-name="binoculars" unicode="&#xf1e5;" d="M393 671v-428q0-15-11-25t-25-11v-321q0-15-10-25t-26-11h-285q-15 0-25 11t-11 25v285l139 488q4 12 17 12h237z m178 0v-392h-142v392h142z m429-500v-285q0-15-11-25t-25-11h-285q-15 0-25 11t-11 25v321q-15 0-25 11t-11 25v428h237q13 0 17-12z m-589 661v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z m375 0v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z" horiz-adv-x="1000" />
+
+<glyph glyph-name="user-plus" unicode="&#xf234;" d="M393 350q-89 0-152 63t-62 151 62 152 152 63 151-63 63-152-63-151-151-63z m536-71h196q7 0 13-6t5-12v-107q0-8-5-13t-13-5h-196v-197q0-7-6-12t-12-6h-107q-8 0-13 6t-5 12v197h-197q-7 0-12 5t-6 13v107q0 7 6 12t12 6h197v196q0 7 5 13t13 5h107q7 0 12-5t6-13v-196z m-411-125q0-29 21-51t50-21h143v-133q-38-28-95-28h-488q-67 0-108 39t-41 106q0 30 2 58t8 61 15 60 24 55 34 45 48 30 62 11q11 0 22-10 44-34 86-51t92-17 92 17 86 51q11 10 22 10 73 0 121-54h-125q-29 0-50-21t-21-50v-107z" horiz-adv-x="1142.9" />
 </font>
 </defs>
 </svg>