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

Commit 8a6697d

Browse files
author
Nick Litwin
committed
Style intro JS components
1 parent 1c08f65 commit 8a6697d

File tree

5 files changed

+184
-88
lines changed

5 files changed

+184
-88
lines changed

app/layout/header/header.controller.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
});
9191
};
9292

93-
// Intro data
9493
vm.introOptions = IntroService.getIntroData($state.$current.name);
9594
}
9695
})();

app/layout/header/header.jade

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,62 @@
1-
// Header container
21
.header-wrapper(ng-class="{'autocomplete': main.searchTerm.length > 0}")
3-
// Main header element
4-
div(ng-intro-options="vm.introOptions", ng-intro-method="launchIntro")
2+
div(ng-intro-options="vm.introOptions", ng-intro-autostart="true")
3+
54
header.top-header
65
a.logo-link(href="/")
76
// Header content visible on small screens
87
.show-small.mobile-heading
98
span.tc-text-logo(ng-if="main.menuVisible") [ topcoder ]
9+
1010
button.btn-open-menu(type="button", ng-if="!main.menuVisible", ng-click="main.menuVisible = true") Menu
11+
1112
button.btn-close-menu(type="button", ng-if="main.menuVisible", ng-click="main.menuVisible = false")
13+
1214
// User link (profile or join)
1315
a(ui-sref="profile.about({userHandle: vm.userHandle})", ng-switch="vm.isAuth" class="user-link" data-ng-if="!main.menuVisible")
1416
img(ng-switch-when="true", class="user-avatar", ng-src="{{vm.profile.photoURL}}")
17+
1518
span(ng-switch-when="false" class="btn-link") JOIN
1619

17-
// main menu
1820
ul.main-menu
19-
// search container
2021
li.menu-item.search-wrapper
2122
.menu-item-header.show-large #[button.btn-expand-search.search-icon(type="button")]
23+
2224
.submenu
2325
input(type="text" placeholder="find people" ng-model="vm.searchTerm" ng-keyup="vm.checkSubmit($event)")
2426
// Suggestion list container
2527
// ul.suggestion-list(ng-if="main.searchTerm.length > 0")
26-
// li(ng-repeat="suggestion in main.suggestions | filter:main.searchTerm | limitTo:5")
28+
// li(ng-repeat="suggestion in main.suggestions | filter:main.searchTerm | limitTo:5")
2729
// a(href="javascript:;" class="menu-link") {{suggestion}}
2830
29-
// user menu
3031
li.menu-item.link-group.user-menu(ng-switch="vm.isAuth", ng-class="{'anonymous-menu': !vm.isAuth}")
3132
// links for logged in user
3233
div(ng-switch-when="true")
3334
.menu-item-header
3435
span(ui-sref="profile.about({userHandle: vm.userHandle})")
3536
img(class="user-avatar", ng-src="{{vm.profile.photoURL}}")
37+
3638
span.username {{vm.userHandle}}
39+
3740
a.btn-link.btn-edit-profile.show-small(ui-sref="settings.profile") EDIT
41+
3842
ul.submenu
3943
header-menu-item(ng-repeat="item in vm.userMenu" item="item")
44+
4045
li.submenu-item
4146
a.menu-link(ng-click="vm.logout(); main.menuVisible = vm.isAuth = false")
4247
img.menu-icon(ng-src="/images/nav/logout.svg")
4348
.menu-text LOG OUT
49+
4450
// links for anonymous user
4551
.menu-item-header(ng-switch-when="false")
4652
a.btn-link(ui-sref="register") REGISTER
53+
4754
a.btn-link.secondary-link(ui-sref="login") LOGIN
55+
4856
a(ng-click="launchIntro();", ng-show="!!vm.introOptions") Intro
4957

5058
li.menu-item.link-group(ng-repeat="(menu, items) in vm.menuLinks")
5159
.menu-item-header {{menu}}
60+
5261
ul.submenu
5362
header-menu-item(ng-repeat="item in items" item="item")

app/my-dashboard/my-challenges/my-challenges.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading", ng-class="{ '
4545

4646
challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="vm.challengeView", ng-class="vm.challengeView + '-view'")
4747

48-
.my-challenges-links(ng-if="vm.userHasChallenges && !vm.loading")
48+
.my-challenges-links(id="viewAllChallenges", ng-if="vm.userHasChallenges && !vm.loading")
4949
a(ui-sref="my-challenges({status: 'active'})") View All Active Challenges
5050

5151
a(ui-sref="my-challenges({status: 'completed'})") View All Past Challenges

app/services/introduction.service.js

