topcoder-archive · nlitwin · Sep 20, 2015 · Sep 19, 2015 · Sep 20, 2015 · Sep 20, 2015
diff --git a/app/my-dashboard/header-dashboard/header-dashboard.jade b/app/my-dashboard/header-dashboard/header-dashboard.jade
@@ -7,6 +7,8 @@ header
 
       p Active Challenges
 
+    .slash(ng-show="dashboard.isCopilot")
+
     .money-earned
       p.number(ng-bind='vm.moneyEarned || 0 | currency:undefined:0')
 

diff --git a/app/my-dashboard/my-challenges/my-challenges.jade b/app/my-dashboard/my-challenges/my-challenges.jade
@@ -5,8 +5,9 @@ header
 
 .section-loading(ng-show="vm.loading")
 
-section.challenges(ng-if="vm.userHasChallenges && !vm.loading")
-  challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="'tile'", ng-class="'tile-view'")
+section(ng-if="vm.userHasChallenges && !vm.loading")
+  .challenges
+    challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="'tile'", ng-class="'tile-view'")
 
 .section-links
   .link
@@ -17,6 +18,3 @@ section.challenges(ng-if="vm.userHasChallenges && !vm.loading")
 
   .link(ng-hide="vm.userHasChallenges")
     a(href="https://community.{{vm.domain}}/", target="_blank") View Help Library
-
-.spotlightChallenges(ng-hide="vm.userHasChallenges")
-  challenge-tile.spotlight(ng-repeat="spotlight in vm.spotlightChallenges", spotlight, challenge="spotlight", domain="vm.domain", view="'tile'")
diff --git a/app/my-dashboard/srms/srms.jade b/app/my-dashboard/srms/srms.jade
@@ -1,19 +1,21 @@
 header
   h1.section-title Single Round Matches
 
-  a.viewSRMs(ui-sref="my-srms") View All Past SRMs
+  //- a.viewSRMs(ui-sref="my-srms") View All Past SRMs
 
 .section-loading(ng-show="vm.loading")
 
-section.srm-tiles(ng-hide="vm.loading")
-  srm-tile.srm-tile(ng-repeat="srm in vm.srms", srm="srm", view="'tile'", ng-class="'tile-view'")
+section(ng-hide="vm.loading")
+  .srm-tiles
+    srm-tile(ng-repeat="srm in vm.srms", srm="srm", view="'tile'", ng-class="'tile-view'")
 
-  .srm-links
-    h2 Show us you can #[span code!]
+    .srm-links-card
+      .flex-wrapper
+        h2 Show us you can #[span code!]
 
