Two column show layout
This commit is contained in:
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -6,11 +6,12 @@ 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')
|
||||||
|
.col-xs-12.col-sm-6
|
||||||
section.name.row
|
section.name.row
|
||||||
.col-xs-12.col-sm-2.step-num
|
.col-xs-12.col-lg-2.step-num
|
||||||
span.glyphicon.glyphicon-info-sign
|
span.glyphicon.glyphicon-info-sign(title='Lunch Run Info')
|
||||||
.col-xs-12.col-sm-10
|
.col-xs-12.col-lg-10
|
||||||
.form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}")
|
.form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}")
|
||||||
input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name')
|
input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name')
|
||||||
div(ng-show='form.Name.$dirty && form.Name.$invalid')
|
div(ng-show='form.Name.$dirty && form.Name.$invalid')
|
||||||
@@ -19,9 +20,9 @@ block interiorcontent
|
|||||||
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid")
|
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid")
|
||||||
|
|
||||||
section.row
|
section.row
|
||||||
.col-xs-12.col-sm-2.step-num
|
.col-xs-12.col-lg-2.step-num
|
||||||
span.glyphicon.glyphicon-user
|
span.glyphicon.glyphicon-user(title='Your Info')
|
||||||
.col-xs-12.col-sm-10
|
.col-xs-12.col-lg-10
|
||||||
.form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}")
|
.form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}")
|
||||||
input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName')
|
input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName')
|
||||||
div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid")
|
div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid")
|
||||||
@@ -38,9 +39,9 @@ block interiorcontent
|
|||||||
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")
|
||||||
@@ -51,14 +52,15 @@ block interiorcontent
|
|||||||
.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
|
section.invitees.row
|
||||||
.col-xs-12.col-sm-2.step-num
|
.col-xs-12.col-lg-2.step-num
|
||||||
span.glyphicon.glyphicon-list
|
span.glyphicon.glyphicon-list(title='Lunch Invitees')
|
||||||
.col-xs-12.col-sm-10
|
.col-xs-12.col-lg-10
|
||||||
.invitee.clearfix(ng-repeat='i in invitees')
|
.invitee.clearfix(ng-repeat='i in invitees')
|
||||||
ng-form(name='inviteeForm')
|
ng-form(name='inviteeForm')
|
||||||
.row
|
.row
|
||||||
.col-xs-12.col-sm-5
|
.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}")
|
.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")
|
input.form-control.input-lg(ng-model='i.name',required,placeholder='Name',name="Name")
|
||||||
div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid')
|
div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid')
|
||||||
@@ -66,7 +68,7 @@ block interiorcontent
|
|||||||
span(ng-show='inviteeForm.Name.$error.required') Give this person a name
|
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')
|
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$valid')
|
||||||
|
|
||||||
.col-xs-12.col-sm-5
|
.col-xs-10
|
||||||
.form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}")
|
.form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}")
|
||||||
input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email")
|
input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email")
|
||||||
div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid')
|
div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid')
|
||||||
@@ -75,12 +77,10 @@ block interiorcontent
|
|||||||
span(ng-show='inviteeForm.Email.$error.email') That doesn't look like a valid 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')
|
span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$valid')
|
||||||
|
|
||||||
.col-xs-12.col-sm-2
|
.col-xs-2
|
||||||
button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)')
|
button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)')
|
||||||
span.glyphicon.glyphicon-remove
|
span.glyphicon.glyphicon-remove
|
||||||
|
|
||||||
.row
|
|
||||||
.col-xs-12.col-sm-4.col-sm-offset-8
|
|
||||||
button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()')
|
button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()')
|
||||||
span.glyphicon.glyphicon-plus
|
span.glyphicon.glyphicon-plus
|
||||||
| Invite another!
|
| Invite another!
|
||||||
|
|||||||
Reference in New Issue
Block a user