From c8dcfde8c86b8873ce86a664610e6f73b14723dc Mon Sep 17 00:00:00 2001
From: Severyn Kozak <severyn.kozak@gmail.com>
Date: Tue, 13 May 2014 21:24:05 -0400
Subject: [PATCH] Simplify form layout.

Add:
    templates/index.html
        -Simplify form layout: reduce the number of independent adjacent `div`s,
        and position `label`s above their corresponding `input` elements.

    static/sass/index.sass
        -Remove now superfluous positioning rules for the previous layout.
---
 static/sass/index.sass | 51 ++++++++++++++-----------------------
 templates/index.html   | 69 +++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 73 insertions(+), 47 deletions(-)

diff --git a/static/sass/index.sass b/static/sass/index.sass
index e3ce12c..ac49eb4 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -42,7 +42,7 @@ div#search-field
             border: 1px solid $baseColor1
             font-size: 1.1em
             margin-bottom: 0px
-            padding: 3px
+            padding: 6px
             width: 100%
 
         div#advanced-search
@@ -52,50 +52,37 @@ div#search-field
             overflow: auto
 
             >div
+                @include vendor(box-sizing, border-box)
+
                 float: left
                 height: 100%
 
             >#col1
-                background-color: red
                 width: 10%
 
             >#col2
-                background-color: yellow
-                width: 15%
+                width: 84%
+
+                ul
+                    list-style: none
+
+                    li
+                        margin-bottom: 0.5em
 
-            >#col3
-                background-color: blue
-                width: 75%
+                        label
+                            display: block
+                            font-size: 1.1em
 
-                div
+                input[type="text"]
+                    border-color: $baseColor3
+                    font-size: 1em
+                    padding: 2px
                     width: 100%
 
                 #upper-half
-                    background-color: brown
-
-                    div
+                    >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%
+                        width: 50%
 
     &.partly-visible
         height: 1%
diff --git a/templates/index.html b/templates/index.html
index 26db288..edef6a0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,38 +11,77 @@
 
 = block body
   <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>
+      <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" name="query">
       <div id="advanced-search">
 
         <!-- Tags are closed on the following line to remove whitespace between divs. -->
         <div id="col1">
-          H
+          + Add group
         </div><div id="col2">
-          H
-        </div><div id="col3">
           <div id="upper-half">
             <div id="col1">
-              A
+              <ul>
+                <li>
+                  <label for="languages">Languages</label>
+                  <input type="text" name="languages" id="languages"><br>
+                </li>
+
+                <li>
+                  <label for="authors">Authors</label>
+                  <input type="text" name="authors" id="authors"><br>
+                </li>
+
+              </ul>
+
             </div><div id="col2">
-              B
-            </div><div id="col3">
-              C
+              <ul>
+                <li>
+                  <label for="date">Date last modified</label>
+                  <input type="text" name="date-last-modifi id="date"ed">
+                </li>
+
+                <li>
+                  <label for="date">Date created</label>
+                  <input type="text" name="date-creat id="date"ed">
+                </li>
+
+              </ul>
             </div>
           </div>
+
           <div id="lower-half">
-            Z
+            <ul>
+              <li>
+                <label for="symbols">Symbols</label>
+                <input type="text" name="symbols" id="symbols"><br>
+              </li>
+
+              <li>
+                <label for="functions">Functions</label>
+                <input type="text" name="functions" id="functions"><br>
+              </li>
+
+              <li>
+                <label for="classes">Classes</label>
+                <input type="text" name="classes" id="classes"><br>
+              </li>
+
+              <li>
+                <label for="variables">Variables</label>
+                <input type="text" name="variables" id="variables"><br>
+              </li>
+
+            <u/l>
           </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>