Styling

assets/linker/js/controllers/run-controller.coffee

@@ -2,15 +2,27 @@ lunchControllers = angular.module 'lunchControllers'
 
 lunchControllers.controller 'RunCtrl', ['$scope', 'socket', '$routeParams', ($scope, socket, $routeParams) ->
     $scope.show = false
+    $scope.progress = 0
+    $scope.numOrders = 0
+    $scope.progressClass = 'progress-bar-danger'
 
     socket.get '/run/' + $routeParams['id'],
         (response) ->
             $scope.show = true
             $scope.run = response
+            $scope.numOrders = $scope.run.invitees.length + 1
+            $scope.setProgress()
             $scope.$apply()
 
     socket.on 'message', (m) ->
         if m.verb is 'update' and m.id is $routeParams.id
             $scope.run = m.data
+            $scope.setProgress()
             $scope.$apply()
+
+    $scope.setProgress = () ->
+        numFilledOrders = _.filter($scope.run.invitees, (i) -> i.order).length
+        $scope.progress = (numFilledOrders / $scope.numOrders) * 100
+        if $scope.progress >= 100
+            $scope.progressClass = 'progress-bar-success'
 ]

assets/linker/styles/app.less

@@ -2,6 +2,10 @@ body {
     height: 100%;
     background-color: #eee;
 }
+header.page-header {
+    border-bottom-color: #ddd;
+    margin: 0;
+}
 #page {
     display: table;
     height: 100%;
@@ -13,5 +17,31 @@ body {
         vertical-align: middle;
     }
 }
-div.create-run-form {
+.create-run-form {
+}
+.create-order-form {
+    textarea {
+        font-size: 1.2em;
+    }
+}
+.run-order-status {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    margin-bottom: 10px;
+    >div {
+        padding: 20px;
+        &.fill {
+            padding: 0;
+        }
+    }
+    .name {
+        color: #ccc;
+    }
+    .fill>.btn {
+        padding: 20px;
+        border-radius: 0;
+        border: none;
+        box-shadow: none;
+        -webkit-box-shadow: none;
+    }
 }

assets/linker/templates/create-order.jade

@@ -8,7 +8,7 @@ div(ng-show='show')
         span(ng-show='showMenuUrl') Here is the 
             a(href='{{ run.menuUrl }}') menu.
 
-    form(role='form')
+    form.form.create-order-form(role='form')
         div.form-group
             textarea#order.form-control(ng-model='invitee.order',placeholder='Your order')
 

assets/linker/templates/run.jade

@@ -1,8 +1,20 @@
 div(ng-show="show")
-    h2 {{ run.name }}
-    p {{ run.creatorName }}, here's your lunch run! Wait here to see real-time updates of your invitees' orders.
+    h2.text-center
+        span.text-muted Lunch run status:
+        br
+        | {{ run.name }}
 
-    div(ng-repeat="i in run.invitees")
-        p {{ i.name }}, {{ i.email }}
-        p {{ i.order }}
-        a(href='#/run/{{ run.id }}/order/{{ i.name }}') Fill in this order
+    p.text-center {{ run.creatorName }}, here's your lunch run! 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 }}%')
+            | {{ progress }}% complete
+
+    div.row.run-order-status(ng-repeat="i in run.invitees")
+        .name.col-sm-3
+            | {{ i.name }}
+            br
+            | {{ i.email }}
+        .order.col-sm-7 {{ i.order }}
+        .fill.col-sm-2
+            a.btn.btn-default.btn-sm.btn-block(href='#/run/{{ run.id }}/order/{{ i.name }}') Fill in this order