-    a(href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives
+        a(href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives
 
-    a(href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials
+        a(href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials
 
   //- .link
   //-   a(href="https://arena.{{DOMAIN}}/") Launch Topcoder Arena
diff --git a/assets/css/my-dashboard/header-dashboard.scss b/assets/css/my-dashboard/header-dashboard.scss
@@ -1,60 +1,104 @@
 @import '../partials/combined';
 
 .header-dashboard {
+  @include module-full-width;
+  background-color: $white;
 
   header {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
     align-items: center;
+    max-width: 1242px;
+    margin: 0 auto;
+    padding-top: 20px;
+    @media only screen and (min-width: 600px) {
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 25px 25px 23px;
+    }
+    @media only screen and (min-width: 900px) {
+      padding: 40px 50px 33px;
+    }
+
 
     h1 {
+      margin-bottom: 10px;
       @include sofia-pro-bold;
-      font-size: 32px;
-      line-height: 38px;
+      font-size: 22px;
+      line-height: 26px;
       color: #3D3D3D;
       text-transform: uppercase;
+      @media only screen and (min-width: 600px) {
+        margin-bottom: 0;
+        font-size: 32px;
+        line-height: 38px;
+      }
     }
 
     .user-stats {
       display: flex;
       flex-direction: row;
-      font-size: 14px;
+      align-items: center;
+      margin-bottom: 12px;
+      @media only screen and (min-width: 600px) {
+        margin-bottom: 0;
+      }
+
+      .slash {
+        width: 20px;
+        height: 35px;
+        margin-right: 15px;
+        background-color: #D1D3D4;
+      }
 
       .money-earned, .copilot-challenges {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        height: 50px;
+        text-align: center;
 
         p {
           text-transform: uppercase;
         }
 
         .number {
           @include sofia-pro-bold;
-          font-size: 22px;
-          line-height: 28px;
+          font-size: 18px;
+          line-height: 23px;
           color: #3D3D3D;
+          text-align: right;
+          @media only screen and (min-width: 600px) {
+            text-align: center;
+            font-size: 22px;
+            line-height: 28px;
+          }
         }
 
         p:not(.number) {
           @include sofia-pro-regular;
-          font-size: 12px;
-          line-height: 14px;
+          font-size: 10px;
+          line-height: 13px;
           color: #A3A3AE;
+          @media only screen and (min-width: 600px) {
+            font-size: 12px;
+            line-height: 14px;
+          }
         }
       }
 
       .money-earned {
-        text-align: center;
-        padding-left: 10px;
-        padding-right: 10px;
+        @media only screen and (min-width: 600px) {
+          padding-left: 10px;
+          padding-right: 10px;
+        }
       }
 
       .copilot-challenges {
-        text-align: center;
-        padding-left: 10px;
-        padding-right: 10px;
+        margin-right: 15px;
+        @media only screen and (min-width: 600px) {
+          padding-left: 10px;
+          padding-right: 10px;
+        }
       }
     }
   }

diff --git a/assets/css/my-dashboard/my-challenges.scss b/assets/css/my-dashboard/my-challenges.scss
@@ -50,52 +50,47 @@
     min-height: 500px;
   }
 
-  section.challenges {
+  section {
     display: flex;
-    flex-flow: row wrap;
     justify-content: center;
-    padding: 20px 15px;
+    padding: 20px 0;
     background-color: #FCFCFC;
 
-    @media only screen and (max-width: 400px) {
-      display: block;
-      width: 320px;
-      margin-left: 0;
-      padding: 15px;
-      white-space: nowrap;
-      overflow-y: hidden;
-      overflow-x: scroll;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    challenge-tile {
-      display: flex;
-      flex-flow: row wrap;
-      width: 270px;
-
-
-      @media only screen and (max-width: 400px) {
-        display: inline-block;
-        flex-flow: none;
+    .challenges {
+      width: 100%;
+      @include horizontal-scroll;
+      @media only screen and (min-width: 1125px) {
+        display: flex;
+        flex-flow: row wrap;
+        width: 1125px;
       }
 
-      &.tile-view {
-        margin-left: 15px;
-        margin-bottom: 15px;
-
-        &:nth-child(4n + 1) {
-          margin-left: -15px;
+      challenge-tile {
+        display: inline-block;
+        @media only screen and (min-width: 1125px) {
+          display: block;
         }
 
-        @media only screen and (max-width: 400px) {
-          margin-bottom: 0;
-          margin-left: 0;
-          margin-right: 10px;
+        &.tile-view {
+          margin-left: 15px;
+          margin-bottom: 15px;
+          @media only screen and (min-width: 1125px) {
+            &:nth-child(4n + 1) {
+              margin-left: 0;
+            }
+          }
+
+          &:last-child {
+            margin-right: 15px;
+            @media only screen and (min-width: 1125px) {
+              margin-right: 0;
+            }
+          }
         }
-      }
 
-      &.list-view {
-        width: 100%;
+        &.list-view {
+          width: 100%;
+        }
       }
     }
   }

diff --git a/assets/css/my-dashboard/my-dashboard.scss b/assets/css/my-dashboard/my-dashboard.scss
@@ -1,19 +1,5 @@
 @import '../partials/combined';
 
-.header-dashboard {
-  @include module-full-width;
-  background-color: $white;
-
-  header {
-    max-width: 1242px;
-    margin: 0 auto;
-    padding: 20px 50px 0;
-    @media only screen and (min-width: 900px) {
-      padding: 45px 50px 33px;
-    }
-  }
-}
-
 .my-dashboard-container {
   display: flex;
   flex-direction: column;

diff --git a/assets/css/my-dashboard/srms.scss b/assets/css/my-dashboard/srms.scss
@@ -17,47 +17,74 @@
     }
   }
 
-  section.srm-tiles {
+  section {
     display: flex;
-    flex-flow: row wrap;
-    /* The negative margin here removes the leftmost tiles'
-       margin, since we can't use .tile:first-child here */
-    margin-left: -20px;
+    justify-content: center;
+    padding: 20px 0;
+    background-color: #FCFCFC;
 
-    srm-tile.tile-view {
-      width: 23%;
-      margin-left: 20px;
-      margin-bottom: 20px;
-    }
-
-    .srm-links {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 270px;
-      height: 319px;
-      padding: 0 21px;
-      border: 1px solid #DCDCDC;
-      border-radius: 4px;
+    .srm-tiles {
+      width: 100%;
+      @include horizontal-scroll;
+      @media only screen and (min-width: 1125px) {
+        display: flex;
+        flex-flow: row wrap;
+        width: 1125px;
+      }
 
-      h2 {
-        margin-top: 70px;
-        margin-bottom: 48px;
-        @include sofia-pro-light;
-        font-size: 24px;
-        text-align: center;
-        color: #3D3D3D;
-        text-transform: uppercase;
+      srm-tile{
+        display: inline-block;
+        margin-left: 15px;
+        margin-bottom: 15px;
+        @media only screen and (min-width: 1125px) {
+          display: block;
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+      }
 
-        span {
-          @include sofia-pro-bold;
+      .srm-links-card {
+        display: inline-block;
+        width: 270px;
+        height: 319px;
+        margin-right: 15px;
+        margin-bottom: 15px;
+        padding: 0 21px;
+        border: 1px solid #DCDCDC;
+        border-radius: 4px;
+        @media only screen and (min-width: 1125px) {
+          margin-right: 0;
+          display: block;
+          margin-left: 15px;
         }
       }
 
-      a {
-        margin-bottom: 21px;
-        @include button-m-wide;
-        text-decoration: none;
+      .flex-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        h2 {
+          margin-top: 70px;
+          margin-bottom: 48px;
+          @include sofia-pro-light;
+          font-size: 24px;
+          text-align: center;
+          color: #3D3D3D;
+          text-transform: uppercase;
+          white-space: normal;
+
+          span {
+            @include sofia-pro-bold;
+          }
+        }
+
+        a {
+          margin-bottom: 21px;
+          @include button-m-wide;
+          text-decoration: none;
+        }
       }
     }
   }