diff --git a/assets/linker/styles/app.less b/assets/linker/styles/app.less index dc9b433..d174658 100644 --- a/assets/linker/styles/app.less +++ b/assets/linker/styles/app.less @@ -10,6 +10,71 @@ body { } #page { padding-bottom: 20px; + section { + background-color: transparent; + position: relative; + overflow: hidden; + padding: 40px 0; + margin: 20px 0; + border-width: 1px 0; + border-style: solid; + border-color: #fff; + box-shadow: 0 0 15px #000; + + .step-num { + font-size: 6em; + text-align: center; + text-shadow: -2px -2px 2px #000; + color: orange; + } + + h2 { + margin-top: 0; + color: #fff; + text-shadow: 2px 2px 2px #000; + } + + input { + font-size: 2em; + height: auto; + margin: 5px 0; + } + + &.invitees { + input { + margin: 0; + } + .btn { + font-size: 2em; + } + .invitee { + input { + float: left; + width: auto; + margin-right: 5px; + } + margin-top: 5px; + +.btn { + margin-top: 5px; + } + } + } + + >div { + position: relative; + z-index: 2; + } + .bg { + position: absolute; + left: 0; + top: 0; + z-index: 1; + background-color: #eee; + opacity: 0.5; + width: 100%; + height: 100%; + } + } } footer { position: absolute; @@ -22,6 +87,12 @@ footer { } } .create-run-form { + h1 { + color: #fff; + padding: 20px 0; + font-size: 3em; + text-shadow: 2px 2px 2px #333; + } } .create-order-form { textarea { diff --git a/assets/linker/templates/create-run.jade b/assets/linker/templates/create-run.jade index 1547aa0..5379712 100644 --- a/assets/linker/templates/create-run.jade +++ b/assets/linker/templates/create-run.jade @@ -1,32 +1,50 @@ div.create-run-form(ng-controller='CreateRunCtrl') - h2.text-center Create a lunch run form(name='form',novalidate,role='form') - div.row - fieldset.col-xs-12.col-sm-6.col-md-6.col-lg-6 - legend.text-center You and your run - div.form-group - input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run') - div.form-group - input#creatorName.form-control(type='text',ng-model='run.creatorName',required,placeholder='Your name') - div.form-group - input#creatorEmail.form-control(type='email',ng-model='run.creatorEmail',required,placeholder='Your email') - div.form-group - input#restaurant.form-control(type='text',ng-model='run.restaurant',placeholder='Restaurant') - div.form-group - input#menuUrl.form-control(type='url',ng-model='run.menuUrl',placeholder='Menu URL') - fieldset.col-xs-12.col-sm-6.col-md-6.col-lg-6 - legend.text-center Who's going? - div.row(ng-repeat='i in run.invitees') - .form-group.col-sm-4 - input.form-control(ng-model='i.name',required,placeholder='Name') - .form-group.col-sm-7 - input.form-control(ng-model='i.email',required,placeholder='Email') - .form-group.col-sm-1 - button.btn.btn-sm.btn-warning(ng-click='removeInvitee($index)') - span.glyphicon.glyphicon-remove - button.btn.btn-default(ng-click='addInvitee()') - span.glyphicon.glyphicon-plus - | Invite another! + h1.text-center start a new lunch run! + section + .bg   + .container + .row + .col-xs-1.step-num 1} + .col-xs-11 + input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run') + section + .bg   + .container + h2.text-center who are you? + .row + .col-xs-1.step-num 2} + .col-xs-11 + input#creatorName.form-control(type='text',ng-model='run.creatorName',required,placeholder='Your name') + input#creatorEmail.form-control(type='email',ng-model='run.creatorEmail',required,placeholder='Your email') + section + .bg   + .container + h2.text-center where are you going? + .row + .col-xs-1.step-num 3} + .col-xs-11 + input#restaurant.form-control(type='text',ng-model='run.restaurant',placeholder='Restaurant') + input#menuUrl.form-control(type='url',ng-model='run.menuUrl',placeholder='Menu URL') + + section.invitees + .bg   + .container + h2.text-center who's going? + .row + .col-xs-1.step-num 4} + .col-xs-11 + .invitee(ng-repeat='i in run.invitees') + input.form-control(ng-model='i.name',required,placeholder='Name') + input.form-control(ng-model='i.email',required,placeholder='Email') + button.btn.btn-warning(ng-click='removeInvitee($index)') + span.glyphicon.glyphicon-remove + + button.btn.btn-default(ng-click='addInvitee()') + span.glyphicon.glyphicon-plus + | Invite another! + +// .clearfix button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run)",ng-disabled="form.$invalid") diff --git a/assets/linker/templates/home.jade b/assets/linker/templates/home.jade index 0c9bccf..1039aa2 100644 --- a/assets/linker/templates/home.jade +++ b/assets/linker/templates/home.jade @@ -1,3 +1 @@ -.row - .col-xs-12.col-sm-12.col-md-12.col-lg-12 - include create-run +include create-run diff --git a/views/layout.jade b/views/layout.jade index cd582f7..41f0e30 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -18,7 +18,7 @@ html(lang="en",ng-app="lunchApp") body(ng-controller="BodyCtrl") include header - #page.container + #page div(ng-view) include footer