From 3df930029ff4dcd32b0f72e83f0685a4ba117d92 Mon Sep 17 00:00:00 2001
From: Severyn Kozak <severyn.kozak@gmail.com>
Date: Mon, 19 May 2014 09:49:41 -0400
Subject: [PATCH] Add checkbox-hack menu selection transitions.

Add:
    templates/index.html, static/sass/index.sass
        -Add pure CSS styling for "clicked" buttons, using the checkbox hack.
---
 static/img/search_bar_gear.png | Bin 0 -> 5159 bytes
 static/sass/index.sass         |  47 +++++++++++++++++++++++++++--------------
 templates/index.html           |  40 ++++++++++++++++++++++++++++-------
 3 files changed, 63 insertions(+), 24 deletions(-)
 create mode 100644 static/img/search_bar_gear.png

diff --git a/static/img/search_bar_gear.png b/static/img/search_bar_gear.png
new file mode 100644
index 0000000000000000000000000000000000000000..22ebcdc0a5ffca81fe52a7dac18a53dcaaecfc6c
GIT binary patch
literal 5159
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
a1f%ble=8i)F0nrV0V{K)S^Wj~r2hkEQT#dp

literal 0
HcmV?d00001

diff --git a/static/sass/index.sass b/static/sass/index.sass
index 243d73f..7355036 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -123,14 +123,11 @@ div#search-field
 
             #sidebar
                 padding-left: 1%
-                width: 20%
-
-                *
-                    font-size: 95%
+                width: 25%
 
                 >div
                     color: $baseColor2
-                    font-size: 107%
+                    font-size: 120%
                     padding-top: 5%
 
                 >ul
@@ -139,23 +136,41 @@ div#search-field
                     margin-bottom: 8%
                     margin-top: 2%
 
-                    li button
-                        background-color: #F1F1F1
-                        border: none
-                        width: 80%
+                    li
+                        margin-bottom: 2%
+
+                        label
+                            user-select: none
+
+                            div
+                                @extend .t3
+
+                                background-color: #F1F1F1
+                                border: none
+                                font-size: 96%
+                                padding: 3%
+                                width: 85%
+
+                                &:hover, &.selectedInputField
+                                    @extend .t3
+
+                                    background-color: $baseColor2
+                                    color: white
+                                    width: 90%
 
-                        &.clicked, &:hover
-                            @extend .t2
+                        input[type="checkbox"]
+                            display: none
 
-                            background-color: $baseColor1
-                            color: white
-                            width: 90%
+                            &:checked + label > div
+                                @extend .selectedInputField
 
-                >button#add-group
+                                background-color: $baseColor1
+                                color: white
+                                width: 90%
 
             #search-groups
                 background-color: blue
-                width: 80%
+                width: 75%
 
     &.partly-visible
         margin-top: 0%
diff --git a/templates/index.html b/templates/index.html
index 979e09a..9992f24 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -39,14 +39,38 @@
             Fields
           </div>
           <ul>
-            <li><button id="language">languages</button></li>
-            <li><button id="author">authors</button></li>
-            <li><button id="modified">date last modified</button></li>
-            <li><button id="created">date created</button></li>
-            <li><button id="symbol">symbols</button></li>
-            <li><button id="function">functions</button></li>
-            <li><button id="class">classes</button></li>
-            <li><button id="variable">variables</button></li>
+            <li>
+              <input type="checkbox" id="language"/>
+              <label for="language"><div>languages</div></label>
+            </li>
+            <li>
+              <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>
+            </li>
+            <li>
+              <input type="checkbox" id="created"/>
+              <label for="created"><div>date created</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="symbol"/>
+              <label for="symbol"><div>symbols</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="function"/>
+              <label for="function"><div>functions</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="class"/>
+              <label for="class"><div>classes</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="variable"/>
+              <label for="variable"><div>variables</div></label>
+            </li>
           </ul>
           <button id="add-group">
             +