From 60cf09b17238fe83e5ebad6fdf6273d11536e841 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=AD=C3=B0ir=20Valberg=20Gu=C3=B0mundsson?=
 <valberg@orn.li>
Date: Fri, 21 Apr 2017 15:02:20 +0200
Subject: [PATCH] Making checkboxes more nice.

---
 src/program/templates/schedule_base.html | 29 +++++++++++++++++++++---
 src/static_src/css/bornhack.css          | 29 ++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/program/templates/schedule_base.html b/src/program/templates/schedule_base.html
index c0f74cc5..e9fa8f63 100644
--- a/src/program/templates/schedule_base.html
+++ b/src/program/templates/schedule_base.html
@@ -30,10 +30,21 @@
                     {% for type in camp.event_types %}
                     <li>
                         <input type="checkbox"
-                               name="event_type"
+                               name="event-type-{{ type.slug }}"
+                               id="event-type-{{ type.slug }}"
                                value="{{ type.slug }}"
                                class="form-control event-type-checkbox"
-                               checked /> {{ type.name }}
+                               checked />
+
+                        <div class="btn-group">
+                            <label for="event-type-{{ type.slug }}" class="btn btn-default" style="min-width: 200px; text-align: left;">
+                                <i class="fa fa-minus"></i>
+                                <i class="fa fa-plus"></i>
+                                &nbsp;&nbsp;
+                                {{ type.name }}
+                            </label>
+                        </div>
+
                     </li>
                     {% endfor %}
                     </ul>
@@ -45,10 +56,22 @@
                     {% for location in camp.event_locations %}
                     <li>
                         <input type="checkbox"
+                               name="location-{{ location.slug }}"
+                               id="location-{{ location.slug }}"
                                name="locations"
                                value="{{ location.slug }}"
                                class="form-control location-checkbox"
-                               checked /> {{ location.name }}
+                               checked />
+
+                        <div class="btn-group">
+                            <label for="location-{{ location.slug }}" class="btn btn-default" style="min-width: 200px; text-align: left;">
+                                <i class="fa fa-minus"></i>
+                                <i class="fa fa-plus"></i>
+                                &nbsp;&nbsp;
+                                {{ location.name }}
+                            </label>
+                        </div>
+
                     </li>
                     {% endfor %}
                     </ul>
diff --git a/src/static_src/css/bornhack.css b/src/static_src/css/bornhack.css
index adafdf42..6e4b73ac 100644
--- a/src/static_src/css/bornhack.css
+++ b/src/static_src/css/bornhack.css
@@ -232,3 +232,32 @@ footer {
   display: flex;
   flex-wrap: wrap;
 }
+
+.form-group input[type="checkbox"] {
+    display: none;
+  }
+
+.form-group input[type="checkbox"] + .btn-group > label span {
+    width: 20px;
+}
+
+.form-group input[type="checkbox"] + .btn-group > label i:first-child {
+    display: none;
+}
+.form-group input[type="checkbox"] + .btn-group > label i:last-child {
+    display: inline-block;
+}
+
+.form-group input[type="checkbox"]:checked + .btn-group > label i:first-child {
+    display: inline-block;
+}
+.form-group input[type="checkbox"]:checked + .btn-group > label i:last-child {
+    display: none;
+}
+.form-group input[type="checkbox"]:checked + .btn-group > label {
+    color: #333;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+}