Add search UI to navbar

Author: drusepth

app/assets/javascripts/search.coffee

@@ -0,0 +1,13 @@
+$(function () {
+  $('a[href="#search"]').on('click', function(event) {
+    event.preventDefault();
+    $('#search').addClass('open');
+    $('#search > form > input[type="search"]').focus();
+  });
+
+  $('#search, #search button.close').on('click keyup', function(event) {
+    if (event.target == this || event.target.className == 'close red' || event.keyCode == 27) {
+      $(this).removeClass('open');
+    }
+  });
+});

app/assets/javascripts/search.js

@@ -1,3 +1,68 @@
-// Place all the styles related to the Search controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+#search {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 9001;
+
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+
+    -webkit-transform: translate(0px, -100%) scale(0, 0);
+    -moz-transform: translate(0px, -100%) scale(0, 0);
+    -o-transform: translate(0px, -100%) scale(0, 0);
+    -ms-transform: translate(0px, -100%) scale(0, 0);
+    transform: translate(0px, -100%) scale(0, 0);
+
+    opacity: 0;
+}
+
+#search.open {
+    -webkit-transform: translate(0px, 0px) scale(1, 1);
+    -moz-transform: translate(0px, 0px) scale(1, 1);
+    -o-transform: translate(0px, 0px) scale(1, 1);
+    -ms-transform: translate(0px, 0px) scale(1, 1);
+    transform: translate(0px, 0px) scale(1, 1);
+    opacity: 1;
+}
+
+#search input[type="search"] {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    color: rgb(255, 255, 255);
+    background: rgba(0, 0, 0, 0);
+    font-size: 60px;
+    font-weight: 300;
+    text-align: center;
+    border-bottom: 1px solid blue;
+    margin: 0px auto;
+    margin-top: -51px;
+    padding-left: 30px;
+    padding-right: 30px;
+    outline: none;
+}
+#search .btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: 61px;
+    margin-left: -45px;
+    border: black;
+
+}
+#search .close {
+    position: fixed;
+    top: 15px;
+    right: 15px;
+    color: #fff;
+    opacity: 1;
+    padding: 10px 17px;
+    font-size: 27px;
+    border: 0px;
+}

app/assets/stylesheets/navigator.scss renamed to app/assets/stylesheets/navigator.css

@@ -154,6 +154,11 @@
               <i class="material-icons">recent_actors</i>
             </a>
           </li>
+          <li>
+            <a href="#search" class="dropdown-button tooltipped" href="#!" data-tooltip="Search your notebook">
+              <i class="material-icons">search</i>
+            </a>
+          </li>
         <% else %>
           <li>
             <a href="#" data-activates="login-slide" class="button-collapse">
@@ -165,3 +170,11 @@
     </div>
   </nav>
 </div>
+
+<div id="search">
+  <button type="button" class="close red">×</button>
+  <%= form_tag search_path, method: :get do %>
+    <input type="search" name="q" value="" placeholder="search your notebook" />
+    <button type="submit" class="btn btn-primary blue">Search everything</button>
+  <% end %>
+</div>

app/assets/stylesheets/search.scss

@@ -1,17 +1,17 @@
-<h3>
-  <%= @query %>
+<h4 class="center">
+  <div><%= @query %></div>
   <small class="grey-text">
     <%= pluralize @results.values.flatten.count, 'match' %>
   </small>
-</h3>
+</h4>
 
 <ul class="collapsible popout" data-collapsible="accordion">
   <% @results.each do |content_type, content_list| %>
     <% next if content_list.empty? %>
     <% content_class = content_type.to_s.singularize.capitalize.constantize %>
 
     <li>
-      <div class="collapsible-header">
+      <div class="collapsible-header active">
         <i class="material-icons <%= content_class.color %>-text"><%= content_class.icon %></i>
         <%= content_type.to_s.humanize %>
         <span class="grey-text"><%= pluralize content_list.count, 'result' %></span>