Add adv-search form, skeleton-pages.

Add:
    templates/index.html
        -Add compartmental `div` structure for the advanced-search form.

    static/sass/index.sass
        -Add layout style rules to the advanced-search form.

    app.py, templates/(about, developers).html
        -Add `Flask` routes and skeleton files for pages to be developed later.

Ref:
    static/js/index.js
        -Substitute some verbose `JavaScript` calls with their `jQuery`
        equivalents.

app.py

@@ -6,8 +6,8 @@ from flask import Flask
 from flask import render_template, session
 
 from bitshift import assets
-from bitshift.database import Database
-from bitshift.query import parse_query
+# from bitshift.database import Database
+# from bitshift.query import parse_query
 
 app = Flask(__name__)
 app.config.from_object("bitshift.config")
@@ -16,7 +16,7 @@ app_env = app.jinja_env
 app_env.line_statement_prefix = "="
 app_env.globals.update(assets=assets)
 
-database = Database()
+# database = Database()
 
 @app.route("/")
 def index():
@@ -24,9 +24,17 @@ def index():
 
 @app.route("/search/<query>")
 def search(query):
-    tree = parse_query(query)
-    database.search(tree)
+    # tree = parse_query(query)
+    # database.search(tree)
     pass
 
+@app.route("/about")
+def about():
+    return render_template("about.html")
+
+@app.route("/developers")
+def developers():
+    return render_template("developers.html")
+
 if __name__ == "__main__":
-    app.run()
+    app.run(debug=True)

static/js/index.js

@@ -4,26 +4,42 @@
  */
 
 FINISH_TYPING_INTERVAL = 650;
-searchBar = document.querySelectorAll("form#search-bar input[type='text']")[0];
-resultsDiv = document.querySelectorAll("div#results")[0];
+searchBar = $("form#search-bar input[type='text']")[0];
+resultsDiv = $("div#results")[0];
 
 var typingTimer, lastValue;
 searchBar.onkeyup = typingTimer;
 
+// Enable infinite scrolling down the results page.
 $(window).scroll(function() {
-    if($(window).scrollTop() + $(window).height() == $(document).height()) {
+    if($(window).scrollTop() + $(window).height() == $(document).height()){
         loadMoreResults();
     }
 });
 
+// Enable capturing the `enter` key.
+$("form#search-bar").submit(function(event){
+    event.preventDefault();
+    return false;
+});
+
 /*
  * Clear the existing timer and set a new one the the user types text into the
  * search bar.
  */
-function typingTimer(){
+function typingTimer(event){
     clearTimeout(typingTimer);
-    if(lastValue != searchBar.value)
-        typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);
+
+    var enterKeyCode = 13;
+    if(event.keyCode != enterKeyCode){
+        if(lastValue != searchBar.value)
+            typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);
+    }
+    else {
+        event.preventDefault();
+        finishedTyping();
+        return false;
+    }
 };
 
 /*
@@ -35,17 +51,17 @@ function typingTimer(){
  */
 function finishedTyping(){
     lastValue = searchBar.value;
-    var searchField = document.querySelectorAll("div#search-field")[0]
+    var searchField = $("div#search-field");
 
     clearResults();
     if(searchBar.value){
-        if(!searchField.classList.contains("partly-visible"))
-            searchField.classList.add("partly-visible");
+        if(!searchField.hasClass("partly-visible"))
+            searchField.addClass("partly-visible");
 
         populateResults();
     }
     else
-        searchField.classList.remove("partly-visible");
+        searchField.removeClass("partly-visible");
 }
 
 /*
@@ -73,8 +89,6 @@ function populateResults(){
                 };
             }(newDiv)), result * 20);
     }
-
-    for(var result = 0; result < results.length; result++);
 }
 
 /*

static/sass/index.sass

@@ -13,6 +13,7 @@ div#search-field
     left: 0
     margin: auto
     margin-top: 15%
+    max-height: 100px
     position: absolute
     right: 0
     top: 0
@@ -33,15 +34,73 @@ div#search-field
             color: $baseColor2
             font-style: italic
 
-    form input[type="text"]
-        border: 1px solid $baseColor1
-        font-size: 1.1em
-        padding: 3px
-        width: 100%
+    form#search-bar
+
+        input[type="text"]
+            @include vendor(box-sizing, border-box)
+
+            border: 1px solid $baseColor1
+            font-size: 1.1em
+            margin-bottom: 0px
+            padding: 3px
+            width: 100%
+
+        div#advanced-search
+            background-color: white
+            border: 1px solid $baseColor2
+            margin: 0px
+            overflow: auto
+
+            >div
+                float: left
+                height: 100%
+
+            >#col1
+                background-color: red
+                width: 10%
+
+            >#col2
+                background-color: yellow
+                width: 15%
+
+            >#col3
+                background-color: blue
+                width: 75%
+
+                div
+                    width: 100%
+
+                #upper-half
+                    background-color: brown
+
+                    div
+                        float: left
+                        height: 100%
+
+                    #col1
+                        background-color: red
+                        width: 40%
+
+                    #col2
+                        background-color: magenta
+                        width: 20%
+
+                    #col3
+                        background-color: pink
+                        width: 40%
+
+                #lower-half
+                    background-color: purple
+
+            input[type="text"]
+                border-color: $baseColor3
+                font-size: 1em
+                width: 30%
 
     &.partly-visible
+        height: 1%
         margin-top: 3%
-        width: 46%
+        width: 60%
 
         #title
             display: none

templates/about.html

@@ -0,0 +1,11 @@
+= extends "layout.html"
+
+= block title
+  About
+= endblock
+
+= block body
+  <div>
+    About us, son.
+  </div>
+= endblock

templates/developers.html

@@ -0,0 +1,11 @@
+= extends "layout.html"
+
+= block title
+  About
+= endblock
+
+= block body
+  <div>
+    For developers, son.
+  </div>
+= endblock

templates/index.html

@@ -10,12 +10,40 @@
 = endblock
 
 = block body
-  <div id="search-field">
+  <div id="search-field" class="partly-visible">
     <div id="title">
       <span id="title-bit">bit</span><span id="title-angle">&laquo;</span><span id="title-shift">shift</span>
     </div>
     <form id="search-bar">
-      <input type="text">
+      <input type="text" name="query">
+      <div id="advanced-search">
+
+        <!-- Tags are closed on the following line to remove whitespace between divs. -->
+        <div id="col1">
+          H
+        </div><div id="col2">
+          H
+        </div><div id="col3">
+          <div id="upper-half">
+            <div id="col1">
+              A
+            </div><div id="col2">
+              B
+            </div><div id="col3">
+              C
+            </div>
+          </div>
+          <div id="lower-half">
+            Z
+          </div>
+        </div>
+          <!-- Languages <input type="text" name="languages"><br> -->
+          <!-- Authors <input type="text" name="authors"><br> -->
+          <!-- Symbols <input type="text" name="symbols"><br> -->
+          <!-- Functions <input type="text" name="functions"><br> -->
+          <!-- Classes <input type="text" name="classes"><br> -->
+          <!-- Variables <input type="text" name="variables"><br> -->
+      </div>
     </form>
   </div>