diff --git a/app/directives/challenge-tile/challenge-tile.jade b/app/directives/challenge-tile/challenge-tile.jade index 4660e4dfb..092f8e700 100644 --- a/app/directives/challenge-tile/challenge-tile.jade +++ b/app/directives/challenge-tile/challenge-tile.jade @@ -12,8 +12,8 @@ .challenge-details p.currentPhase {{challenge.userCurrentPhase}} - .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime") - p.ends-in Ends In + .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime", ng-class="{'challenge-late' : challenge.isLate}") + p.ends-in {{challenge.isLate ? 'Late for' : 'Ends In'}} p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}} p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}} @@ -88,7 +88,7 @@ p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}] .challenge-details - .challenge-info + .challenge-info(ng-class="{'challenge-late' : challenge.isLate}") p.currentPhase {{challenge.userCurrentPhase}} p.ends-in(ng-show="challenge.userCurrentPhaseEndTime") Ends: {{challenge.userCurrentPhaseEndTime[2] | localTime}} diff --git a/app/services/challenge.service.js b/app/services/challenge.service.js index c71b4978e..a9ecd0492 100644 --- a/app/services/challenge.service.js +++ b/app/services/challenge.service.js @@ -119,6 +119,7 @@ import moment from 'moment' // Add actual time ['2', 'months', actual date] timeAndUnit.push(fullTime) challenge.userCurrentPhaseEndTime = timeAndUnit + challenge.isLate = moment().diff(fullTime) > 0 // If > 0 then the challenge has 'Late Deliverables' or } }) } diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index 163886747..ef8b13dc8 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -222,6 +222,12 @@ challenge-tile .challenge.tile-view { text-transform: lowercase; color: #7F7F7F; } + + &.challenge-late { + .ends-in, .time-remaining, .unit-of-time { + color: #ee6666; + } + } } .stalled-challenge { @@ -462,6 +468,12 @@ challenge-tile .challenge.list-view { font-size: 14px; color: #A3A3AE; } + + &.challenge-late { + .ends-in, .time-remaining, .unit-of-time { + color: #ee6666; + } + } } .marathon-score {