Make announcement responsive, change announcement and TCO banner

Author: ThomasKranitsas

app/directives/notification/notification.jade

@@ -5,8 +5,11 @@
     .header {{config.header}}: 
     .details {{config.details}}
     i.expand.fa.fa-plus(ng-click="vm.toggle()")
-  .expanded(ng-show="vm.expanded", ng-style="{'background-image': 'url('+vm.loadImage(config.backgroundImage)+')'}")
-    .left(ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
+  .expanded(ng-show="vm.expanded")
+    .notification-bg-desktop(ng-style="{'background-image': 'url('+vm.loadImage(config.backgroundImageDesktop)+')'}")
+    .notification-bg-tablet(ng-style="{'background-image': 'url('+vm.loadImage(config.backgroundImageTablet)+')'}")
+    .notification-bg-mobile(ng-style="{'background-image': 'url('+vm.loadImage(config.backgroundImageMobile)+')'}")
+    .left
       .header {{config.headerExpand}}
       .details {{config.detailsExpand}}
       a.action(ng-show="config.redirectText && config.redirectTo", href="{{config.redirectTo}}") {{config.redirectText}}

app/my-dashboard/notifications/news.json

@@ -1,18 +1,19 @@
 [
   {
-    "header": "Topcoder MVP Announcement!",
-    "details": "Check out our first group of MVPs!",
-    "headerExpand": "Topcoder MVP Announcement!",
-    "detailsExpand": "Check out our first group of MVPs! Learn more about who they are and a little bit more about them!",
-    "backgroundImage": "tc-mvps-banner.jpg",
-    "redirectTo": "https://www.topcoder.com/blog/introducing-2018-topcoder-mvp-members/",
-    "redirectText": "Read More Here",
+    "header": "QA - A New Way to Win a Trip to TCO!",
+    "details": "QA Challenges now have TCO18 points. Top the leaderboard and win a trip to the TCO18 Finals!",
+    "headerExpand": "QA - A New Way to Win a Trip to TCO!",
+    "detailsExpand": "Stage 3 of TCO18 has begun and QA Challenges now have TCO18 points. Top the leaderboard and win a trip to the TCO18 Finals!",
+    "backgroundImageDesktop": "TCO18-desktop.jpg",
+    "backgroundImageTablet": "TCO18-tablet.jpg",
+    "backgroundImageMobile": "TCO18-mobile.jpg",
+    "redirectTo": "https://tco18.topcoder.com/win-a-trip/qa-trip-winning-opportunity/",
+    "redirectText": "Read More",
     "live": false,
     "liveExpand": false,
     "customTag": {
       "text": "Announcement"
     },
-    "videoCode": "",
-    "height": 500
+    "videoCode": ""
   }
 ]

assets/css/directives/notification.directive.scss

@@ -1,5 +1,26 @@
 @import 'topcoder/tc-includes';
 
+$tablet-width: 768px;
+$desktop-width: 1024px;
+
+@mixin mobile {
+  @media screen and (max-width: #{$tablet-width - 1px}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media screen and (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media screen and (min-width: #{$desktop-width}) {
+    @content;
+  }
+}
+
 .notification{
   margin-bottom: 24px;
   .live{
@@ -55,13 +76,41 @@
   }
   .expanded{
     background-color: $tc-black;
-    background-position: center top;
-    // background-position: 0 20%;
-    background-size: cover;
-    background-repeat: no-repeat;
     color: $tc-black;
     display: flex;
     position: relative;
+    .notification-bg-desktop,
+    .notification-bg-tablet,
+    .notification-bg-mobile {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-position: center top;
+      // background-position: 0 20%;
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+    .notification-bg-desktop {
+      @include desktop {
+        background-position: center center;
+        display: block;
+      }
+    }
+    .notification-bg-tablet {
+      @include tablet {
+        display: block;
+        background-position: center right;
+      }
+    }
+    .notification-bg-mobile {
+      @include mobile {
+        background-position: center right;
+        display: block;
+      }
+    }
     .mask{
       position: absolute;
       top: 0;
@@ -72,33 +121,83 @@
     }
     .left{
       flex: 1;
-      height: 100%;
       position: relative;
-      margin-top: 2%;
+      @include desktop {
+        height: 400px;
+      }
+      @include tablet {
+        height: 375px;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+      }
+      @include mobile {
+        height: 230px;
+        display: flex;
+        flex-direction: column;
+        padding: 14px;
+      }
     }
     .header{
       font-weight: bold;
       font-size: 40px;
-      margin-top: 340px;
-      padding-left: 60px;
-      margin-bottom: 12px;
+      margin-bottom: 14px;
       color: #FFF;
+      @include desktop {
+        margin-top: 34px;
+        padding-left: 44px;
+      }
+      @include tablet {
+        font-size: 36px;
+        flex: 1;
+        text-align: center;
+      }
+      @include mobile {
+        font-size: 18px;
+        flex: 1;
+      }
     }
     .details{
-      max-width: 50%;
       font-size: 16px;
       line-height: 16px;
       font-weight: 100;
-      padding-left: 60px;
       color: #FFF;
+      position: relative;
+      @include desktop {
+        max-width: 50%;
+        padding-left: 44px;
+        font-size: 18px;
+        line-height: 22px;
+        margin-bottom: 40px;
+      }
+      @include tablet {
+        font-size: 16px;
+        margin-bottom: 16px;
+        text-align: center;
+      }
+      @include tablet {
+        font-size: 14px;
+        margin-bottom: 16px;
+        text-align: center;
+      }
     }
     .action{
-      position: absolute;
-      bottom: 30px;
-      left: 60px;
       background-color: white;
       padding: 10px 20px;
       border-radius: 26px;
+      @include desktop {
+        position: relative;
+        margin-left: 40px;
+      }
+      @include tablet {
+        text-align: center;
+      }
+      @include mobile {
+        padding: 6px 20px;
+        font-size: 14px;
+        margin-top: 4px;
+        text-align: center;
+      }
     }
     .right{
       flex: 1;

assets/css/my-dashboard/notifications.scss

@@ -40,7 +40,8 @@
       margin-right: 0;
     }
     &.tco18{
-      background: url(../../images/banner-tco18-stage-2.jpg) center/cover;
+      background: url(../../images/banner-tco18-stage-3.jpg) center/cover;
+      background-position: center top;
     }
     &.watson{
       background: url(../../images/banner-watson.jpg) center/cover;