From 58a5db429cda11c2e619c9cb71a620cb6e4b1e66 Mon Sep 17 00:00:00 2001 From: Ben Ramey Date: Mon, 23 Jun 2014 18:42:05 -0500 Subject: [PATCH] Two column show layout --- .../templates/layouts/interior-page.jade | 4 +- assets/linker/templates/run/create.jade | 144 +++++++++--------- 2 files changed, 74 insertions(+), 74 deletions(-) diff --git a/assets/linker/templates/layouts/interior-page.jade b/assets/linker/templates/layouts/interior-page.jade index 819a84c..e324d03 100644 --- a/assets/linker/templates/layouts/interior-page.jade +++ b/assets/linker/templates/layouts/interior-page.jade @@ -4,10 +4,10 @@ | lunch run span.text-muted |me .row - .col-xs-12.col-sm-8 + .col-xs-12.col-md-8 h1.page-title block pagetitle - .col-xs-12.col-sm-4 + .col-xs-12.col-md-4 .page-actions block pageactions diff --git a/assets/linker/templates/run/create.jade b/assets/linker/templates/run/create.jade index 419dbaa..dcb5ecd 100644 --- a/assets/linker/templates/run/create.jade +++ b/assets/linker/templates/run/create.jade @@ -6,84 +6,84 @@ block pagetitle block interiorcontent .create-run-form(ng-controller='CreateRunCtrl') - form(name='form',novalidate,role='form') - section.name.row - .col-xs-12.col-sm-2.step-num - span.glyphicon.glyphicon-info-sign - .col-xs-12.col-sm-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}") - 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') - span.glyphicon.glyphicon-remove.form-control-feedback - 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 - span.glyphicon.glyphicon-user - .col-xs-12.col-sm-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}") - 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") - span.glyphicon.glyphicon-remove.form-control-feedback - 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.row(name='form',novalidate,role='form') + .col-xs-12.col-sm-6 + section.name.row + .col-xs-12.col-lg-2.step-num + span.glyphicon.glyphicon-info-sign(title='Lunch Run Info') + .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}") + 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') + span.glyphicon.glyphicon-remove.form-control-feedback + 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-lg-2.step-num + span.glyphicon.glyphicon-user(title='Your Info') + .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}") + 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") + span.glyphicon.glyphicon-remove.form-control-feedback + 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}") - 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') - 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.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') + .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') + div(ng-show='form.Email.$dirty && form.Email.$invalid') + 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.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') - section.row - .col-xs-12.col-sm-2.step-num - span.glyphicon.glyphicon-map-marker - .col-xs-12.col-sm-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}") - 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") - span.glyphicon.glyphicon-remove.form-control-feedback - 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') + section.row + .col-xs-12.col-lg-2.step-num + span.glyphicon.glyphicon-map-marker(title='Lunch Location') + .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}") + 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") + span.glyphicon.glyphicon-remove.form-control-feedback + 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') - .form-group - input#menuUrl.form-control.input-lg(type='url',ng-model='run.menuUrl',placeholder='Menu URL') + .form-group + 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-12.col-sm-2.step-num - span.glyphicon.glyphicon-list - .col-xs-12.col-sm-10 - .invitee.clearfix(ng-repeat='i in invitees') - ng-form(name='inviteeForm') - .row - .col-xs-12.col-sm-5 - .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-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}") + 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') + 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-5 - .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") - 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-2 + button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)') + span.glyphicon.glyphicon-remove - .col-xs-12.col-sm-2 - button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)') - 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()') - span.glyphicon.glyphicon-plus - |  Invite another! + button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()') + span.glyphicon.glyphicon-plus + |  Invite another! section.submit button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run,invitees)",ng-disabled="form.$invalid")