From 53bc6cde3f3e0dd379a2b615749317adcbdc94d9 Mon Sep 17 00:00:00 2001
From: Severyn Kozak <severyn.kozak@gmail.com>
Date: Mon, 19 May 2014 19:11:44 -0400
Subject: [PATCH] Add `add-group` button, style input fields.

Add:
    templates/index.html, static/sass/index.sass
        -Add element tree for a sample input field.
        -Style input fields such that labels are aligned.
        -Add and style the `add-group` button.
---
 static/sass/_variables.sass |  4 +++-
 static/sass/index.sass      | 49 +++++++++++++++++++++++++++++++++++++++++---
 templates/index.html        | 50 ++++++++++++++++++++++++++++++++-------------
 3 files changed, 85 insertions(+), 18 deletions(-)

diff --git a/static/sass/_variables.sass b/static/sass/_variables.sass
index e9101b7..0fb48d1 100644
--- a/static/sass/_variables.sass
+++ b/static/sass/_variables.sass
@@ -6,5 +6,7 @@ $baseColor1: #A31F34
 $baseColor2: #8A8B8C
 $baseColor3: #C2C0BF
 
-$lightBlue: #4D90FE
+$lightGray: #F1F1F1
+
+$lightBlue: #67A0FD
 $blue: #3177EB
diff --git a/static/sass/index.sass b/static/sass/index.sass
index 7355036..75ecc54 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -70,6 +70,8 @@ div#search-field
                 font-style: italic
 
     form#search-bar
+        min-width: 510px
+
         input[type="text"], button
             @extend .t3
             @include vendor(box-sizing, border-box)
@@ -113,7 +115,8 @@ div#search-field
             background-color: white
             border: 1px solid $baseColor3
             padding-top: 0px
-            overflow: auto
+            overflow-x: auto
+            height: 400px
 
             >div
                 @include vendor(box-sizing, border-box)
@@ -145,7 +148,7 @@ div#search-field
                             div
                                 @extend .t3
 
-                                background-color: #F1F1F1
+                                background-color: $lightGray
                                 border: none
                                 font-size: 96%
                                 padding: 3%
@@ -156,6 +159,7 @@ div#search-field
 
                                     background-color: $baseColor2
                                     color: white
+                                    cursor: pointer
                                     width: 90%
 
                         input[type="checkbox"]
@@ -168,10 +172,49 @@ div#search-field
                                 color: white
                                 width: 90%
 
+                button#add-group
+                    background-color: $lightBlue
+                    border: none
+                    color: white
+                    font-weight: bold
+                    height: 40px
+                    margin-bottom: 10%
+                    width: 40px
+
+                    &:hover
+                        @extend .t3
+
+                        background-color: $blue
+                        cursor: pointer
+
             #search-groups
-                background-color: blue
+                margin-top: 2%
+                max-height: 93%
+                overflow-y: scroll
                 width: 75%
 
+                .search-group
+                    background-color: $lightGray
+                    padding: 1%
+                    margin-bottom: 1%
+
+                    >div
+                        margin-bottom: 0.7%
+
+                        div
+                            display: inline-block
+                            width: 20%
+
+                        input[type=text]
+                            padding: 2px
+                            width: 60%
+
+                        input[type=checkbox]
+                            margin-left: 2%
+
+                        span
+                            font-size: 80%
+
     &.partly-visible
         margin-top: 0%
         padding-bottom: 3%
diff --git a/templates/index.html b/templates/index.html
index 9992f24..c2f3c68 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -73,23 +73,45 @@
             </li>
           </ul>
           <button id="add-group">
-            +
+            <!-- <div> -->
+              +
+            <!-- </div> -->
           </button>
-          <div>
-          </div>
         </div>
         <div id="search-groups">
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
-          <div class="search-group">Hello, world.</div>
+          <div class="search-group">
+            <div>
+              <div>Authors</div>
+              <input type="text">
+              <input type="checkbox" name="regex"><span>Regex?</span>
+            </div>
+            <div>
+              <div>Language</div>
+              <input type="text">
+              <input type="checkbox" name="regex"><span>Regex?</span>
+            </div>
+          </div>
+          <div class="search-group">Hello, world. 2</div>
+          <div class="search-group">Hello, world. 3</div>
+          <div class="search-group">Hello, world. 4</div>
+          <div class="search-group">Hello, world. 5</div>
+          <div class="search-group">Hello, world. 6</div>
+          <div class="search-group">Hello, world. 7</div>
+          <div class="search-group">Hello, world. 8</div>
+          <div class="search-group">Hello, world. 9</div>
+          <div class="search-group">Hello, world. 10</div>
+          <div class="search-group">Hello, world. 11</div>
+          <div class="search-group">Hello, world. 12</div>
+          <div class="search-group">Hello, world. 13</div>
+          <div class="search-group">Hello, world. 14</div>
+          <div class="search-group">Hello, world. 15</div>
+          <div class="search-group">Hello, world. 16</div>
+          <div class="search-group">Hello, world. 17</div>
+          <div class="search-group">Hello, world. 18</div>
+          <div class="search-group">Hello, world. 19</div>
+          <div class="search-group">Hello, world. 20</div>
+          <div class="search-group">Hello, world. 21</div>
+          <div class="search-group">Hello, world. 22</div>
         </div>
       </div>
     </form>