diff --git a/assets/linker/js/controllers/run-controller.coffee b/assets/linker/js/controllers/run-controller.coffee index 3a2fbdf..3fc2cb4 100644 --- a/assets/linker/js/controllers/run-controller.coffee +++ b/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 diff --git a/assets/linker/styles/app.less b/assets/linker/styles/app.less index de2e766..929ec72 100644 --- a/assets/linker/styles/app.less +++ b/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 { diff --git a/assets/linker/styles/run.less b/assets/linker/styles/run.less index a8314e2..67dbc71 100644 --- a/assets/linker/styles/run.less +++ b/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; + } } } diff --git a/assets/linker/templates/run/show.jade b/assets/linker/templates/run/show.jade index f8f15d6..74b4727 100644 --- a/assets/linker/templates/run/show.jade +++ b/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