Add advanced-search icon, move title to corner.

Add:
    static/js/index.js
        -Move `div#title` to the corner of the page when the search bar is
        `.partly-visible` (ie, results are displayed).

    templates/index.html, static/(sass/index.sass, img/*.png)
        -Replace the advanced-search button with a magnifying glass icon.

static/js/index.js

@@ -7,13 +7,17 @@ var advancedSearchDiv = $("div#advanced-search");
 var advancedSearchButton = $("button#advanced-search");
 advancedSearchDiv.hide();
 advancedSearchButton.click(function(){
+    var searchField = $("div#search-field");
     if(!advancedSearchDiv.hasClass("visible")){
-        advancedSearchDiv.fadeIn(500);
-        advancedSearchDiv.addClass("visible");
+        searchField.addClass("partly-visible");
+        advancedSearchDiv.fadeIn(500).addClass("visible");
+        advancedSearchButton.addClass("clicked");
     }
     else {
-        advancedSearchDiv.fadeOut(300);
-        advancedSearchDiv.removeClass("visible");
+        advancedSearchDiv.fadeOut(300).removeClass("visible");
+        advancedSearchButton.removeClass("clicked");
+        if($("div#results .result").length == 0)
+            searchField.removeClass("partly-visible");
     }
 });
 
@@ -38,7 +42,7 @@ $("#languages.typeahead").typeahead({
     },
     {
         name: "languages",
-        displayKey: 'value',
+        displayKey: "value",
         source: languages.ttAdapter()
 });
 
@@ -94,13 +98,14 @@ function finishedTyping(){
 
     clearResults();
     if(searchBar.value){
-        if(!searchField.hasClass("partly-visible"))
-            searchField.addClass("partly-visible");
-
+        searchField.addClass("partly-visible");
         populateResults();
     }
-    else
+    else {
         searchField.removeClass("partly-visible");
+        $("div#advanced-search").fadeOut(50);
+        advancedSearchButton.removeClass("clicked");
+    }
 }
 
 /*
@@ -145,7 +150,7 @@ function queryServer(){
         newDiv.style.textAlign = "center";
         newDiv.style.color = "#" + Math.floor(Math.random() *
                 16777215).toString(16);
-        resultDivs.push(newDiv)
+        resultDivs.push(newDiv);
     }
 
     return resultDivs;
@@ -164,6 +169,7 @@ function loadMoreResults(){
                 return function(){
                     divReference.classList.add("cascade");
                 };
-            }(newDiv)), result * 20);
+            }(newDiv)),
+            result * 20);
     }
 }

static/sass/index.sass

@@ -46,14 +46,14 @@ div#search-field
     margin: auto
     margin-top: 15%
     max-height: 100px
-    position: absolute
     right: 0
+    position: absolute
     top: 0
-    width: 34%
+    width: 40%
 
     #title
         font-size: 400%
-        padding-bottom: 0.5em
+        padding-bottom: 0.2em
         text-align: center
 
         #title-bit
@@ -67,7 +67,6 @@ div#search-field
             font-style: italic
 
     form#search-bar
-
         input[type="text"], button
             @extend .t3
             @include vendor(box-sizing, border-box)
@@ -76,24 +75,36 @@ div#search-field
             font-size: 110%
             margin-bottom: 0px
             padding: 6px
-            width: 80%
+
+        input[type="text"]
+            width: 85%
 
             &:hover
                 border-color: $baseColor1
 
         button
-            background-color: $lightBlue
-            border: 1px solid $baseColor2
-            color: white
-            display: inline
-            white-space: nowrap
-            overflow: hidden
-            width: 20%
+            background-color: white
+            border: 1px solid white
+            width: 15%
+            height: 10%
+            padding: 0px
+            float: right
 
             &.clicked, &:hover
-                @extend .t3
+                img
+                    @extend .t3
+
+                    background-color: black
+                    cursor: pointer
+
+            &:focus
+                outline: 0
 
-                background-color: $blue
+            img
+                background-color: $baseColor2
+                margin-top: 5px
+                width: 26px
+                height: 26px
 
         div#advanced-search
             background-color: white
@@ -121,24 +132,27 @@ div#search-field
                     li
                         margin-bottom: 0.5em
 
+                        &:hover, &:focus
+                            input[type="text"]
+                                border-color: $baseColor1
+
+                            label
+                                @extend .t3
+                                color: black
+
                         label
                             display: block
                             font-size: 110%
+                            color: #747575
 
                 input[type="text"]
-                    @extend .t2
+                    @extend .t3
 
                     border-color: $baseColor3
                     font-size: 100%
                     padding: 4px
                     width: 100%
 
-                    &:hover
-                        border-color: $baseColor2
-
-                    &:focus
-                        border-color: $baseColor1
-
                 #upper-half
                     >div
                         float: left
@@ -148,15 +162,31 @@ div#search-field
                         input[type="text"]
                             width: 50%
 
+                #lower-half
+                    padding-bottom: 20px
+
     &.partly-visible
-        height: 1%
-        margin-top: 3%
-        width: 60%
+        margin-top: 0%
+        padding-bottom: 3%
+        position: absolute
+        width: 100%
 
         #title
-            display: none
+            position: absolute
+            top: -1%
+            left: 1%
+
+            span
+                font-size: 50%
+
+        form#search-bar
+            padding-top: 3%
+            margin-left: auto
+            margin-right: auto
+            width: 60%
 
 div#results
+    margin: 3% auto 0 auto
     margin-left: auto
     margin-right: auto
     width: 80%

templates/index.html

@@ -27,7 +27,9 @@
 
     <form id="search-bar">
       <input type="text" name="query"
-      ><button id="advanced-search">Advanced search</button>
+      ><button id="advanced-search" title="advanced search">
+        <img src="static/img/search_bar_magnifying_glass.png">
+      </button>
 
       <div id="advanced-search">
         <!-- Tags are closed on the following line to remove whitespace between divs. -->