Updated styles for buttons, update order page

This commit is contained in:
Ben Ramey
2014-06-20 23:36:48 -05:00
parent d09ea57940
commit bf81cfb603
10 changed files with 63 additions and 32 deletions

View File

@@ -6,6 +6,7 @@
@import "nav.less";
@import "header-footer.less";
@import "update-order.less";
@import "buttons.less";
body {
color: #fff;
@@ -39,8 +40,11 @@ body {
}
}
#page {
.btn,input,textarea {
border-radius: 0;
}
.interior {
padding: 0 40px 20px;
padding: 0 40px 40px;
background-color: rgba(0,0,0,0.8);
box-shadow: 0px 0px 20px #000;
margin-top: 40px;
@@ -65,7 +69,7 @@ body {
h1 {
margin: 0;
padding: 30px 0 30px 0;
.glyphicon {
.title-icon {
vertical-align: text-bottom;
margin-right: 30px;
font-size: 1.2em;

View File

@@ -0,0 +1,13 @@
.run-nav {
box-shadow: 5px 5px 10px #222;
.run-nav-btn {
font-size: 24px;
border-radius: 0;
text-align: center;
background-color: darkolivegreen;
color: white;
margin-right: 1px;
padding: 10px 20px;
}
}

View File

@@ -32,13 +32,16 @@ form {
}
}
}
.create-order-form {
.update-order-form {
textarea {
font-size: 1.2em;
}
.btn-primary {
font-size: 2em;
}
.form-group {
margin: 0;
}
}
input.ng-dirty.ng-invalid {
}

View File

@@ -29,7 +29,7 @@
}
}
a.back-to-run {
display: none;
}
}
.run-show-run-nav a.back-to-run {
display: none;
}

View File

@@ -1,7 +1,17 @@
.others-orders {
.list-group-item {
border-width: 0;
background-color: transparent;
border-radius: 0;
background-color: #222;
margin-bottom: 2px;
padding: 0;
.person {
background-color: #333;
padding: 10px 15px;
}
.order {
padding: 10px 15px;
}
}
}

View File

@@ -1,7 +0,0 @@
div.btn-group.pull-right
a.btn.btn-default.back-to-run(href='/#/run/{{ run.id }}')
span.glyphicon.glyphicon-share-alt
|  Back to Run
a.btn.btn-default(href='{{ run.menuUrl }}',target="_blank",data-toggle='modal',data-target='#menuModal',ng-show='showMenuUrl')
span.glyphicon.glyphicon-list-alt
|  Show Menu

View File

@@ -0,0 +1,5 @@
div.run-nav.btn-group
a.btn.run-nav-btn.back-to-run(href='/#/run/{{ run.id }}',title='Back to Run')
span.glyphicon.glyphicon-share-alt
a.btn.run-nav-btn(href='{{ run.menuUrl }}',target="_blank",data-toggle='modal',data-target='#menuModal',ng-show='showMenuUrl',title='Show menu')
span.glyphicon.glyphicon-list-alt

View File

@@ -1,20 +1,21 @@
extends ../layouts/interior-page
block pagetitle
span.glyphicon.glyphicon-list
span.text-muted Enter your order for: 
a(href='/#/run/{{ run.id }}') {{ run.name }}
span.glyphicon.glyphicon-list.title-icon
span.text-muted Enter your order for: 
a(href='/#/run/{{ run.id }}') {{ run.name }}
.pull-right
include ../includes/run-nav
block interiorcontent
div(ng-show='show')
.clearfix
p.pull-left Hi {{ invitee.name }}! You are all going to {{ run.restaurant }}.
include ../includes/order-nav
p Hi {{ invitee.name }}! You are all going to {{ run.restaurant }}.
.row
.col-xs-12.col-sm-7
h2 Update your order
form.form.create-order-form(role='form')
form.form.update-order-form(role='form')
div.form-group
textarea#order.form-control(ng-model='invitee.order',placeholder='Your order',rows=8)
@@ -24,11 +25,13 @@ block interiorcontent
div.pod.others-orders
h2 Other's orders
ul.list-group(ng-repeat='i in invitees')
li.list-group-item
span.glyphicon.glyphicon-user
|  
strong {{ i.name }}
| : {{ i.order }}
li.list-group-item.clearfix
.person.pull-left
span.glyphicon.glyphicon-user
|  
strong {{ i.name }}
.order.pull-left
| {{ i.order }}
block modals
include ../includes/menu-modal

View File

@@ -1,7 +1,7 @@
extends ../layouts/interior-page
block pagetitle
span.glyphicon.glyphicon-chevron-right
span.glyphicon.glyphicon-chevron-right.title-icon
| start a new lunch run
block interiorcontent

View File

@@ -1,15 +1,15 @@
extends ../layouts/interior-page
block pagetitle
span.glyphicon.glyphicon-list
span.glyphicon.glyphicon-list.title-icon
span.text-muted Lunch run status:
|  {{ run.name }}
.pull-right.run-show-run-nav
include ../includes/run-nav
block interiorcontent
.run-details(ng-show="show")
.clearfix
p.pull-left Wait here to see real-time updates of your invitees' orders.
include ../includes/order-nav
p Wait here to see real-time updates of your invitees' orders.
.progress
div(class='progress-bar {{ progressClass }}',role='progressbar',aria-valuenow="{{ progress }}",aria-minvalue='0',aria-maxvalue='100',style='width:{{ progress }}%',ng-show='progress')