Promote to prod - Bug Bash 3

app/directives/challenge-tile/challenge-tile.jade

@@ -20,9 +20,10 @@
         .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:'submit'}}") Submit
+          a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'submit'}}") Submit 
+          a.tc-btn.tc-btn-s.tc-btn-wide.btn-danger.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'unRegister'}}") Unregister
           a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Appeal", ng-href="{{challenge|challengeLinks:'viewScorecards'}}") View Scorecards
-          a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Appeal", ng-href="{{challenge|challengeLinks:'completeAppeals'}}") Complete Appeals
+          a.tc-btn.tc-btn-s.tc-btn-wide.btn-danger.submit(ng-if="challenge.isSubmitter")(ng-switch-when="Appeal", ng-href="{{challenge|challengeLinks:'completeAppeals'}}") Complete Appeals
 
           .submitted(ng-switch-when="Submitted") Submitted
 
@@ -99,8 +100,9 @@
 
       .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:'submit'}}") Submit
+        a.tc-btn.tc-btn-s.tc-btn-wide.btn-danger.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'unRegister'}}") Unregister
         a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Appeal", ng-href="{{challenge|challengeLinks:'viewScorecards'}}") View Scorecards
-        a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Appeal", ng-href="{{challenge|challengeLinks:'completeAppeals'}}") Complete Appeals
+        a.tc-btn.tc-btn-s.tc-btn-wide.btn-danger.submit(ng-switch-when="Appeal", ng-href="{{challenge|challengeLinks:'completeAppeals'}}") Complete Appeals
 
         .submitted(ng-switch-when="Submitted") Submitted
 

app/directives/responsive-carousel/responsive-carousel.directive.js

@@ -45,14 +45,10 @@ import angular from 'angular'
             } else if(width >= 1010) {
               // desktop
               buildCarouselSlide(5)
-            } else if(width < 1010 && width >= 768) {
-              // tablet
+            } else if(width < 1010) {
+              // tablet & mobile
               buildCarouselSlide(4)
-            } else {
-              // we don't need to build carousel for mobile as we show horizontal scroll
-              // phone
-              buildCarouselSlide(2)
-            }
+            } 
           }
 
 

app/filters/challengeLinks.filter.js

@@ -73,6 +73,8 @@ import _ from 'lodash'
           return String.supplant('https://software.{domain}/review/actions/ViewProjectDetails?pid={id}', data)
         case 'completeAppeals':
           return String.supplant('https://software.{domain}/review/actions/EarlyAppeals?pid={id}', data)
+        case 'unRegister':
+          return String.supplant('https://software.{domain}/review/actions/Unregister?pid={id}', data)
         }
       }
     }

app/my-dashboard/my-dashboard.jade

@@ -14,10 +14,11 @@
 
   .tco.tco17
     .tc-banner-placeholder.black.bg-image
-      .title 2017 Topcoder Open
-      .subtitle The Ultimate Programming & Design tournament
-      .description Earn your way to the USA!
-      a(href="http://tco17.topcoder.com/").cta.tc-btn-white.tc-btn-radius Learn More
+      .container
+        .title 2017 Topcoder Open
+        .subtitle The Ultimate Programming & Design tournament
+        .description Earn your way to the USA!
+        a(href="http://tco17.topcoder.com/").cta.tc-btn-white.tc-btn-radius Learn More
 
   .srms(id="srms", ui-view="srms", ng-show="dashboard.showSRMs")
 

app/services/challenge.service.js

@@ -67,6 +67,7 @@ import moment from 'moment'
         challenge.userCurrentPhase = 'Stalled'
         challenge.userCurrentPhaseEndTime = null
         challenge.userAction = null
