benjaminramey/lunchrun.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header and footer styles, rework homepage

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

45
assets/linker/styles/app.less
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 { #page {
padding-bottom: 60px; padding-bottom: 60px;
section { section {
background-color: transparent; background-color: transparent;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 40px 0; padding: 40px;
margin: 20px 0; margin: 20px 0;
border-width: 1px 0; border-width: 1px;
border-style: solid; border-style: solid;
border-color: #fff; border-color: #fff;
box-shadow: 0 0 15px #000; box-shadow: 0 0 15px #000;
border-radius: 4px;
.step-num { .step-num {
text-align: center; text-align: center;
@@ -70,6 +66,7 @@ body {
&.submit { &.submit {
border: none; border: none;
box-shadow: none; box-shadow: none;
padding: 40px 0;
.btn { .btn {
font-size: 6em; font-size: 6em;
} }
@@ -85,36 +82,12 @@ body {
top: 0; top: 0;
z-index: 1; z-index: 1;
background-color: #eee; background-color: #eee;
opacity: 0.5; opacity: 0.7;
width: 100%; width: 100%;
height: 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 { .run-order-status {
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;

14
assets/linker/styles/forms.less Normal file
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;
}
}

27
assets/linker/styles/header-footer.less Normal file
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;
}
}

8
assets/linker/styles/main.less Normal file
View File

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

1
assets/linker/styles/variables.less Normal file
View File

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

69
assets/linker/templates/create-run.jade
View File

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

2
tasks/options/less.js
View File

@@ -11,7 +11,7 @@ module.exports = function(config) {
}, { }, {
expand: true, expand: true,
cwd: 'assets/linker/styles/', cwd: 'assets/linker/styles/',
src: ['*.less'], src: ['app.less'],
dest: '.tmp/public/linker/styles/', dest: '.tmp/public/linker/styles/',
ext: '.css' ext: '.css'
}] }]

26
views/footer.jade
View File

@@ -1,13 +1,13 @@
footer footer.navbar
.navbar.navbar-inverse .bg  
.container .container
nav nav
ul.nav.navbar-nav.pull-left ul.nav.navbar-nav.pull-left
li li
a(href='/about') about a(href='/about') about
li li
a(href='/privacy-policy') privacy policy a(href='/privacy-policy') privacy policy
li li
a(href='/how-we-use-your-info') how we use your info a(href='/how-we-use-your-info') how we use your info
p.photo-credits.pull-right.navbar-text p.photo-credits.pull-right.navbar-text
| All background photos are © Elaine Davis | All background photos are © Elaine Davis

3
views/header.jade
View File

@@ -1,4 +1,5 @@
header.navbar.navbar-inverse.navbar-static-top header.navbar.navbar-static-top
.bg  
.container .container
a.navbar-brand(href='/') lunch run me a.navbar-brand(href='/') lunch run me
small.navbar-text ...where lunch runs are fun small.navbar-text ...where lunch runs are fun