Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 3c7d819

Browse files
author
vikasrohit
committed
Merge pull request #748 from appirio-tech/feature/tco-banner
AS:100624428182393, Create a modified Dashboard banner for TCO
2 parents 8c23432 + e31c52d commit 3c7d819

File tree

7 files changed

+242
-2
lines changed

7 files changed

+242
-2
lines changed

‎app/directives/tc-banner/tc-banner.directive.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import angular from 'angular'
2+
import _ from 'lodash'
3+
4+
(function() {
5+
'use strict'
6+
7+
angular.module('tcUIComponents')
8+
.directive('tcBanner', tcBanner)
9+
10+
tcBanner.$inject = ['CONSTANTS', 'BannerDataService']
11+
12+
function tcBanner(CONSTANTS, BannerDataService) {
13+
return {
14+
restrict: 'E',
15+
transclude: true,
16+
template: require('./tc-banner')(),
17+
scope: {
18+
bannerName: '@',
19+
theme: '@'
20+
},
21+
link : function(scope, element, attrs) {
22+
var rootDiv = angular.element(element.children()[0])
23+
var contentDiv = _.find(rootDiv.children(), function(el) {
24+
return angular.element(el).hasClass('content')
25+
})
26+
scope.transcluded = angular.element(contentDiv)[0].children.length > 0
27+
},
28+
controller: ['$scope', '$attrs', '$element', '$parse', '$rootScope', function($scope, $attrs, $element, $parse, $rootScope) {
29+
$scope.DOMAIN = CONSTANTS.domain
30+
var vm = this
31+
vm.title = null
32+
vm.description = null
33+
vm.img = null
34+
vm.theme = _.get($scope, 'theme', null)
35+
vm.ctas = null
36+
37+
activate()
38+
39+
vm.handleClick = function(_link) {
40+
$rootScope.$broadcast(_link.eventName)
41+
}
42+
43+
function activate() {
44+
var banner = BannerDataService.getBanner($scope.bannerName)
45+
if (banner) {
46+
vm.title = banner.title
47+
vm.img = banner.img
48+
vm.description = banner.description
49+
vm.ctas = banner.ctas
50+
}
51+
}
52+
}],
53+
controllerAs: 'vm'
54+
}
55+
}
56+
})()

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.tc-banner-placeholder(class="{{vm.theme}}")
2+
.image
3+
img(ng-src="{{vm.img}}")
4+
.title(ng-bind="vm.title")
5+
.content(ng-transclude, ng-show="transcluded")
6+
.description(ng-bind="vm.description")
7+
.ctas
8+
.cta(ng-repeat="link in vm.ctas")
9+
a(class="{{link.cssClass}}", title="{{link.title}}", ng-href="{{link.url}}", ng-if="link.url") {{link.title}}
10+
a(class="{{link.cssClass}}", title="{{link.title}}", ui-sref="{{link.state}}", ng-if="link.state") {{link.title}}
11+
a(class="{{link.cssClass}}", title="{{link.title}}", ng-click="vm.handleClick(link)", ng-if="link.eventName") {{link.title}}

‎app/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ require('../assets/css/directives/design-challenge-user-place.scss')
113113
require('../assets/css/directives/challenge-tile.scss')
114114
require('../assets/css/directives/challenge-links.directive.scss')
115115
require('../assets/css/directives/badge-tooltip.scss')
116+
require('../assets/css/directives/tc-banner.scss')
116117
require('../assets/css/community/statistics.scss')
117118
require('../assets/css/community/members.scss')
118119
require('../assets/css/community/community.scss')

‎app/my-dashboard/my-dashboard.jade‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55

66
.challenges(id="challenges", ui-view="my-challenges")
77

8+
.tco
9+
tc-banner(theme="black", banner-name="tco16")
10+
811
.srms(id="srms", ui-view="srms", ng-show="dashboard.showSRMs")
912

1013
.programs(id="community", ui-view="programs")

