Design tweaks

phynias · Mar 25, 2017 · 23663a4 · 23663a4
1 parent 880435d
commit 23663a4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header :class="`bg-blue absolute top-0 w-100 ${lights ? 'z-3' : 'z-max'}`">
+  <header :class="`bg-blue absolute top-0 w-100 bw1 bb b--dark-blue ${lights ? 'z-3' : 'z-max'}`">
     <div class="header-container center relative">
       <div class="logo-container">
         <router-link to="/" class="db no-underline">
@@ -9,12 +9,18 @@
       </div>
       <div v-if="username">
         <div class="absolute nav" style="left: 95px; top: 14px;">
-          <router-link exact to="/" class="white no-underline bg-animate"><i class="fa fa-th-list v-mid mr2" aria-hidden="true"></i> Queue</router-link>
-          <router-link to="/history" class="white no-underline bg-animate"><i class="fa fa-history v-mid mr2" aria-hidden="true"></i> History</router-link>
+          <router-link exact to="/" class="white no-underline bg-animate">
+            <i class="fa fa-th-list v-mid mr2" aria-hidden="true"></i>
+            <span class="fw6">Queue</span>
+          </router-link>
+          <router-link to="/history" class="white no-underline bg-animate">
+            <i class="fa fa-history v-mid mr2" aria-hidden="true"></i>
+            <span class="fw6">History</span>
+          </router-link>
         </div>
         <div class="absolute search right-0" style="top: 6px;">
           <search />
-          <span class="f6 fw5 dib ml1 ba b--white-40 bg-transparent bg-animate white br1 pointer ph2 pv1 tc logout" @click="logout">Log out</span>
+          <span class="f6 fw5 dib ml1 ba b--light-blue bg-transparent bg-animate white br1 pointer ph2 pv1 tc logout" @click="logout">Log out</span>
         </div>
       </div>
     </div>
@@ -94,28 +100,28 @@ export default {
   }
 
   .nav a {
-    height: 64px;
+    height: 62px;
     display: inline-block;
     margin-right: -5px;
     position: relative;
     top: -23px;
     padding: 1.4rem 1rem;
-    border-bottom: 0.25rem solid #357edd;
+    border-bottom: 0 solid #00449e;
     transition: all 0.2s ease-in-out;
   }
 
   .nav a:hover {
-    border-bottom: 0.25rem solid #2c60a2;
+    border-bottom-width: 0.25rem;
   }
 
   .nav .fa {
     font-size: 1.25rem;
   }
 
   .nav .router-link-active {
-    border-bottom: 0.25rem solid #2c60a2;
+    border-bottom: 0.25rem solid #00449e;
   }
   .logout:hover {
-    background-color: #2c60a2;
+    background-color: #00449e;
   }
 </style>
diff --git a/src/components/Search.vue b/src/components/Search.vue
@@ -3,18 +3,18 @@
     <form @submit.prevent="search">
       <input
         type="text"
-        class="br2 br--left input-reset white bw0 search-bar"
+        class="br2 br--left input-reset white bw0 bg-dark-blue search-bar"
         placeholder="Search Crunchyroll"
         v-model="searchInput"
         ref="input"
         @keydown="keydown"
         @focus="focus"
         @blur="blur"
       >
-      <button class="br2 br--right pointer bw0 button-reset search-btn"><i class="fa fa-search white"></i></button>
+      <button class="br2 br--right pointer bw0 button-reset bg-dark-blue search-btn"><i class="fa fa-search white"></i></button>
     </form>
     <div v-if="showResults" class="absolute br2 shadow-1 bg-white w-100 mt1">
-      <div v-for="(series, index) in matching" :key="series.id" :id="series.id" :class="`search-result ${index === selected ? 'selected' : ''}`" @mousedown="resultPress">
+      <div v-for="(series, index) in matching" :key="series.id" :id="series.id" :data-index="index" :class="`bb b--black-40 search-result ${index === selected ? 'selected' : ''}`" @mouseover="resultHover" @mousedown="resultPress">
         <img :src="series.image" :alt="series.name">
         <span class="truncate dib f6">{{series.name}}</span>
       </div>
@@ -100,6 +100,9 @@
         this.selected = -1
         this.focused = false
       },
+      resultHover ({target}) {
+        this.selected = parseInt(target.dataset.index, 10)
+      },
       resultPress ({target, which}) {
         if (which !== 1) return
         this.$router.push(`/series/${target.id}`)
@@ -122,7 +125,6 @@
 
 <style scoped>
   .search-bar {
-    background-color: #2c60a2;
     padding: 0.5rem;
   }
 
@@ -132,7 +134,6 @@
   }
 
   .search-btn {
-    background-color: #2c60a2;
     padding: 0.5rem;
     margin-left: -5px;
   }
@@ -154,6 +155,7 @@
   .search-result:last-child {
     border-bottom-left-radius: 0.25rem;
     border-bottom-right-radius: 0.25rem;
+    border: 0;
   }
 
   .search-result.selected, .search-result:hover {