DASHBOARD LIVE: TCO17 Broadcast

Author: birdofpreyru

app/directives/notification/notification.jade

@@ -6,16 +6,14 @@
     .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)+')'}")
-    a.mask(href="{{config.redirectTo}}")
-       
     .left(ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
       .header {{config.headerExpand}}
       .details {{config.detailsExpand}}
       a.action(ng-show="config.redirectText && config.redirectTo", href="{{config.redirectTo}}") {{config.redirectText}}
-    .right(ng-if="config.videoCode", ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
+    .right(ng-if="config.videoCode", ng-style="{'height': (config.videoHeight || config.height || vm.defaultHeight) + 'px'}")
       .btn-play(ng-hide="vm.loadVideo")
         i.fa.fa-play-circle-o(ng-click="vm.loadVideo=true;")
         div Play Video
-      iframe(ng-if="vm.loadVideo" ng-src="{{vm.videoUrl(config.videoCode)}}", allowfullscreen, frameborder="0", width="100%" height="{{config.height||vm.defaultHeight}}")
+      iframe(ng-if="vm.loadVideo" ng-src="{{vm.videoUrl(config.videoCode)}}", allowfullscreen, frameborder="0", width="100%" height="{{config.videoHeight || config.height||vm.defaultHeight}}")
       .live(ng-show="config.liveExpand") LIVE
     i.collapse.fa.fa-remove(ng-click="vm.toggle()")

app/my-dashboard/notifications/news.json

@@ -1,17 +1,14 @@
 [
   {
     "header": "TCO17 Live Broadcast",
-    "details": "TCO17 Finals Live Broadcast Schedule - Save the Date!",
-    "headerExpand": "TCO17 Finals Live Broadcast Schedule - Save the Date!",
-    "detailsExpand": "TCO17 Finals Live Broadcast Schedule - Save the Date! Watch the competitions live, staff and finalist interviews, and be a part of our flagship community event!",
+    "details": "Watch now!",
     "backgroundImage": "tco17-live-broadcast.jpg",
     "redirectTo": "https://tco17.topcoder.com/videos",
     "redirectText": "TCO17 Live Broadcast Schedule",
-    "live": false,
-    "liveExpand": false,
-    "customTag": {
-      "text": "Announcement"
-    },
-    "height": 760
+    "live": true,
+    "liveExpand": true,
+    "height": 600,
+    "videoCode": "http://player.twitch.tv/?channel=topcoder_official",
+    "videoHeight": 480
   }
 ]

assets/css/directives/notification.directive.scss

@@ -54,12 +54,15 @@
     }
   }
   .expanded{
-    background-position: center;
-    background-size: cover;
+    background-color: $tc-black;
+    background-position: 0 0;
+    background-size: 50% 100%;
+    background-repeat: no-repeat;
     color: $tc-black;
     display: flex;
     position: relative;
     @media screen and (max-width: 768px) {
+      background-size: 100% 50%;
       flex-direction: column;
     }
     .mask{
@@ -71,8 +74,6 @@
       z-index: 1;
     }
     .left{
-      padding-top: 70px;
-      padding-right: 64px;
       flex: 1;
       height: 100%;
       position: relative;
@@ -93,8 +94,8 @@
     }
     .action{
       position: absolute;
-      bottom: 40px;
-      left: 60px;
+      bottom: 100px;
+      left: 150px;
       background-color: white;
       padding: 10px 20px;
       border-radius: 26px;
@@ -106,6 +107,12 @@
       display: flex;
       align-items: center;
       justify-content: space-around;
+      margin-top: 80px;
+      width: 50%;
+      @media screen and (max-width: 768px) {
+        margin-top: 0;
+        width: 100%;
+      }
       .btn-play{
         text-align: center;
         font-size: 26px;