‎app/services/bannerDataService.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import angular from 'angular'
2+
3+
(function() {
4+
'use strict'
5+
6+
angular.module('tc.services').factory('BannerDataService', BannerDataService)
7+
8+
BannerDataService.$inject = ['CONSTANTS']
9+
10+
function BannerDataService(CONSTANTS) {
11+
var bannersData = null
12+
_init()
13+
14+
var service = {
15+
getBanner: getBanner
16+
}
17+
18+
return service
19+
20+
function getBanner(stateName) {
21+
if (bannersData[stateName]) {
22+
return bannersData[stateName]
23+
}
24+
return null
25+
}
26+
27+
function _init() {
28+
bannersData = {
29+
'tco16': {
30+
title: '2016 Topcoder Open',
31+
img: require('../../assets/images/nav/ico-tco16.svg'),
32+
description: 'The Topcoder Open (TCO) is our annual online and onsite tournament to celebrate and reward the community.',
33+
ctas: [{
34+
title: 'About TCO',
35+
url: 'http://tco16.topcoder.com',
36+
cssClass: 'tc-btn tc-btn-s tco-cta'
37+
}]
38+
}
39+
}
40+
}
41+
}
42+
})()

‎assets/css/directives/tc-banner.scss‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
@import 'topcoder/tc-includes';
2+
3+
$tco-color: #F47A20;
4+
$tco-color-dark: #ea690b;
5+
6+
.tc-banner-placeholder {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
color: $gray-darkest;
11+
padding: 20px 10px 20px 10px;
12+
@media only screen and (min-width: 768px) {
13+
padding: 30px 20px 30px 20px;
14+
}
15+
16+
.image {
17+
margin-bottom: 15px;
18+
19+
img {
20+
width: 186px;
21+
}
22+
}
23+
24+
.title {
25+
@include sofia-pro-medium;
26+
font-size: 24px;
27+
line-height: 29px;
28+
text-align: center;
29+
text-transform: uppercase;
30+
}
31+
32+
.content {
33+
margin-top: 20px;
34+
@media only screen and (min-width: 768px) {
35+
margin-top: 30px;
36+
}
37+
}
38+
39+
.description {
40+
max-width: 650px;
41+
margin-top: 20px;
42+
@include merriweather-sans-regular;
43+
font-size: 15px;
44+
line-height: 24px;
45+
text-align: center;
46+
@media only screen and (min-width: 768px) {
47+
margin-top: 30px;
48+
}
49+
@media only screen and (min-width: 900px) {
50+
max-width: 856px;
51+
}
52+
}
53+
54+
.ctas {
55+
text-align: center;
56+
display: flex;
57+
flex-direction: column;
58+
margin-top: 20px;
59+
@media only screen and (min-width: 768px) {
60+
margin-top: 30px;
61+
}
62+
63+
.cta {
64+
&:not(:first-child) {
65+
margin-top: 30px;
66+
}
67+
}
68+
69+
a {
70+
text-transform: uppercase;
71+
display: block;
72+
@include sofia-pro-medium;
73+
74+
&.primary-cta {
75+
}
76+
77+
&.secondary-cta {
78+
font-size: 12px;
79+
line-height: 12px;
80+
color: $accent-gray;
81+
}
82+
83+
&.tco-cta {
84+
border: 1px solid $tco-color;
85+
background-color: $tco-color;
86+
87+
&:focus {
88+
border: 1px solid $tco-color;
89+
background-color: $tco-color;
90+
}
91+
92+
&:hover {
93+
background-color: $tco-color-dark;
94+
border-color: $tco-color-dark;
95+
}
96+
97+
&:active {
98+
background-color: $tco-color-dark;
99+
border-color: $tco-color-dark;
100+
}
101+
}
102+
}
103+
}
104+
}
105+
106+
// themes
107+
108+
// black
109+
.tc-banner-placeholder.black {
110+
background-color: #222222;
111+
.title {
112+
@include sofia-pro-bold;
113+
color: $white;
114+
}
115+
116+
.description {
117+
color: $white;
118+
}
119+
120+
.ctas {
121+
.cta {
122+
.learn-more {
123+
color: $gray-lighter;
124+
}
125+
}
126+
}
127+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
background-color: $white;
1212
}
1313

14-
.challenges, .srms, .programs, .community-updates {
14+
.challenges, .srms, .programs, .tco, .community-updates {
1515
@include module-l;
1616
margin-top: 1px;
1717
width: 100%;
@@ -23,7 +23,7 @@
2323
}
2424
}
2525

26-
.challenges, .srms, .programs, .community-updates {
26+
.challenges, .srms, .programs, .tco, .community-updates {
2727
@media only screen and (min-width: 900px) {
2828
padding-top: 0px;
2929
}

0 commit comments

Comments
 (0)