Lines changed: 80 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -7,97 +7,99 @@
77
var _data = {
88
'default': {
99
steps:[],
10-
showStepNumbers: false,
10+
showStepNumbers: true,
1111
exitOnOverlayClick: true,
1212
exitOnEsc:true,
13-
nextLabel: '<strong>Next</strong>',
14-
prevLabel: '<span style="color:green">Previous</span>',
15-
skipLabel: 'Exit',
16-
doneLabel: 'Thanks'
13+
nextLabel: 'Next',
14+
prevLabel: 'Back',
15+
skipLabel: 'Skip',
16+
doneLabel: 'Finish'
1717
},
1818
profile: {
1919
about: {
2020
steps: [
2121
{
22-
intro: "Welcome to the new Topcoder Profile. To make this the premier place to showcase skills, we have reimagined this page and introduced several new features."
23-
}
24-
,{
25-
element: "#skills",
26-
intro: "The quickest way to understand a member’s skills. It includes languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well.",
27-
position: "top"
28-
}
29-
,{
30-
element: "#tcActivity",
31-
intro: "Topcoder activity, ratings and other statistics now live in this section. See the active sub-tracks and click on them for even more details and history.",
32-
position: "top"
33-
}
34-
,{
35-
element: "#externalLinks",
36-
intro: "Best of member’s presence on the web will be highlighted here. Show off your work and experience outside of Topcoder by connecting accounts or adding links.",
37-
position: "top"
22+
intro: 'Welcome to the new Topcoder Profile. To make this the premier place to showcase skills, we have reimagined this page and introduced several new features.'
23+
},
24+
{
25+
element: '#skills',
26+
intro: 'The quickest way to understand a member’s skills. It includes languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well.',
27+
position: 'top'
28+
},
29+
{
30+
element: '#tcActivity',
31+
intro: 'Topcoder activity, ratings and other statistics now live in this section. See the active sub-tracks and click on them for even more details and history.',
32+
position: 'top'
33+
},
34+
{
35+
element: '#externalLinks',
36+
intro: 'Best of member’s presence on the web will be highlighted here. Show off your work and experience outside of Topcoder by connecting accounts or adding links.',
37+
position: 'top'
3838
}
3939
]
4040
},
4141
subTrack: {
4242
steps: [
4343
{
44-
intro: "Welcome to the new Sub-track details page. This page contains activity in this track and in-depth metrics in an easy-to-understand way."
45-
}
46-
,{
47-
element: "#metrics",
48-
intro: "Find the most important metrics here to understand performance in a glance.",
49-
position: "top"
50-
}
51-
,{
52-
element: "#challenges",
53-
intro: "This sections contains all the completed challenges, in order of success.",
54-
position: "top"
55-
}
56-
,{
57-
element: "#stats",
58-
intro: "This sections contains charts and more in-depth metrics to get a very granular understanding of the activity in this sub-track.",
59-
position: "top"
60-
}
61-
// ,{
62-
// element: "#navigation",
63-
// intro: "And finally, go from one active sub-track to another by opening the profile navigation here",
64-
// position: "bottom"
44+
intro: 'Welcome to the new Sub-track details page. This page contains activity in this track and in-depth metrics in an easy-to-understand way.'
45+
},
46+
{
47+
element: '#metrics',
48+
intro: 'Find the most important metrics here to understand performance in a glance.',
49+
position: 'top'
50+
},
51+
{
52+
element: '#challenges',
53+
intro: 'This sections contains all the completed challenges, in order of success.',
54+
position: 'top'
55+
},
56+
{
57+
element: '#stats',
58+
intro: 'This sections contains charts and more in-depth metrics to get a very granular understanding of the activity in this sub-track.',
59+
position: 'top'
60+
},
61+
// {
62+
// element: '#navigation',
63+
// intro: 'And finally, go from one active sub-track to another by opening the profile navigation here',
64+
// position: 'bottom'
6565
// }
6666
]
6767
}
6868
},
6969
dashboard: {
7070
steps: [
7171
{
72-
intro: "Welcome to the your new Topcoder Dashboard. We have revamped the dashboard to bring to fore the information that matters to you. Let us walk you through some of the new things to help you keep on top of your TopCoder activity."
73-
}
74-
,{
75-
element: "#metrics",
76-
intro: "Quickly glance your active challenges and money earned, and click on them to see more in detail.",
77-
position: "bottom"
78-
}
79-
,{
80-
element: "#stats",
81-
intro: "Keep on top of how you are faring vs rest of the community with the rating here.",
82-
position: "top"
83-
}
84-
,{
85-
element: "#challenges",
86-
intro: "All your active challenges can be found here. See the phase, and activity on here, or click on them to go to the challenge details. You can view these in a grid or list view.",
87-
position: "top"
88-
}
89-
,{
90-
element: "#viewAllChallenges",
91-
intro: "Want to see more of the challenges? Or look up a past one? Click on the buttons here to see all of your challenges.",
92-
position: "top"
93-
},{
94-
element: "#srms",
95-
intro: "Keep track of the SRMs being scheduled, and find easy links to past problems, editorial and the Arena.",
96-
position: "top"
97-
},{
98-
element: "#community",
99-
intro: "Don’t miss out on the latest happenings in our community. Blogs, Events, Member Programs and more!",
100-
position: "top"
72+
intro: 'Welcome to your new Topcoder Dashboard. We have revamped the dashboard to bring to fore the information that matters to you. Let us walk you through some of the new things to help you keep on top of your Topcoder activity.'
73+
},
74+
{
75+
element: '#metrics',
76+
intro: 'Quickly glance your active challenges and money earned, and click on them to see more in detail.',
77+
position: 'bottom'
78+
},
79+
{
80+
element: '#stats',
81+
intro: 'Keep on top of how you are faring vs rest of the community with the rating here.',
82+
position: 'top'
83+
},
84+
{
85+
element: '#challenges',
86+
intro: 'All your active challenges can be found here. See the phase, and activity on here, or click on them to go to the challenge details. You can view these in a grid or list view.',
87+
position: 'top'
88+
},
89+
{
90+
element: '#viewAllChallenges',
91+
intro: 'Want to see more of the challenges? Or look up a past one? Click on the buttons here to see all of your challenges.',
92+
position: 'top'
93+
},
94+
{
95+
element: '#srms',
96+
intro: 'Keep track of the SRMs being scheduled, and find easy links to past problems, editorial and the Arena.',
97+
position: 'top'
98+
},
99+
{
100+
element: '#community',
101+
intro: 'Don’t miss out on the latest happenings in our community. Blogs, Events, Member Programs and more!',
102+
position: 'top'
101103
}
102104
]
103105
}
@@ -107,16 +109,22 @@
107109
var service = {
108110
getIntroData: getIntroData
109111
};
112+
110113
return service;
111114

