Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit e240b62

Browse files
nlitwinnlitwin
committedSep 20, 2015
Merge pull request #191 from appirio-tech/srms-section-styles
Srms section styles
2 parents 583a671 + 192c880 commit e240b62

File tree

8 files changed

+172
-111
lines changed

8 files changed

+172
-111
lines changed
 

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ header
77

88
p Active Challenges
99

10+
.slash(ng-show="dashboard.isCopilot")
11+
1012
.money-earned
1113
p.number(ng-bind='vm.moneyEarned || 0 | currency:undefined:0')
1214

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

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

66
.section-loading(ng-show="vm.loading")
77

8-
section.challenges(ng-if="vm.userHasChallenges && !vm.loading")
9-
challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="'tile'", ng-class="'tile-view'")
8+
section(ng-if="vm.userHasChallenges && !vm.loading")
9+
.challenges
10+
challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="'tile'", ng-class="'tile-view'")
1011

1112
.section-links
1213
.link
@@ -17,6 +18,3 @@ section.challenges(ng-if="vm.userHasChallenges && !vm.loading")
1718

1819
.link(ng-hide="vm.userHasChallenges")
1920
a(href="https://community.{{vm.domain}}/", target="_blank") View Help Library
20-
21-
.spotlightChallenges(ng-hide="vm.userHasChallenges")
22-
challenge-tile.spotlight(ng-repeat="spotlight in vm.spotlightChallenges", spotlight, challenge="spotlight", domain="vm.domain", view="'tile'")

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
header
22
h1.section-title Single Round Matches
33

4-
a.viewSRMs(ui-sref="my-srms") View All Past SRMs
4+
//- a.viewSRMs(ui-sref="my-srms") View All Past SRMs
55
66
.section-loading(ng-show="vm.loading")
77

8-
section.srm-tiles(ng-hide="vm.loading")
9-
srm-tile.srm-tile(ng-repeat="srm in vm.srms", srm="srm", view="'tile'", ng-class="'tile-view'")
8+
section(ng-hide="vm.loading")
9+
.srm-tiles
10+
srm-tile(ng-repeat="srm in vm.srms", srm="srm", view="'tile'", ng-class="'tile-view'")
1011

11-
.srm-links
12-
h2 Show us you can #[span code!]
12+
.srm-links-card
13+
.flex-wrapper
14+
h2 Show us you can #[span code!]
1315