+        challenge.isSubmitter = false        
 
         if (phases && phases.length) {
           hasCurrentPhase = true
@@ -96,6 +97,9 @@ import moment from 'moment'
               if (roles && roles.length > 0) {
                 var submitterRole = _.findIndex(roles, function(role) {
                   var lRole = role.toLowerCase()
+                  if (lRole === 'submitter') {
+                    challenge.isSubmitter = true
+                  }
                   return lRole === 'submitter'
                 })
                 if (submitterRole === -1) {

assets/css/directives/challenge-tile.scss

@@ -248,6 +248,23 @@ challenge-tile .challenge.tile-view {
         .submit {
           margin: 12px;
           display: block;
+          text-align: center;
+
+          &.btn-danger {
+            color: #e66e66;
+            background-color: $white;
+            border-color: #e66e66;
+
+            &:hover {
+              background-color: #e66e66;
+              color: $white;
+            }
+
+            &:active {
+              background-color: #e0493e;
+              box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.30);
+            }
+          }
         }
 
         .submitted {
@@ -393,7 +410,7 @@ challenge-tile .challenge.list-view {
   margin-bottom: 10px;
   padding: 20px 0;
   padding-left: 5px;
-  height: 110px;
+  min-height: 110px;
   border: 1px solid #E0E0E0;
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
@@ -508,6 +525,23 @@ challenge-tile .challenge.list-view {
       .submit {
         display: block;
         margin: 6px 0;
+        text-align: center;
+
+        &.btn-danger {
+          color: #e66e66;
+          background-color: $white;
+          border-color: #e66e66;
+
+          &:hover {
+            background-color: #e66e66;
+            color: $white;
+          }
+
+          &:active {
+            background-color: #e0493e;
+            box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.30);
+          }
+        }
       }
 
       .submitted {
@@ -578,7 +612,8 @@ challenge-tile .challenge.list-view {
   .completed-challenge {
     width: 100%;
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
+    overflow: hidden;
     header {
       flex: 2;
     }

assets/css/directives/dev-challenge-user-place.scss

@@ -108,6 +108,10 @@ dev-challenge-user-place {
       flex-direction: column;
       text-align: center;
       background-color: #F6F6F6;
+      @media only screen and (max-width: 767px) {
+        min-width: 84px;
+        margin-left: 5px;
+      }
 
       .score {
         margin-top: 28px;

assets/css/directives/responsive-carousel.scss

@@ -8,27 +8,30 @@
     margin: 0 auto;
     @media only screen and (max-width: 767px) {
       display: none;
+      width: auto;
     }
-    &[slide-count="1"] {
-      width: 170px;
-    }
-    &[slide-count="2"] {
-      width: 340px;
-    }
-    &[slide-count="3"] {
-      width: 510px;
-    }
-    &[slide-count="4"] {
-      width: 680px;
-    }
-    &[slide-count="5"] {
-      width: 850px;
-    }
-    &[slide-count="6"] {
-      width: 1020px;
-    }
-    &[slide-count="7"] {
-      width: 1190px;
+    @media only screen and (min-width: 768px) {
+      &[slide-count="1"] {
+        width: 170px;
+      }
+      &[slide-count="2"] {
+        width: 340px;
+      }
+      &[slide-count="3"] {
+        width: 510px;
+      }
+      &[slide-count="4"] {
+        width: 680px;
+      }
+      &[slide-count="5"] {
+        width: 850px;
+      }
+      &[slide-count="6"] {
+        width: 1020px;
+      }
+      &[slide-count="7"] {
+        width: 1190px;
+      }
     }
 
     li {
@@ -96,6 +99,10 @@
 
   .slide {
     display: inline-block;
+
+    @media only screen and (max-width: 767px) {
+      display: block;
+    }
   }
 
 // .carousel-elem-list {
@@ -107,22 +114,45 @@
         position: absolute;
         top: 32px;
         left: -30px;
-        @include forward-slash(1px, 60px, 0, 2px, 30deg);
         background-color: $gray-light;
         @media only screen and (min-width: 768px) {
           top: 32px;
           left: -18px;
+          @include forward-slash(1px, 60px, 0, 2px, 30deg);
         }
+        @media only screen and (max-width: 767px) {
+          top: -30px;
+          left: 60px;
+          @include forward-slash(1px, 70px, 0, 2px, 90deg);
+        }        
       }
     }
   }
+
+
+  ul[slide-count="3"] {
+    @media only screen and (min-width: 575px) {
+      .slide {
+        display: inline-block;
+
+        &:not(:first-child) {
+          .carousel-elem:before {
+            top: 32px;
+            left: -18px;
+            @include forward-slash(1px, 60px, 0, 2px, 30deg);
+          }    
+        } 
+      }
+    }
+  }  
+
   .carousel-elem {
     position: relative;
     display: inline-block;
     margin-right: 65px;
     padding: 20px 0;
+    width: 130px;
     @media only screen and (min-width: 768px) {
-      width: 130px;
       margin-right: 35px;
       padding: 30px 20px;
 

assets/css/directives/tc-banner.scss

@@ -150,33 +150,47 @@ $tco-color-dark: #ea690b;
   background-image: url(../../images/home-hero.jpg);
   background-size: 100%;
   height: 352px;
-  background-position: center 40%;
+  background-position: center 25%;
   background-repeat: no-repeat;
+  flex-direction: row;
 
   padding-top: 50px;
+
+  .container {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 37px;
+    height: 95%;
+    justify-content: space-between;
 
-  .title {
-    margin-top: 10px;
-    @include sofia-pro-bold;
-    color: $white;
-  }
+    .title {
+      margin-top: 10px;
+      @include sofia-pro-bold;
+      color: $white;
+    }
 
-  .subtitle {
-    margin-top: 20px;
-    width: 450px;
-    font-size: 20px;
-    @extend .title;
-    @include sofia-pro-regular;
-  }
+    .subtitle {
+      margin-top: 20px;
+      width: 450px;
+      font-size: 20px;
+      @extend .title;
+      @include sofia-pro-regular;
+      text-align: left;
+    }
 
-  .description {
-    margin-top: 20px;
-    margin-bottom: 5px;
-  }
+    .description {
+      margin-top: 20px;
+      margin-bottom: 5px;
+    }
 
-  .cta {
-    margin-top: 20px;
+    .cta {
+      margin-top: 20px;
+    }
+
   }
+
 }
 
 

assets/css/profile/subtrack.scss

@@ -16,7 +16,7 @@
     margin: 30px auto 40px;
 
     .nav-right {
-      padding-top: 15px;
+      padding-top: 10px;
       padding-left: 15px;
       i:hover {
         cursor: pointer;
@@ -108,6 +108,13 @@
     }
   }
 
+  .page-state-header {
+    .page-info {
+      display: flex;
+      justify-content: center;
+    }
+  }  
+
   .subtrack-stats {
     // @include module-l;
     width: 100%;
@@ -183,15 +190,15 @@
     h2.detailed {
       margin: 30px auto 0;
       text-align: center;
-      @include sofia-pro-medium;
-      font-size: 18px;
-      line-height: 21px;
-      font-weight: bold;
+      @include sofia-pro-regular;
+      font-size: 24px;
+      line-height: 30px;
       text-transform: uppercase;
     }
     ul.vertical-stats {
       width: 90%;
       margin: 0 auto;
+      margin-top: 30px;
       li {
         @include sofia-pro-regular;
         font-size: 15px;
@@ -329,10 +336,20 @@
   }
 }
 }
+
 @media (min-width: 768px) {
 .profile-subtrack-container {
 
   .content {
+    .page-info {
+      display: flex;
+      justify-content: center;
+    }    
+
+    .nav-right {
+      padding-top: 15px;
+    }
+
     .nav {
       display: flex;
       flex-direction: row;
@@ -544,3 +561,24 @@
   }
 
 }
+
+@media only screen and (max-width: 767px) {
+  .profile-subtrack-container {
+    .content {
+      .tc-carousel ul {
+        display: block;
+        height: auto;
+        padding-bottom: 40px;
+
+        > li {
+          position: relative;
+          text-align: center;
+
+          .slide {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}