Header and footer styles, rework homepage

This commit is contained in:
Ben Ramey
2014-03-31 21:36:39 -05:00
parent f60e4c1706
commit 763c33a5cb
9 changed files with 107 additions and 88 deletions

View File

@@ -1,25 +1,21 @@
@footer-height: 52px;
@import "variables.less";
@import "main.less";
@import "header-footer.less";
@import "forms.less";
html {
position: relative;
min-height: 100%;
}
body {
background-color: #fff;
margin-bottom: @footer-height;
}
#page {
padding-bottom: 60px;
section {
background-color: transparent;
position: relative;
overflow: hidden;
padding: 40px 0;
padding: 40px;
margin: 20px 0;
border-width: 1px 0;
border-width: 1px;
border-style: solid;
border-color: #fff;
box-shadow: 0 0 15px #000;
border-radius: 4px;
.step-num {
text-align: center;
@@ -70,6 +66,7 @@ body {
&.submit {
border: none;
box-shadow: none;
padding: 40px 0;
.btn {
font-size: 6em;
}
@@ -85,36 +82,12 @@ body {
top: 0;
z-index: 1;
background-color: #eee;
opacity: 0.5;
opacity: 0.7;
width: 100%;
height: 100%;
}
}
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
overflow: hidden;
.navbar {
border-radius: 0;
}
}
.create-run-form {
h1 {
color: #fff;
padding: 20px 0;
font-size: 3em;
text-shadow: 4px 4px 6px #000;
text-transform: uppercase;
}
}
.create-order-form {
textarea {
font-size: 1.2em;
}
}
.run-order-status {
background-color: #fff;
border: 1px solid #ddd;

View File

@@ -0,0 +1,14 @@
.create-run-form {
h1 {
color: #fff;
padding: 20px 0;
font-size: 3em;
text-shadow: 4px 4px 6px #000;
text-transform: uppercase;
}
}
.create-order-form {
textarea {
font-size: 1.2em;
}
}

View File

@@ -0,0 +1,27 @@
header.navbar {
border-bottom: 1px solid #eee;
}
footer.navbar {
border-top: 1px solid #eee;
border-radius: 0;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
overflow: hidden;
}
header, footer {
.bg {
background-color: white;
opacity: 0.5;
position: absolute;
z-index: 1;
width: 100%;
height: 50px;
}
.container {
position: relative;
z-index: 2;
}
}

View File

@@ -0,0 +1,8 @@
html {
position: relative;
min-height: 100%;
}
body {
background-color: #fff;
margin-bottom: @footer-height;
}

View File

@@ -0,0 +1 @@
@footer-height: 52px;

View File

@@ -1,52 +1,47 @@
div.create-run-form(ng-controller='CreateRunCtrl')
form(name='form',novalidate,role='form')
form.container(name='form',novalidate,role='form')
h1.text-center
| start a new lunch run
section.name
.bg  
.container
.row
.col-xs-2.step-num
span.glyphicon.glyphicon-info-sign
.col-xs-10
input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run')
.row
.col-xs-2.step-num
span.glyphicon.glyphicon-info-sign
.col-xs-10
input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run')
section
.bg  
.container
.row
.col-xs-2.step-num
span.glyphicon.glyphicon-user
.col-xs-10
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')
.row
.col-xs-2.step-num
span.glyphicon.glyphicon-user
.col-xs-10
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
.row
.col-xs-2.step-num
span.glyphicon.glyphicon-map-marker
.col-xs-10
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')
.row
.col-xs-2.step-num
span.glyphicon.glyphicon-map-marker
.col-xs-10
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
.row
.col-xs-2.step-num
span.glyphicon.glyphicon-list
.col-xs-10
.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
.row
.col-xs-2.step-num
span.glyphicon.glyphicon-list
.col-xs-10
.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!
button.btn.btn-default(ng-click='addInvitee()')
span.glyphicon.glyphicon-plus
| Invite another!
section.submit
.container
button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run)",ng-disabled="form.$invalid")
| Create
button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run)",ng-disabled="form.$invalid")
| Create