Add search-group selection/removal.

Add:
    static/js/index.js
        -Add ability to select an existing search group to edit.
        -Add ability to remove search groups with a button.

    static/sass/index.sass
        -Add styling for `div#header`, which contains the titles of both columns
        ("fields" and "search groups") in the advanced search form.

static/js/index.js

@@ -172,20 +172,51 @@ function loadMoreResults(){
 }
 
 var searchGroups = $("div#search-groups");
-// Create a new search group.
+
+// Create a new search group, and update the `#sidebar` checklist accordingly.
 $("button#add-group").click(function(){
-    var searchGroup = $("<div/>", {class : "search-group"});
+    $("div#sidebar input[type=checkbox]").prop("checked", false);
+
+    searchGroups.children("#selected").removeAttr("id");
+    var searchGroup = $("<div/>", {class : "search-group", id : "selected"});
     searchGroups.append(searchGroup.append(createSearchGroupInput("language")));
+    $("div#sidebar input[type=checkbox]#language").prop("checked", true);
 });
 
-$("div#advanced-search #sidebar input[type=checkbox]").click(function(){
-    var fieldId = $(this).attr("id");
+$("button#remove-group").click(function(){
+    var currentGroup = $("div.search-group#selected");
+
+    if($("div.search-group").length == 1)
+        return;
+    else {
+        var nextGroup = currentGroup.prev();
+        if(nextGroup.size() == 0)
+            nextGroup = currentGroup.next();
+    }
+    currentGroup.remove();
+    nextGroup.click();
+});
+
+// Select a search group, and update the `#sidebar` checklist accordingly.
+$(document).on("click", "div.search-group", function(){
+    searchGroups.children("#selected").removeAttr("id");
+    $(this).attr("id", "selected");
+    $("div#sidebar input[type=checkbox]").prop("checked", false);
+    $(this).find("input[type=text]").each(function(){
+        var checkBoxSelector = "div#sidebar input[type=checkbox]";
+        $(checkBoxSelector + "#" + $(this).attr("id")).prop("checked", true);
+    })
+});
+
+// Add an input field to the currently selected search group.
+$("div#sidebar input[type=checkbox]").click(function(){
+    var fieldId = $(this).prop("id");
     if($(this).is(":checked"))
         $("div.search-group#selected").append(
             $.parseHTML(createSearchGroupInput(fieldId)));
     else
         $("div.search-group#selected #" + fieldId).remove()
-})
+});
 
 /*
  * Return an HTML string representing a new input field div in a search group.
@@ -195,8 +226,8 @@ $("div#advanced-search #sidebar input[type=checkbox]").click(function(){
 function createSearchGroupInput(fieldId){
     return [
         "<div id='" + fieldId + "'>",
-            "<div>" + fieldId + "</div>",
-            "<input id='" + "'type='text'>",
+            "<div>" + fieldId.replace(/-/g, " ") + "</div>",
+            "<input id='" + fieldId + "'type='text'/>",
             "<input type='checkbox' name='regex'><span>Regex</span>",
         "</div>"
     ].join("");

static/sass/index.sass

@@ -69,7 +69,11 @@ div#search-field
                 color: $baseColor2
                 font-style: italic
 
+    $minSearchFieldsWidth: 490px
+
     form#search-bar
+        min-width: $minSearchFieldsWidth
+
         input[type="text"], button
             @extend .t3
             @include vendor(box-sizing, border-box)
@@ -113,11 +117,29 @@ div#search-field
             background-color: white
             border: 1px solid $baseColor3
             font-size: 96%
-            min-width: 490px
+            min-width: $minSearchFieldsWidth
             padding-top: 0px
             overflow-x: auto
             height: 400px
 
+            #heading
+                color: $baseColor2
+                display: block
+                font-size: 120%
+                padding-left: 1%
+                padding-top: 1%
+                width: 100%
+
+                div
+                    display: inline-block
+                    font-size: 110%
+
+                    &#col1
+                        width: 25%
+
+                    &#col2
+                        width: 75%
+
             >div
                 @include vendor(box-sizing, border-box)
 
@@ -128,11 +150,6 @@ div#search-field
                 padding-left: 1%
                 width: 25%
 
-                >div
-                    color: $baseColor2
-                    font-size: 120%
-                    padding-top: 5%
-
                 >ul
                     list-style: none
                     padding-left: 0
@@ -175,8 +192,9 @@ div#search-field
                     background-color: $lightBlue
                     border: none
                     color: white
+                    display: block
                     height: 40px
-                    margin-bottom: 10%
+                    margin-bottom: 2%
                     overflow: hidden
                     white-space: nowrap
                     width: 40px
@@ -185,7 +203,7 @@ div#search-field
                         font-size: 150%
                         font-weight: bold
                         margin-left: 6px
-                        margin-right: 10px
+                        margin-right: 14px
 
                     &:hover
                         @extend .t3
@@ -194,23 +212,39 @@ div#search-field
                         cursor: pointer
                         width: 90%
 
+                button#remove-group
+                    @extend button#add-group
+
+                    background-color: #D82D48
+
+                    span
+                        padding-left: 3px
+
+                    &:hover
+                        @extend .t3
+
+                        background-color: #F11437
+
             #search-groups
-                margin-top: 2%
+                margin-top: 1%
                 max-height: 93%
                 overflow-y: auto
                 width: 75%
 
                 .search-group
+                    @include vendor(transition, all 0.6s ease-out)
+
                     background-color: $lightGray
                     padding: 1%
-                    margin-bottom: 1%
+                    margin-bottom: 2%
+                    width: 97%
 
                     >div
                         margin-bottom: 0.7%
 
                         div
                             display: inline-block
-                            width: 20%
+                            width: 18%
 
                         input[type=text]
                             padding: 2px
@@ -228,6 +262,9 @@ div#search-field
                         span
                             font-size: 80%
 
+                    &#selected
+                        background-color: #CACACA
+
     &.partly-visible
         margin-top: 0%
         padding-bottom: 3%

templates/index.html

@@ -34,48 +34,50 @@
       </button>
 
       <div id="advanced-search">
+        <div id="heading">
+          <div id="col1">Fields</div
+          ><div id="col2">Search groups</div>
+        </div>
         <div id="sidebar">
-          <div>
-            Fields
-          </div>
           <ul>
             <li>
-              <input type="checkbox" id="language" checked/>
+              <input type="checkbox" id="language" checked="true">
               <label for="language"><div>languages</div></label>
             </li>
             <li>
-              <input type="checkbox" id="author"/>
+              <input type="checkbox" id="author">
               <label for="author"><div>authors</div></label>
             </li>
             <li>
-              <input type="checkbox" id="modified"/>
-              <label for="modified"><div>date last modified</div></label>
+              <input type="checkbox" id="date-last-modified">
+              <label for="date-last-modified"><div>date last modified</div></label>
             </li>
             <li>
-              <input type="checkbox" id="created"/>
-              <label for="created"><div>date created</div></label>
+              <input type="checkbox" id="date-created">
+              <label for="date-created"><div>date created</div></label>
             </li>
             <li>
-              <input type="checkbox" id="symbol"/>
+              <input type="checkbox" id="symbol">
               <label for="symbol"><div>symbols</div></label>
             </li>
             <li>
-              <input type="checkbox" id="function"/>
+              <input type="checkbox" id="function">
               <label for="function"><div>functions</div></label>
             </li>
             <li>
-              <input type="checkbox" id="class"/>
+              <input type="checkbox" id="class">
               <label for="class"><div>classes</div></label>
             </li>
             <li>
-              <input type="checkbox" id="variable"/>
+              <input type="checkbox" id="variable">
               <label for="variable"><div>variables</div></label>
             </li>
           </ul>
           <button id="add-group">
-            <div>
-              <span>+</span> Add group
-            </div>
+            <div><span>+</span> Add</div>
+          </button>
+          <button id="remove-group">
+            <div><span>-</span> Remove</div>
           </button>
         </div>
         <div id="search-groups">