112115
/////////////////
116+
113117
function getIntroData(stateName) {
114118
// verfiy that state exists
115119
var stateData = _.get(_data, stateName, null);
116-
if (!stateData)
120+
121+
if (!stateData) {
117122
return null;
123+
}
124+
118125
var mergedData = _.clone(_data['default'], true);
119126
mergedData = _.merge(mergedData, stateData);
127+
120128
return mergedData;
121129
}
122130
}

assets/css/topcoder.scss

Lines changed: 87 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -217,20 +217,100 @@ a {
217217

218218

219219
// Intro JS
220-
221220
.introjs-overlay {
222-
background: rgba(239,239,239,0.60);
223-
background-image: linear-gradient(-180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
221+
background: rgba(239, 239, 239, 0.60);
222+
background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
223+
}
224+
225+
.introjs-tooltip {
226+
max-width: 320px;
227+
padding: 20px;
224228
}
225229

230+
.introjs-tooltiptext {
231+
@include source-sans-regular;
232+
font-size: 14px;
233+
line-height: 24px;
234+
color: $gray-darker;
235+
}
236+
237+
226238
.introjs-helperLayer {
227-
background: #FFFFFF;
239+
background: $white;
228240
border: 1px solid #85CCFF;
229-
box-shadow: 0px 0px 4px 0px rgba(0,150,255,0.20); border-radius: 6px;
241+
box-shadow: 0px 0px 4px 0px rgba(0, 150, 255, 0.20);
242+
border-radius: 6px;
230243
}
231244

232245
.introjs-helperNumberLayer {
233-
background: #0096FF;
234-
border: 3px solid #FFFFFF;
246+
width: 30px;
247+
height: 30px;
248+
padding: 0;
249+
line-height: 22px;
250+
border: 3px solid $white;
251+
background: $accent;
252+
@include sofia-pro-medium;
253+
font-size: 17px;
235254
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);
236255
}
256+
257+
.introjs-tooltipbuttons {
258+
width: 280px;
259+
float: right;
260+
}
261+
262+
// Refactor buttons when button mixins and/or style guide is done
263+
.introjs-button {
264+
@include button-m;
265+
padding: 0 10px;
266+
background-color: $gray;
267+
background-image: none;
268+
color: $white;
269+
text-shadow: none;
270+
271+
&:hover {
272+
background-color: $accent;
273+
color: $white;
274+
box-shadow: none;
275+
}
276+
277+
& .introjs-disabled {
278+
background-color: $gray;
279+
}
280+
281+
&:focus {
282+
background-image: none;
283+
}
284+
}
285+
286+
.introjs-skipbutton {
287+
float: left;
288+
color: $gray-dark;
289+
background-color: $white;
290+
border: 1px solid $gray;
291+
292+
&:hover {
293+
color: $gray-dark;
294+
background-color: $white;
295+
}
296+
}
297+
298+
.introjs-prevbutton {
299+
margin-right: 10px;
300+
}
301+
.introjs-nextbutton {}
302+
303+
.introjs-bullets ul li {
304+
margin-right: 3px;
305+
}
306+
307+
.introjs-bullets ul li a {
308+
width: 5px;
309+
height: 5px;
310+
border-radius: 0;
311+
background-color: $gray;
312+
313+
&.active {
314+
background-color: $accent;
315+
}
316+
}

0 commit comments

Comments
 (0)