14-
a(href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives
16+
a(href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives
1517

16-
a(href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials
18+
a(href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials
1719

1820
//- .link
1921
//- a(href="https://arena.{{DOMAIN}}/") Launch Topcoder Arena

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

Lines changed: 59 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,104 @@
11
@import '../partials/combined';
22

33
.header-dashboard {
4+
@include module-full-width;
5+
background-color: $white;
46

57
header {
68
display: flex;
7-
justify-content: space-between;
9+
flex-direction: column;
810
align-items: center;
11+
max-width: 1242px;
12+
margin: 0 auto;
13+
padding-top: 20px;
14+
@media only screen and (min-width: 600px) {
15+
flex-direction: row;
16+
justify-content: space-between;
17+
padding: 25px 25px 23px;
18+
}
19+
@media only screen and (min-width: 900px) {
20+
padding: 40px 50px 33px;
21+
}
22+
923

1024
h1 {
25+
margin-bottom: 10px;
1126
@include sofia-pro-bold;
12-
font-size: 32px;
13-
line-height: 38px;
27+
font-size: 22px;
28+
line-height: 26px;
1429
color: #3D3D3D;
1530
text-transform: uppercase;
31+
@media only screen and (min-width: 600px) {
32+
margin-bottom: 0;
33+
font-size: 32px;
34+
line-height: 38px;
35+
}
1636
}
1737

1838
.user-stats {
1939
display: flex;
2040
flex-direction: row;
21-
font-size: 14px;
41+
align-items: center;
42+
margin-bottom: 12px;
43+
@media only screen and (min-width: 600px) {
44+
margin-bottom: 0;
45+
}
46+
47+
.slash {
48+
width: 20px;
49+
height: 35px;
50+
margin-right: 15px;
51+
background-color: #D1D3D4;
52+
}
2253

2354
.money-earned, .copilot-challenges {
2455
display: flex;
2556
flex-direction: column;
2657
justify-content: space-between;
27-
height: 50px;
58+
text-align: center;
2859

2960
p {
3061
text-transform: uppercase;
3162
}
3263

3364
.number {
3465
@include sofia-pro-bold;
35-
font-size: 22px;
36-
line-height: 28px;
66+
font-size: 18px;
67+
line-height: 23px;
3768
color: #3D3D3D;
69+
text-align: right;
70+
@media only screen and (min-width: 600px) {
71+
text-align: center;
72+
font-size: 22px;
73+
line-height: 28px;
74+
}
3875
}
3976

4077
p:not(.number) {
4178
@include sofia-pro-regular;
42-
font-size: 12px;
43-
line-height: 14px;
79+
font-size: 10px;
80+
line-height: 13px;
4481
color: #A3A3AE;
82+
@media only screen and (min-width: 600px) {
83+
font-size: 12px;
84+
line-height: 14px;
85+
}
4586
}
4687
}
4788

4889
.money-earned {
49-
text-align: center;
50-
padding-left: 10px;
51-
padding-right: 10px;
90+
@media only screen and (min-width: 600px) {
91+
padding-left: 10px;
92+
padding-right: 10px;
93+
}
5294
}
5395

5496
.copilot-challenges {
55-
text-align: center;
56-
padding-left: 10px;
57-
padding-right: 10px;
97+
margin-right: 15px;
98+
@media only screen and (min-width: 600px) {
99+
padding-left: 10px;
100+
padding-right: 10px;
101+
}
58102
}
59103
}
60104
}

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

Lines changed: 31 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -50,52 +50,47 @@
5050
min-height: 500px;
5151
}
5252

53-
section.challenges {
53+
section {
5454
display: flex;
55-
flex-flow: row wrap;
5655
justify-content: center;
57-
padding: 20px 15px;
56+
padding: 20px 0;
5857
background-color: #FCFCFC;
5958

60-
@media only screen and (max-width: 400px) {
61-
display: block;
62-
width: 320px;
63-
margin-left: 0;
64-
padding: 15px;
65-
white-space: nowrap;
66-
overflow-y: hidden;
67-
overflow-x: scroll;
68-
-webkit-overflow-scrolling: touch;
69-
}
70-
71-
challenge-tile {
72-
display: flex;
73-
flex-flow: row wrap;
74-
width: 270px;
75-
76-
77-
@media only screen and (max-width: 400px) {
78-
display: inline-block;
79-
flex-flow: none;
59+
.challenges {
60+
width: 100%;
61+
@include horizontal-scroll;
62+
@media only screen and (min-width: 1125px) {
63+
display: flex;
64+
flex-flow: row wrap;
65+
width: 1125px;
8066
}
8167

82-
&.tile-view {
83-
margin-left: 15px;
84-
margin-bottom: 15px;
85-
86-
&:nth-child(4n + 1) {
87-
margin-left: -15px;
68+
challenge-tile {
69+
display: inline-block;
70+
@media only screen and (min-width: 1125px) {
71+
display: block;
8872
}
8973

90-
@media only screen and (max-width: 400px) {
91-
margin-bottom: 0;
92-
margin-left: 0;
93-
margin-right: 10px;
74+
&.tile-view {
75+
margin-left: 15px;
76+
margin-bottom: 15px;
77+
@media only screen and (min-width: 1125px) {
78+
&:nth-child(4n + 1) {
79+
margin-left: 0;
80+
}
81+
}
82+
83+
&:last-child {
84+
margin-right: 15px;
85+
@media only screen and (min-width: 1125px) {
86+
margin-right: 0;
87+
}
88+
}
9489
}
95-
}
9690

97-
&.list-view {
98-
width: 100%;
91+
&.list-view {
92+
width: 100%;
93+
}
9994
}
10095
}
10196
}

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

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
11
@import '../partials/combined';
22

3-
.header-dashboard {
4-
@include module-full-width;
5-
background-color: $white;
6-
7-
header {
8-
max-width: 1242px;
9-
margin: 0 auto;
10-
padding: 20px 50px 0;
11-
@media only screen and (min-width: 900px) {
12-
padding: 45px 50px 33px;
13-
}
14-
}
15-
}
16-
173
.my-dashboard-container {
184
display: flex;
195
flex-direction: column;

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

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,47 +17,74 @@
1717
}
1818
}
1919

20-
section.srm-tiles {
20+
section {
2121
display: flex;
22-
flex-flow: row wrap;
23-
/* The negative margin here removes the leftmost tiles'
24-
margin, since we can't use .tile:first-child here */
25-
margin-left: -20px;
22+
justify-content: center;
23+
padding: 20px 0;
24+
background-color: #FCFCFC;
2625

27-
srm-tile.tile-view {
28-
width: 23%;
29-
margin-left: 20px;
30-
margin-bottom: 20px;
31-
}
32-
33-
.srm-links {
34-
display: flex;
35-
flex-direction: column;
36-
align-items: center;
37-
width: 270px;
38-
height: 319px;
39-
padding: 0 21px;
40-
border: 1px solid #DCDCDC;
41-
border-radius: 4px;
26+
.srm-tiles {
27+
width: 100%;
28+
@include horizontal-scroll;
29+
@media only screen and (min-width: 1125px) {
30+
display: flex;
31+
flex-flow: row wrap;
32+
width: 1125px;
33+
}
4234

43-
h2 {
44-
margin-top: 70px;
45-
margin-bottom: 48px;
46-
@include sofia-pro-light;
47-
font-size: 24px;
48-
text-align: center;
49-
color: #3D3D3D;
50-
text-transform: uppercase;
35+
srm-tile{
36+
display: inline-block;
37+
margin-left: 15px;
38+
margin-bottom: 15px;
39+
@media only screen and (min-width: 1125px) {
40+
display: block;
41+
&:first-child {
42+
margin-left: 0;
43+
}
44+
}
45+
}
5146

52-
span {
53-
@include sofia-pro-bold;
47+
.srm-links-card {
48+
display: inline-block;
49+
width: 270px;
50+
height: 319px;
51+
margin-right: 15px;
52+
margin-bottom: 15px;
53+
padding: 0 21px;
54+
border: 1px solid #DCDCDC;
55+
border-radius: 4px;
56+
@media only screen and (min-width: 1125px) {
57+
margin-right: 0;
58+
display: block;
59+
margin-left: 15px;
5460
}
5561
}
5662

57-
a {
58-
margin-bottom: 21px;
59-
@include button-m-wide;
60-
text-decoration: none;
63+
.flex-wrapper {
64+
display: flex;
65+
flex-direction: column;
66+
align-items: center;
67+
68+
h2 {
69+
margin-top: 70px;
70+
margin-bottom: 48px;
71+
@include sofia-pro-light;
72+
font-size: 24px;
73+
text-align: center;
74+
color: #3D3D3D;
75+
text-transform: uppercase;
76+
white-space: normal;
77+
78+
span {
79+
@include sofia-pro-bold;
80+
}
81+
}
82+
83+
a {
84+
margin-bottom: 21px;
85+
@include button-m-wide;
86+
text-decoration: none;
87+
}
6188
}
6289
}
6390
}

‎assets/css/partials/_mixins.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,13 @@
182182
width: 100%;
183183
}
184184

185+
@mixin horizontal-scroll {
186+
white-space: nowrap;
187+
overflow-y: hidden;
188+
overflow-x: scroll;
189+
-webkit-overflow-scrolling: touch;
190+
}
191+
185192
// UI REFRESH STYLES
186193
@mixin ui-submit-button {
187194
width: 300px;

0 commit comments

Comments
 (0)
This repository has been archived.