Two column show layout

This commit is contained in:
Ben Ramey
2014-06-23 18:42:05 -05:00
parent 4360ccc072
commit 58a5db429c
2 changed files with 74 additions and 74 deletions

View File

@@ -4,10 +4,10 @@
| lunch run | lunch run
span.text-muted |me span.text-muted |me
.row .row
.col-xs-12.col-sm-8 .col-xs-12.col-md-8
h1.page-title h1.page-title
block pagetitle block pagetitle
.col-xs-12.col-sm-4 .col-xs-12.col-md-4
.page-actions .page-actions
block pageactions block pageactions

View File

@@ -6,84 +6,84 @@ block pagetitle
block interiorcontent block interiorcontent
.create-run-form(ng-controller='CreateRunCtrl') .create-run-form(ng-controller='CreateRunCtrl')
form(name='form',novalidate,role='form') form.row(name='form',novalidate,role='form')
section.name.row .col-xs-12.col-sm-6
.col-xs-12.col-sm-2.step-num section.name.row
span.glyphicon.glyphicon-info-sign .col-xs-12.col-lg-2.step-num
.col-xs-12.col-sm-10 span.glyphicon.glyphicon-info-sign(title='Lunch Run Info')
.form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}") .col-xs-12.col-lg-10
input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name') .form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}")
div(ng-show='form.Name.$dirty && form.Name.$invalid') input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name')
span.glyphicon.glyphicon-remove.form-control-feedback div(ng-show='form.Name.$dirty && form.Name.$invalid')
span(ng-show='form.Name.$error.required') What should we call you lunch run? span.glyphicon.glyphicon-remove.form-control-feedback
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid") span(ng-show='form.Name.$error.required') What should we call you lunch run?
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid")
section.row
.col-xs-12.col-sm-2.step-num section.row
span.glyphicon.glyphicon-user .col-xs-12.col-lg-2.step-num
.col-xs-12.col-sm-10 span.glyphicon.glyphicon-user(title='Your Info')
.form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}") .col-xs-12.col-lg-10
input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName') .form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}")
div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid") input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName')
span.glyphicon.glyphicon-remove.form-control-feedback div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid")
span(ng-show='form.CreatorName.$error.required') What's your name? span.glyphicon.glyphicon-remove.form-control-feedback
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.CreatorName.$dirty && form.CreatorName.$valid') span(ng-show='form.CreatorName.$error.required') What's your name?
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.CreatorName.$dirty && form.CreatorName.$valid')
.form-group(ng-class="{'has-error has-feedback': form.Email.$dirty && form.Email.$invalid, 'has-success has-feedback': form.Email.$dirty && form.Email.$valid}") .form-group(ng-class="{'has-error has-feedback': form.Email.$dirty && form.Email.$invalid, 'has-success has-feedback': form.Email.$dirty && form.Email.$valid}")
input#creatorEmail.form-control.input-lg(type='email',ng-model='run.creatorEmail',required,placeholder='Your email',name='Email') input#creatorEmail.form-control.input-lg(type='email',ng-model='run.creatorEmail',required,placeholder='Your email',name='Email')
div(ng-show='form.Email.$dirty && form.Email.$invalid') div(ng-show='form.Email.$dirty && form.Email.$invalid')
span.glyphicon.glyphicon-remove.form-control-feedback span.glyphicon.glyphicon-remove.form-control-feedback
span(ng-show='form.Email.$error.required') What's your email address? span(ng-show='form.Email.$error.required') What's your email address?
span(ng-show='form.Email.$error.email') That doesn't look like a valid email address. span(ng-show='form.Email.$error.email') That doesn't look like a valid email address.
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Email.$dirty && form.Email.$valid') span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Email.$dirty && form.Email.$valid')
section.row section.row
.col-xs-12.col-sm-2.step-num .col-xs-12.col-lg-2.step-num
span.glyphicon.glyphicon-map-marker span.glyphicon.glyphicon-map-marker(title='Lunch Location')
.col-xs-12.col-sm-10 .col-xs-12.col-lg-10
.form-group(ng-class="{'has-error has-feedback': form.Restaurant.$dirty && form.Restaurant.$invalid, 'has-success has-feedback': form.Restaurant.$dirty && form.Restaurant.$valid}") .form-group(ng-class="{'has-error has-feedback': form.Restaurant.$dirty && form.Restaurant.$invalid, 'has-success has-feedback': form.Restaurant.$dirty && form.Restaurant.$valid}")
input#restaurant.form-control.input-lg(type='text',ng-model='run.restaurant',placeholder='Restaurant',name='Restaurant',required) input#restaurant.form-control.input-lg(type='text',ng-model='run.restaurant',placeholder='Restaurant',name='Restaurant',required)
div(ng-show="form.Restaurant.$dirty && form.Restaurant.$invalid") div(ng-show="form.Restaurant.$dirty && form.Restaurant.$invalid")
span.glyphicon.glyphicon-remove.form-control-feedback span.glyphicon.glyphicon-remove.form-control-feedback
span(ng-show='form.Restaurant.$error.required') Where are you going to eat? span(ng-show='form.Restaurant.$error.required') Where are you going to eat?
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Restaurant.$dirty && form.Restaurant.$valid') span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Restaurant.$dirty && form.Restaurant.$valid')
.form-group .form-group
input#menuUrl.form-control.input-lg(type='url',ng-model='run.menuUrl',placeholder='Menu URL') input#menuUrl.form-control.input-lg(type='url',ng-model='run.menuUrl',placeholder='Menu URL')
.col-xs-12.col-sm-6
section.invitees.row
.col-xs-12.col-lg-2.step-num
span.glyphicon.glyphicon-list(title='Lunch Invitees')
.col-xs-12.col-lg-10
.invitee.clearfix(ng-repeat='i in invitees')
ng-form(name='inviteeForm')
.row
.col-xs-10
.form-group(ng-class="{'has-error has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$invalid, 'has-success has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$valid}")
input.form-control.input-lg(ng-model='i.name',required,placeholder='Name',name="Name")
div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid')
span.glyphicon.glyphicon-remove.form-control-feedback
span(ng-show='inviteeForm.Name.$error.required') Give this person a name
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$valid')
section.invitees.row .col-xs-10
.col-xs-12.col-sm-2.step-num .form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}")
span.glyphicon.glyphicon-list input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email")
.col-xs-12.col-sm-10 div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid')
.invitee.clearfix(ng-repeat='i in invitees') span.glyphicon.glyphicon-remove.form-control-feedback
ng-form(name='inviteeForm') span(ng-show='inviteeForm.Email.$error.required') What's this person's email address?
.row span(ng-show='inviteeForm.Email.$error.email') That doesn't look like a valid email address.
.col-xs-12.col-sm-5 span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$valid')
.form-group(ng-class="{'has-error has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$invalid, 'has-success has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$valid}")
input.form-control.input-lg(ng-model='i.name',required,placeholder='Name',name="Name")
div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid')
span.glyphicon.glyphicon-remove.form-control-feedback
span(ng-show='inviteeForm.Name.$error.required') Give this person a name
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$valid')
.col-xs-12.col-sm-5 .col-xs-2
.form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}") button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)')
input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email") span.glyphicon.glyphicon-remove
div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid')
span.glyphicon.glyphicon-remove.form-control-feedback
span(ng-show='inviteeForm.Email.$error.required') What's this person's email address?
span(ng-show='inviteeForm.Email.$error.email') That doesn't look like a valid email address.
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$valid')
.col-xs-12.col-sm-2 button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()')
button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)') span.glyphicon.glyphicon-plus
span.glyphicon.glyphicon-remove |  Invite another!
.row
.col-xs-12.col-sm-4.col-sm-offset-8
button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()')
span.glyphicon.glyphicon-plus
|  Invite another!
section.submit section.submit
button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run,invitees)",ng-disabled="form.$invalid") button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run,invitees)",ng-disabled="form.$invalid")