diff --git a/app/directives/notification/notification.jade b/app/directives/notification/notification.jade index 795e062ad..c13927abf 100644 --- a/app/directives/notification/notification.jade +++ b/app/directives/notification/notification.jade @@ -13,7 +13,7 @@ .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.videoHeight || config.height || vm.defaultHeight) + 'px'}") + .right(ng-if="config.videoCode") .btn-play(ng-hide="vm.loadVideo") i.fa.fa-play-circle-o(ng-click="vm.loadVideo=true;") div Play Video diff --git a/app/my-dashboard/notifications/news.json b/app/my-dashboard/notifications/news.json index b7ce103ea..80829cee0 100644 --- a/app/my-dashboard/notifications/news.json +++ b/app/my-dashboard/notifications/news.json @@ -1,19 +1,16 @@ [ { - "header": "Bonus Problem Writer Payments!", - "details": "February Special, Bonus Cash for Creating Algo Problems", - "headerExpand": "Bonus Problem Writer Payments!", - "detailsExpand": "The whole month of February can earn you bonus cash for writing Algorithm Problems. ", - "backgroundImageDesktop": "PW-desktop.jpg", - "backgroundImageTablet": "PW-tablet.jpg", - "backgroundImageMobile": "PW-mobile.jpg", - "redirectTo": "https://www.topcoder.com/blog/showing-some-love-problem-writers/", - "redirectText": "Read More", - "live": false, - "liveExpand": false, - "customTag": { - "text": "Announcement" - }, - "videoCode": "" + "header": "QA", + "details": "Live Reveal of New Topcoder Track w/ Will Price", + "headerExpand": "QA Track Revealed", + "detailsExpand": "Join Nick as he interviews Will Price who will be introducing Topcoder's newest track. Spoiler Alert: You could win a TCO Trip!", + "backgroundImageDesktop": "DarkCircles-desktop.jpg", + "backgroundImageTablet": "DarkCircles-tablet.jpg", + "backgroundImageMobile": "DarkCircles-mobile.jpg", + "redirectTo": "https://www.topcoder.com/all-you-need-to-know-about-qa-challenges/", + "redirectText": "Learn More Here", + "live": true, + "liveExpand": true, + "videoCode": "https://www.youtube.com/embed/LF6rc40-TSo" } ] diff --git a/assets/css/directives/notification.directive.scss b/assets/css/directives/notification.directive.scss index 475eaf450..f7efd0a0b 100644 --- a/assets/css/directives/notification.directive.scss +++ b/assets/css/directives/notification.directive.scss @@ -79,6 +79,16 @@ $desktop-width: 1024px; color: $tc-black; display: flex; position: relative; + + /* ====== + With Video + ======*/ + @include mobile { + flex-direction: column; + padding: 20px; + align-items: center; + } + .notification-bg-desktop, .notification-bg-tablet, .notification-bg-mobile { @@ -124,16 +134,20 @@ $desktop-width: 1024px; height: 400px; } @include tablet { - height: 375px; + height: 325px; display: flex; flex-direction: column; padding: 20px; } @include mobile { - height: 250px; + // Without video + + // height: 250px; display: flex; flex-direction: column; padding: 14px; + padding-top: 0; + margin-top: 0; } } .header{ @@ -142,27 +156,35 @@ $desktop-width: 1024px; margin-bottom: 14px; color: #FFF; @include desktop { - margin-top: 34px; - width: 50%; + margin-top: 75px; + width: 100%; padding: 20px 0 13px 44px; } @include tablet { font-size: 36px; text-align: center; - margin-bottom: 90px; + /* + ====== + With Video + ======*/ + flex: 1; + text-align: center; + margin-top:50px; + margin-bottom:20px; + /* ====== With Logo ====== - font-size: 36px; flex: 1; text-align: center; */ + } @include mobile { - font-size: 18px; + font-size: 20px; text-align: center; - padding-top: 55px; + padding-top: 20px; padding-bottom: 10px; /* ====== @@ -180,16 +202,16 @@ $desktop-width: 1024px; color: #FFF; position: relative; @include desktop { - max-width: 50%; + max-width: 100%; padding-left: 44px; font-size: 26px; line-height: 31px; margin-bottom: 55px; } @include tablet { - font-size: 25px; - line-height: 30px; - margin-bottom: 105px; + font-size: 22px; + line-height: 28px; + margin-bottom: 40px; text-align: center; /* ====== @@ -203,7 +225,7 @@ $desktop-width: 1024px; } @include mobile { font-size: 14px; - margin-bottom: 55px; + margin-bottom: 25px; text-align: center; /* ====== @@ -242,9 +264,21 @@ $desktop-width: 1024px; justify-content: space-around; margin: 55px; width: 50%; - @media screen and (max-width: 768px) { + @include desktop { + height: 350px; + } + @include tablet { + min-height: 250px; + margin: 10px; + margin-top: 65px; + margin-bottom: 20px; + } + @include mobile { margin-top: 0; width: 100%; + max-width: 450px; + min-height: 250px; + margin: 10px; } .btn-play{ text-align: center; diff --git a/assets/images/news/DarkCircles-desktop.jpg b/assets/images/news/DarkCircles-desktop.jpg new file mode 100644 index 000000000..605bd6dc9 Binary files /dev/null and b/assets/images/news/DarkCircles-desktop.jpg differ diff --git a/assets/images/news/DarkCircles-mobile.jpg b/assets/images/news/DarkCircles-mobile.jpg new file mode 100644 index 000000000..7ee118eec Binary files /dev/null and b/assets/images/news/DarkCircles-mobile.jpg differ diff --git a/assets/images/news/DarkCircles-tablet.jpg b/assets/images/news/DarkCircles-tablet.jpg new file mode 100644 index 000000000..c1e186c22 Binary files /dev/null and b/assets/images/news/DarkCircles-tablet.jpg differ diff --git a/assets/images/news/PW-desktop.jpg b/assets/images/news/PW-desktop.jpg deleted file mode 100644 index 4ef3a0fde..000000000 Binary files a/assets/images/news/PW-desktop.jpg and /dev/null differ diff --git a/assets/images/news/PW-mobile.jpg b/assets/images/news/PW-mobile.jpg deleted file mode 100644 index cd1e05bd7..000000000 Binary files a/assets/images/news/PW-mobile.jpg and /dev/null differ diff --git a/assets/images/news/PW-tablet.jpg b/assets/images/news/PW-tablet.jpg deleted file mode 100644 index ab2b3808e..000000000 Binary files a/assets/images/news/PW-tablet.jpg and /dev/null differ diff --git a/assets/images/news/tshirt-desktop.jpg b/assets/images/news/tshirt-desktop.jpg new file mode 100644 index 000000000..194dd3cc0 Binary files /dev/null and b/assets/images/news/tshirt-desktop.jpg differ diff --git a/assets/images/news/tshirt-mobile.jpg b/assets/images/news/tshirt-mobile.jpg new file mode 100644 index 000000000..cf6e67098 Binary files /dev/null and b/assets/images/news/tshirt-mobile.jpg differ diff --git a/assets/images/news/tshirt-tablet.jpg b/assets/images/news/tshirt-tablet.jpg new file mode 100644 index 000000000..3d5cabba2 Binary files /dev/null and b/assets/images/news/tshirt-tablet.jpg differ