Change advanced-search button, mod error messages.

Add:
        templates/index.html, static/sass/index.sass,
        static/img/index/search_bar_magnifying_glass.png
                -Replace the magnifying-glass advanced-search icon with a simple
                textual button.

        static/(js/index.js, sass/index.sass)
                -Slightly modify the appearance of error messages; add message
                for no results.

static/js/index.js

@@ -43,7 +43,7 @@ var searchResultsPage = 1;
             advancedSearchButton.addClass("clicked");
         }
         else {
-            advancedSearchDiv.fadeOut(300).removeClass("visible");
+            advancedSearchDiv.hide().removeClass("visible");
             advancedSearchButton.removeClass("clicked");
             if($("div#results .result").length == 0)
                 searchField.removeClass("partly-visible");
@@ -393,6 +393,8 @@ function queryServer(){
         var resultDivs = [];
         if("error" in result)
             insertErrorMessage(result["error"]);
+        else if(result["results"].length == 0)
+            insertErrorMessage("No search results.");
         else
             for(var codelet = 0; codelet < result["results"].length; codelet++){
                 resultDivs.push(createResult(result["results"][codelet]));
@@ -439,7 +441,11 @@ function loadMoreResults(){
  * @param msg (str) The message string.
  */
 function insertErrorMessage(msg){
-    var error = $("<div id='error'><span>Error: </span></div>");
+    var error = $(
+            [
+                "<div id='error'><span id='s1'>Error</span> ",
+                "<span id='s2'>&raquo;</span> </div>"
+            ].join(""));
     error.append(msg);
     resultsDiv.appendChild(error[0]);
 }

static/sass/index.sass

@@ -115,40 +115,29 @@ div#search-field
             margin-bottom: 0px
             padding: 6px
 
-        input[type="text"]
-            width: 85%
+        input[type="text"]#query
+            width: 100%
 
             &:hover
                 border-color: $baseColor1
 
         button#advanced-search
             background-color: white
-            border: 1px solid white
-            width: 15%
-            height: 10%
-            padding: 0px
-            float: right
+            border: none
+            color: $baseColor2
+            font-size: 1.1em
+            font-style: italic
 
             &:hover
-                img
-                    background-color: black
-                    cursor: pointer
+                color: $baseColor1
+                cursor: pointer
 
             &.clicked
-                img
-                    background-color: $baseColor1
+                color: $baseColor1
 
             &:focus
                 outline: 0
 
-            img
-                @extend .t3
-
-                background-color: $baseColor2
-                margin-top: 5px
-                width: 26px
-                height: 26px
-
     &.partly-visible
         margin-top: 0%
         position: absolute
@@ -168,10 +157,14 @@ div#search-field
             margin-right: auto
             width: 60%
 
-            input:hover
+            input
                 @extend .t3
 
-                border: 1px solid $baseColor1
+                &#query
+                    width: 80%
+
+                &:hover
+                    border: 1px solid $baseColor1
 
 div#advanced-search
     background-color: white
@@ -338,9 +331,15 @@ div#results
         text-align: center
 
         span
-            color: $baseColor1
+            margin-right: 10px
             font-size: 150%
 
+            &#s1
+                color: $baseColor1
+
+            &#s2
+                color: $baseColor2
+
     &.disable-hover
         pointer-events: none
 

templates/index.html

@@ -28,9 +28,10 @@
     </a>
 
     <form id="search-bar">
-      <input type="text" name="query"
+      <input id="query" type="text" name="query"
       ><button id="advanced-search" title="advanced search" type="button">
-        <img src="img/index/search_bar_magnifying_glass.png">
+        Adv. Search
+        <!-- <img src="img/index/search_bar_magnifying_glass.png"> -->
       </button>
 
       <div id="advanced-search">
@@ -46,6 +47,7 @@
             </button>
           </div>
         </div>
+
         <div id="sidebar">
           <ul>
             <li>
@@ -82,6 +84,7 @@
             </li>
           </ul>
         </div>
+
         <div id="search-groups">
           <div class="search-group" id="selected">
             <div id="language">