reynir/bornhack-website
1
0
Fork 0
Code Issues Pull requests 1 Releases Wiki Activity

Making checkboxes more nice.

Browse source
This commit is contained in:
Víðir Valberg Guðmundsson 2017-04-21 15:02:20 +02:00
parent 9fb372e114
commit 60cf09b172
2 changed files with 55 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/program/templates/schedule_base.html
View file

@ -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>

29
src/static_src/css/bornhack.css
View file

@ -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);
}