Merge pull request #797 from appirio-tech/feature/1M-member-banner

AS#125999129126033, 1 Million users hero banner on Dashboard

Author: vikasrohit

app/directives/tc-banner/tc-banner.jade

@@ -1,9 +1,9 @@
 .tc-banner-placeholder(class="{{vm.theme}}")
   .image
     img(ng-src="{{vm.img}}")
-  .title(ng-bind="vm.title")
+  .title(ng-bind="vm.title", ng-show="vm.title !== null")
   .content(ng-transclude, ng-show="transcluded")
-  .description(ng-bind-html="vm.description")
+  .description(ng-bind-html="vm.description", ng-show="vm.description !== null")
   .ctas
     .cta(ng-repeat="link in vm.ctas")
       a(class="{{link.cssClass}}", title="{{link.title}}", ng-href="{{link.url}}", ng-if="link.url") {{link.title}}

app/my-dashboard/my-dashboard.jade

@@ -7,6 +7,8 @@
 
   //- .ttl
   //-   tc-banner(theme="black", banner-name="ttl")
+  .one-million
+    tc-banner(theme="black", banner-name="1million")
 
   .tco
     tc-banner(theme="black", banner-name="tco16")

app/services/bannerDataService.js

@@ -35,6 +35,16 @@ import angular from 'angular'
             url: 'http://tco16.topcoder.com/latest/overview/',
             cssClass: 'tc-btn tc-btn-s tco-cta'
           }]
+        },
+        '1million': {
+          title: null,
+          img: require('../../assets/images/1M-banner-hero.png'),
+          description: null,
+          ctas: [{
+            title: 'Learn More',
+            url: 'https://www.topcoder.com/blog/1-million-members-strong/',
+            cssClass: 'tc-btn tc-btn-s'
+          }]
         }
         // Commenting out instead of deleting in case there is
         // another one with a similar format soon

assets/css/my-dashboard/my-dashboard.scss

@@ -11,7 +11,7 @@
     background-color: $white;
   }
 
-  .challenges, .srms, .programs, .tco, .ttl, .community-updates {
+  .challenges, .srms, .programs, .tco, .ttl, .one-million, .community-updates {
     @include module-l;
     margin-top: 1px;
     width: 100%;
@@ -34,7 +34,25 @@
     }
   }
 
-  .challenges, .srms, .programs, .tco, .ttl, .community-updates {
+  .one-million {
+    .tc-banner-placeholder {
+      background: none $tc-gray-90;
+      .image {
+        img {
+          width: auto;
+        }
+      }
+
+      .ctas {
+        // specific css override to reduce the gap between image and ctas
+        // ideally we should have separate title, image and description
+        // however, here we have all 3 in single image
+        margin-top: 0px;
+      }
+    }
+  }
+
+  .challenges, .srms, .programs, .tco, .ttl, .one-million, .community-updates {
     padding-top: 0px;
   }