Run status page styles

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

@@ -11,6 +11,7 @@ lunchControllers.controller 'RunCtrl', ['$scope', 'socket', '$routeParams', ($sc
             $scope.show = true
             $scope.run = response
             $scope.numOrders = $scope.run.invitees.length
+            $scope.setStatusClasses()
             $scope.setProgress()
             $scope.$apply()
 
@@ -18,8 +19,16 @@ lunchControllers.controller 'RunCtrl', ['$scope', 'socket', '$routeParams', ($sc
         if m.verb is 'update' and m.id is $routeParams.id
             $scope.run = m.data
             $scope.setProgress()
+            $scope.setStatusClasses()
             $scope.$apply()
 
+    $scope.setStatusClasses = () ->
+        for i in $scope.run.invitees
+            if i.order
+                i.statusClass = 'done'
+            else
+                i.statusClass = 'incomplete'
+
     $scope.setProgress = () ->
         numFilledOrders = _.filter($scope.run.invitees, (i) -> i.order).length
         $scope.progress = (numFilledOrders / $scope.numOrders) * 100

assets/linker/styles/app.less

@@ -1,8 +1,8 @@
 @import "variables.less";
 @import "main.less";
 @import "home.less";
-@import "header-footer.less";
 @import "forms.less";
+@import "run.less";
 @import "nav.less";
 
 body {

assets/linker/styles/run.less

@@ -1,13 +1,31 @@
 .run-order-status {
-    background-color: #fff;
-    border: 1px solid #ddd;
-    margin-bottom: 10px;
-    >div {
-        padding: 20px;
-    }
+    margin-bottom: 20px;
     .name {
-        color: #aaa;
+        font-size: 2em;
+        .glyphicon {
+            margin-right: 10px;
+        }
     }
-    .fill>.btn {
+    .order {
+        font-size: 1.4em;
+    }
+
+    .done {
+        opacity: 1;
+    }
+    .incomplete {
+        opacity: 0.5;
+    }
+}
+
+.run-details {
+    .progress {
+        margin: 20px 0;
+        height: 40px;
+        border-radius: 0;
+        .progress-bar {
+            font-size: 1.2em;
+            padding-top: 9px;
+        }
     }
 }

assets/linker/templates/run/show.jade

@@ -1,24 +1,23 @@
 extends ../layouts/interior-page
 
 block pagetitle
+    span.glyphicon.glyphicon-list
     span.text-muted Lunch run status:
     |  {{ run.name }}
 
 block interiorcontent
     .run-details(ng-show="show")
-        p {{ run.creatorName }}, here's your lunch run! Wait here to see real-time updates of your invitees' orders.
+        p Wait here to see real-time updates of your invitees' orders.
 
-        section
-            .bg  
-            span.glyphicon.glyphicon-user
-            .progress
-                div(class='progress-bar {{ progressClass }}',role='progressbar',aria-valuenow="{{ progress }}",aria-minvalue='0',aria-maxvalue='100',style='width:{{ progress }}%')
-                    | {{ progress }}% complete
+        .progress
+            div(class='progress-bar {{ progressClass }}',role='progressbar',aria-valuenow="{{ progress }}",aria-minvalue='0',aria-maxvalue='100',style='width:{{ progress }}%',ng-show='progress')
+                | {{ progress }}%
 
-            div.row.run-order-status(ng-repeat="i in run.invitees")
-                .name.col-sm-3
-                    | {{ i.name }}
-                    br
-                .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
+        div.row.run-order-status(ng-repeat="i in run.invitees")
+            div(class='name col-sm-3 {{ i.statusClass }}')
+                span.glyphicon.glyphicon-user
+                | {{ i.name }}
+            .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 }}')
+                    span.glyphicon.glyphicon-pencil