diff --git a/app/directives/tc-banner/tc-banner.jade b/app/directives/tc-banner/tc-banner.jade index 697a39c77..cadaf290f 100644 --- a/app/directives/tc-banner/tc-banner.jade +++ b/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}} diff --git a/app/my-dashboard/my-dashboard.jade b/app/my-dashboard/my-dashboard.jade index c1452f50e..43c19350f 100644 --- a/app/my-dashboard/my-dashboard.jade +++ b/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") diff --git a/app/services/bannerDataService.js b/app/services/bannerDataService.js index dd4b8f2c8..bb25bfa4b 100644 --- a/app/services/bannerDataService.js +++ b/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 diff --git a/assets/css/my-dashboard/my-dashboard.scss b/assets/css/my-dashboard/my-dashboard.scss index c60aca5eb..fea5f1ddb 100644 --- a/assets/css/my-dashboard/my-dashboard.scss +++ b/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; } diff --git a/assets/images/1M-banner-hero.png b/assets/images/1M-banner-hero.png new file mode 100644 index 000000000..cb2e87dd9 Binary files /dev/null and b/assets/images/1M-banner-hero.png differ