From c937a03355e499ab990873bc387d4a370fd65039 Mon Sep 17 00:00:00 2001 From: Nick Cappadona Date: Sun, 8 Nov 2015 23:43:10 -0500 Subject: [PATCH] Overhaul to form markup - checkbox values as btns Toggle state for checkboxes as buttons is still WIP for bootstrap v4 (twbs/bootstrap#17599). Will stack and go for multiple columns next. --- app/index.static.jade | 166 ++++++++++++++++++++++++------------------ 1 file changed, 94 insertions(+), 72 deletions(-) diff --git a/app/index.static.jade b/app/index.static.jade index 4dce4ae..88dcff7 100644 --- a/app/index.static.jade +++ b/app/index.static.jade @@ -25,78 +25,100 @@ html(lang='en') h3#current_loc_label Mann Library #counting_container form#count_form - #activityGroupContainer - .activityGroup.clearfix - h5.actGroupLabel Participants - .leftActivities.activityContainer - input#check29.check.jqButton.activityButton.ui-helper-hidden-accessible(type='checkbox', value='AF580A6B5B914891B06535A0E5AC259E') - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check29', role='button') - span.ui-button-text 1 person - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check31', role='button') - span.ui-button-text 5-7 people - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check39', role='button') - span.ui-button-text 10+ people - input#check30.check.jqButton.activityButton.ui-helper-hidden-accessible(type='checkbox', value='82AB657A3BEC46418FCD2D1423CC8832') - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check30', role='button') - span.ui-button-text 2-4 people - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check32', role='button') - span.ui-button-text 8-10 people - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check71', role='button') - span.ui-button-text 0 (No one is present) - h5.actGroupLabel Activity - .leftActivities.activityContainer - input#check40.check.jqButton.activityButton.ui-helper-hidden-accessible(type='checkbox', value='C3B4B84762E04AC4A8A48272655ED40A') - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check40', role='button') - span.ui-button-text Studying / reading - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check42', role='button') - span.ui-button-text Socializing - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check70', role='button') - span.ui-button-text NA - no activity - input#check41.check.jqButton.activityButton.ui-helper-hidden-accessible(type='checkbox', value='8423DFF1CD134DEB9D8E5A503C8685DC') - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check41', role='button') - span.ui-button-text Sleeping - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check69', role='button') - span.ui-button-text Chilling (Not Sleeping) - h5.actGroupLabel Furniture Usage - .leftActivities.activityContainer - input#check94.check.jqButton.activityButton.ui-helper-hidden-accessible(type='checkbox', value='5D28D488317F4FCE9A8FC69AAFBC1D80') - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check94', role='button') - span.ui-button-text Study Carrel/Pod - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check44', role='button') - span.ui-button-text Group Table (2+) - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check61', role='button') - span.ui-button-text Table Counter Height - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check48', role='button') - span.ui-button-text Soft Seating (Couches / Soft Chairs / Ottomans) - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check74', role='button') - span.ui-button-text Fixed LCD - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check50', role='button') - span.ui-button-text Whiteboards - input#check72.check.jqButton.activityButton.ui-helper-hidden-accessible(type='checkbox', value='B5A1B3F6A2694B8BB0B0ED91D854FBF6') - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check72', role='button') - span.ui-button-text Indiv Table (1 Only) - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check62', role='button') - span.ui-button-text Booth - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check66', role='button') - span.ui-button-text Laptop Table - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check47', role='button') - span.ui-button-text Bean Bags - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check46', role='button') - span.ui-button-text Mobile LCD - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check75', role='button') - span.ui-button-text N/A - no furniture - h5.actGroupLabel Computer Usage - .leftActivities.activityContainer - input#check76.check.jqButton.activityButton.ui-helper-hidden-accessible(type='checkbox', value='1B56857B68A741EF807051481D07A5FB') - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check76', role='button') - span.ui-button-text Built in Computer - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check28', role='button') - span.ui-button-text Tablet - input#check27.check.jqButton.activityButton.ui-helper-hidden-accessible(type='checkbox', value='CA049B2716134A4F8B4ABCEF04F169D3') - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check27', role='button') - span.ui-button-text Laptop - label.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only(for='check73', role='button') - span.ui-button-text NA - no computer + #activity-groups + fieldset.form-group.activity-group + h5.activity-group-label Participants + .btn-group(data-toggle="buttons") + label.btn.btn-secondary(for='check1', role='button') + input#check1(type='checkbox', autocomplete='off') + | 1 person + label.btn.btn-secondary(for='check4', role='button') + input#check4(type='checkbox', autocomplete='off') + | 2-4 people + label.btn.btn-secondary(for='check2', role='button') + input#check2(type='checkbox', autocomplete='off') + | 5-7 people + label.btn.btn-secondary(for='check5', role='button') + input#check5(type='checkbox', autocomplete='off') + | 8-10 people + label.btn.btn-secondary(for='check3', role='button') + input#check3(type='checkbox', autocomplete='off') + | 10+ people + label.btn.btn-secondary(for='check6', role='button') + input#check6(type='checkbox', autocomplete='off') + | 0 (No one is present) + fieldset.form-group.activity-group + h5.activity-group-label Activity + .btn-group(data-toggle="buttons") + label.btn.btn-secondary(for='check7', role='button') + input#check7(type='checkbox', autocomplete='off') + | Studying/reading + label.btn.btn-secondary(for='check8', role='button') + input#check8(type='checkbox', autocomplete='off') + | Socializing + label.btn.btn-secondary(for='check9', role='button') + input#check9(type='checkbox', autocomplete='off') + | NA - no activity + label.btn.btn-secondary(for='check10', role='button') + input#check10(type='checkbox', autocomplete='off') + | Sleeping + label.btn.btn-secondary(for='check11', role='button') + input#check11(type='checkbox', autocomplete='off') + | Chilling (not sleeping) + fieldset.form-group.activity-group + h5.activity-group-label Furniture Usage + .btn-group(data-toggle="buttons") + label.btn.btn-secondary(for='check12', role='button') + input#check12(type='checkbox', autocomplete='off') + | Study Carrel/Pod + label.btn.btn-secondary(for='check13', role='button') + input#check13(type='checkbox', autocomplete='off') + | Group Table (2+) + label.btn.btn-secondary(for='check14', role='button') + input#check14(type='checkbox', autocomplete='off') + | Table Counter Height + label.btn.btn-secondary(for='check15', role='button') + input#check15(type='checkbox', autocomplete='off') + | Soft Seating (Couches / Soft Chairs / Ottomans) + label.btn.btn-secondary(for='check16', role='button') + input#check16(type='checkbox', autocomplete='off') + | Fixed LCD + label.btn.btn-secondary(for='check17', role='button') + input#check17(type='checkbox', autocomplete='off') + | Whiteboards + label.btn.btn-secondary(for='check18', role='button') + input#check18(type='checkbox', autocomplete='off') + | Indiv Table (1 Only) + label.btn.btn-secondary(for='check19', role='button') + input#check19(type='checkbox', autocomplete='off') + | Booth + label.btn.btn-secondary(for='check20', role='button') + input#check20(type='checkbox', autocomplete='off') + | Laptop Table + label.btn.btn-secondary(for='check21', role='button') + input#check21(type='checkbox', autocomplete='off') + | Bean Bags + label.btn.btn-secondary(for='check22', role='button') + input#check22(type='checkbox', autocomplete='off') + | Mobile LCD + label.btn.btn-secondary(for='check23', role='button') + input#check23(type='checkbox', autocomplete='off') + | N/A - no furniture + fieldset.form-group.activity-group + h5.activity-group-label Computer Usage + .btn-group(data-toggle="buttons") + label.btn.btn-secondary(for='check24', role='button') + input#check24(type='checkbox', autocomplete='off') + | Built in Computer + label.btn.btn-secondary(for='check25', role='button') + input#check25(type='checkbox', autocomplete='off') + | Tablet + label.btn.btn-secondary(for='check26', role='button') + input#check26(type='checkbox', autocomplete='off') + | Laptop + label.btn.btn-secondary(for='check27', role='button') + input#check27(type='checkbox', autocomplete='off') + | NA - no computer input#countInput(type='number', name='countInput', value='1', min='1') input#goesup.tappable(type='button', name='goesup', value='Count') #sidebar.col-xs-6.col-sm-3.sidebar-offcanvas.bg-faded