diff --git a/app/directives/challenge-tile/challenge-tile.directive.jade b/app/directives/challenge-tile/challenge-tile.directive.jade index 4eba7bb30..325bd5f76 100644 --- a/app/directives/challenge-tile/challenge-tile.directive.jade +++ b/app/directives/challenge-tile/challenge-tile.directive.jade @@ -7,30 +7,30 @@ p.subtrack-color {{challenge.subTrack | underscoreStrip}} challenge-links(challenge="challenge", view="'tile'") + .challenge-card__bottom.challenge-card__bottom--active + .challenge-details + p.currentPhase {{challenge.userCurrentPhase}} - .challenge-details - p.currentPhase {{challenge.userCurrentPhase}} + .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime") + p.ends-in Ends In + p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}} + p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}} - .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime") - p.ends-in Ends In - p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}} - p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}} + .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused. - .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused. + .phase-action(ng-show="challenge.userAction", ng-switch="challenge.userAction") + a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'detail'}}") Submit - .phase-action(ng-switch="challenge.userAction") - a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'detail'}}") Submit + .submitted(ng-switch-when="Submitted") Submitted - .submitted(ng-switch-when="Submitted") Submitted + // TODO: Need styling and JS logic for this one + .registered(ng-switch-when="Registered") Registered - // TODO: Need styling and JS logic for this one - .registered(ng-switch-when="Registered") Registered - - // Only show if not data science track - p.roles - span(ng-hide="challenge.track === 'DATA_SCIENCE'") - span Role:   - span {{challenge.userDetails.roles | listRoles}} + // Only show if not data science track + p.roles + span(ng-hide="challenge.track === 'DATA_SCIENCE'") + span Role:   + span {{challenge.userDetails.roles | listRoles}} .completed-challenge( ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'", @@ -45,25 +45,26 @@ .winner-ribbon(ng-show="challenge.wonFirst") - .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track") + .challenge-card__bottom.challenge-card__bottom--completed + .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track") - div - .marathon-score - p.score {{challenge.pointTotal || 0 }} + div + .marathon-score + p.score {{challenge.pointTotal || 0 }} - p Total Points + p Total Points - .challenge-details(ng-switch-when="DEVELOP") - dev-challenge-user-place(challenge="challenge", view="view") + .challenge-details(ng-switch-when="DEVELOP") + dev-challenge-user-place(challenge="challenge", view="view") - .challenge-details(ng-switch-when="DESIGN") - design-challenge-user-place(challenge="challenge", view="view") + .challenge-details(ng-switch-when="DESIGN") + design-challenge-user-place(challenge="challenge", view="view") - // Only show if not data science track - p.roles - span(ng-hide="challenge.track === 'DATA_SCIENCE'") - span Role:   - span {{challenge.userDetails.roles | listRoles}} + // Only show if not data science track + p.roles + span(ng-hide="challenge.track === 'DATA_SCIENCE'") + span Role:   + span {{challenge.userDetails.roles | listRoles}} .challenge.list-view(ng-show="view=='list'", ng-class="challenge.track") .active-challenge(ng-show="challenge.status === 'ACTIVE'") diff --git a/app/directives/challenge-user-place/design-challenge-user-place.directive.jade b/app/directives/challenge-user-place/design-challenge-user-place.directive.jade index a57388fe5..dc9139f59 100644 --- a/app/directives/challenge-user-place/design-challenge-user-place.directive.jade +++ b/app/directives/challenge-user-place/design-challenge-user-place.directive.jade @@ -4,7 +4,7 @@ p.place.passed(ng-show="challenge.userStatus === 'PASSED_SCREENING'") Passed Screening p.place.completed(ng-show="challenge.userStatus === 'COMPLETED'") COMPLETED - .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-hide="challenge.userStatus !== 'PASSED_REVIEW'") + .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}") img(ng-show="!challenge.isPrivate", ng-src="{{imageURL || '/images/card-bg-no-image.svg'}}", fallback-src="/images/card-bg-no-image.svg") img(ng-show="challenge.isPrivate", src="/images/card-bg-private-project.svg") diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index 811ab39b2..de968f997 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -37,17 +37,26 @@ challenge-tile .challenge.tile-view { } } + .challenge-card__bottom { + width: 268px;/* 2px adjustment for 2 1px borders */ + flex: 2; + display: flex; + flex-direction: column; + } + // challenge details section .challenge-details { display: flex; flex-direction: column; align-items: center; + justify-content: center; + flex: 2; } // roles bar is common for both active and completed .roles { width: 100%; - border-radius: 4px; + border-radius: 0px 0px 4px 4px; display: flex; flex-direction: row; justify-content: flex-start; @@ -71,7 +80,7 @@ challenge-tile .challenge.tile-view { } .active-challenge { - height: 350px; + height: 390px; display: flex; flex-direction: column; justify-content: space-between; @@ -84,7 +93,6 @@ challenge-tile .challenge.tile-view { .challenge-details { .currentPhase { - margin-top: 40px; margin-bottom: 20px; @include font-with-weight('Sofia Pro', 300); font-size: 18px; @@ -99,7 +107,6 @@ challenge-tile .challenge.tile-view { align-items: center; width: 75px; height: 63px; - margin-bottom: 20px; background-image: url(/images/ico-calendar.svg); > p { @@ -179,7 +186,7 @@ challenge-tile .challenge.tile-view { .completed-challenge { - height: 350px; + height: 390px; display: flex; flex-direction: column; justify-content: space-between; @@ -222,6 +229,27 @@ challenge-tile .challenge.tile-view { justify-content: center; } + design-challenge-user-place { + display: flex; + flex-direction: column; + flex: 2; + + .tile-view { + flex: 2; + justify-content: flex-end; + } + } + + dev-challenge-user-place { + display: flex; + flex-direction: column; + flex: 2; + + .tile-view { + flex: 2; + } + } + .marathon-score { display: flex; flex-direction: column; diff --git a/assets/css/my-challenges/my-challenges.scss b/assets/css/my-challenges/my-challenges.scss index b1a24e241..1e5086822 100644 --- a/assets/css/my-challenges/my-challenges.scss +++ b/assets/css/my-challenges/my-challenges.scss @@ -176,7 +176,7 @@ challenge-tile { &.tile-view { - margin-bottom: 20px; + margin-bottom: 13px; @media only screen and (max-width: 767px) { display: inline-block; margin-left: 15px;