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

Commit 9fb60ab

Browse files
callmekatootiecallmekatootie
committed
Update sponsor component to display new sponsors for TCO19
1 parent 874585f commit 9fb60ab

File tree

10 files changed

+88
-68
lines changed

10 files changed

+88
-68
lines changed

‎components/Sponsors.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import PropTypes from 'prop-types'
22

33
const sponsors = (props) => {
4-
const { showFlatDesign, hideMainSponsor, showDivider, mainSponsor, otherSponsors, smallerSponsor } = props
4+
const { showFlatDesign, showDivider, otherSponsors, smallerSponsor } = props
5+
const sponsorGroup1 = otherSponsors.slice(0, 7)
6+
const sponsorGroup2 = otherSponsors.slice(8, otherSponsors.length)
57
let containerClass = (showFlatDesign) ? 'flatContainer' : (smallerSponsor) ? 'small' : ''
68
return (<div className={`container ${containerClass}`}>
79
{showDivider && <img className='divider' src='/static/img/divider.png' alt='divider' />}
@@ -10,10 +12,14 @@ const sponsors = (props) => {
1012
SPONSORED BY
1113
</div>
1214
}
13-
{ !hideMainSponsor && <img className='sponsor' src={mainSponsor} />}
1415
<div className='otherSponsorsContainer'>
1516
{
16-
otherSponsors.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
17+
sponsorGroup1.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
18+
}
19+
</div>
20+
<div className='otherSponsorsContainer'>
21+
{
22+
sponsorGroup2.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
1723
}
1824
</div>
1925
<style jsx>
@@ -27,7 +33,7 @@ const sponsors = (props) => {
2733
}
2834
2935
.container.small {
30-
margin-bottom: 0px;
36+
margin-bottom: 10px;
3137
}
3238
3339
.flatContainer {
@@ -86,10 +92,13 @@ const sponsors = (props) => {
8692
.otherSponsor {
8793
margin: 0px 30px;
8894
height: 24px;
95+
width: auto;
96+
opacity: 0.6;
8997
}
9098
9199
.small .otherSponsor {
92100
margin: 0px 20px;
101+
width: auto;
93102
}
94103
95104
.flatContainer .otherSponsorsContainer .otherSponsor {
@@ -137,16 +146,14 @@ sponsors.propTypes = {
137146
showDivider: PropTypes.bool,
138147
mainSponsor: PropTypes.string,
139148
otherSponsors: PropTypes.arrayOf(PropTypes.string),
140-
smallerSponsor: PropTypes.bool,
141-
hideMainSponsor: PropTypes.bool
149+
smallerSponsor: PropTypes.bool
142150
}
143151

144152
sponsors.defaultProps = {
145153
showDivider: false,
146154
showFlatDesign: false,
147155
mainSponsor: undefined,
148-
smallerSponsor: false,
149-
hideMainSponsor: false
156+
smallerSponsor: false
150157
}
151158

152159
export default sponsors

‎pages/finalists.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const Finalists = (props) => {
138138
</div>
139139
</div>
140140
</main>
141-
<Sponsors {...props} hideMainSponsor showFlatDesign />
141+
<Sponsors {...props} smallerSponsor />
142142
<Footer {...props} />
143143
<style jsx>
144144
{`
@@ -160,7 +160,7 @@ const Finalists = (props) => {
160160
align-items: center;
161161
display: flex;
162162
flex-direction: column;
163-
min-height: 800px;
163+
min-height: 760px;
164164
position: relative;
165165
}
166166
@@ -172,7 +172,7 @@ const Finalists = (props) => {
172172
flex-direction: column;
173173
justify-content: center;
174174
align-items: center;
175-
margin-top: 40px;
175+
margin-top: 20px;
176176
text-transform: uppercase;
177177
position: relative;
178178
z-index: 4;

‎pages/full-screen-image.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,21 @@ class FullScreenImage extends React.Component {
9898
display: flex;
9999
flex-direction: column;
100100
flex-shrink: 1;
101-
background-image: linear-gradient(270deg,rgba(0, 43, 119, 0.5) 0%,rgba(0, 18, 101, 0.5) 100%,rgba(0, 13, 61, 0.5) 0%);
101+
background-image: linear-gradient(rgba(0,78,119,0.1) 0%,rgba(0,18,101,0.1) 51.72%,rgba(0,40,61,0.2) 100%);
102102
margin-bottom: 10px;
103+
position: relative;
104+
}
105+
106+
.main::before {
107+
content: "";
108+
width: 363.1px;
109+
background: rgba(112, 112, 112, 0.12);
110+
height: 2px;
111+
position: absolute;
112+
bottom: 0;
113+
left: 0;
114+
right: 0;
115+
margin: auto;
103116
}
104117
105118
.content-image {

‎pages/get-ready.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import fetch from 'isomorphic-unfetch'
44
import Header from '../components/Header'
55
import Footer from '../components/Footer'
66
import PageHead from '../components/PageHead'
7-
import Sponsors from '../components/Sponsors'
87
import FinalistTable from '../components/FinalistTable'
98
import { checkForMainSponsor } from '../common/helper'
109

@@ -188,7 +187,7 @@ const GetReady = (props) => {
188187
</div>
189188
{finalistsLayout(props)}
190189
</main>
191-
<Sponsors {...props} hideMainSponsor smallerSponsor showFlatDesign />
190+
{/* <Sponsors {...props} smallerSponsor /> */}
192191
<Footer {...props} />
193192
</div>
194193
<FinalistTable

‎pages/live-stream.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,13 @@ class LiveStream extends React.Component {
9494
allowFullScreen
9595
/>
9696
</main>
97-
<Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
97+
<Sponsors {...this.props} smallerSponsor />
9898
<Footer {...this.props} />
9999
</div>
100100
{ this.props.showScoreboard && <FinalistTable
101101
{...this.props}
102102
finalists={this.state.leaderboard}
103+
isMini
103104
// smallerDesign
104105
/>}
105106
<style jsx global>{`

‎pages/prize-overview.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -155,15 +155,13 @@ class PrizeOverview extends React.Component {
155155
<PageHead />
156156
<Header {...this.props} smallHeader />
157157
<main className='main'>
158-
<img className='hexa' src='/static/img/largeHexa.png' />
159158
<div className='message'>
160-
<img src='/static/img/hexagon.png' alt='hex' />
161159
<div className='subtitle'>TCO Champions</div>
162160
<div className='title'>Prize overview</div>
163161
</div>
164162
{prizesLayout(this.props.prizes)}
165163
</main>
166-
<Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
164+
<Sponsors {...this.props} smallerSponsor />
167165
<Footer {...this.props} />
168166
</div>
169167
{ this.props.showScoreboard && <FinalistTable
@@ -181,7 +179,7 @@ class PrizeOverview extends React.Component {
181179
{`
182180
.container {
183181
display: flex;
184-
background: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E%22%3C/span%3E/static/img/background.png%3Cspan%20class=%22x%20x-first%20x-last%22%3E%22%3C/span%3E) no-repeat center center fixed;
182+
background: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E'%3C/span%3E/static/img/background.png%3Cspan%20class=%22x%20x-first%20x-last%22%3E'%3C/span%3E) no-repeat center center fixed;
185183
-webkit-background-size: cover;
186184
-moz-background-size: cover;
187185
-o-background-size: cover;
@@ -203,13 +201,21 @@ class PrizeOverview extends React.Component {
203201
display: flex;
204202
flex-direction: column;
205203
flex-shrink: 1;
206-
background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
204+
background-image: linear-gradient(rgba(0,78,119,0.1) 0%,rgba(0,18,101,0.1) 51.72%,rgba(0,40,61,0.2) 100%);
207205
margin-bottom: 10px;
206+
position: relative;
208207
}
209208
210-
.hexa {
209+
.main::before {
210+
content: "";
211+
width: 363.1px;
212+
background: rgba(112, 112, 112, 0.12);
213+
height: 2px;
211214
position: absolute;
212-
width: 550px;
215+
bottom: 0;
216+
left: 0;
217+
right: 0;
218+
margin: auto;
213219
}
214220
215221
.message {

‎pages/problem-statement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ class ProblemStatement extends React.Component {
103103
<div className='description'>{this.props.problemDescription}</div>
104104
</main>
105105
<div className='problemStatementSponsor'>
106-
<Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
106+
<Sponsors {...this.props} smallerSponsor />
107107
</div>
108108
<Footer {...this.props} />
109109
</div>

‎pages/round-ended.js

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,19 +84,18 @@ class RoundEnded extends React.Component {
8484
<PageHead />
8585
<Header {...this.props} smallHeader />
8686
<main className='main'>
87-
<img className='hexa' src='/static/img/largeHexa.png' />
8887
<div className='message'>
89-
<img src='/static/img/hexagon.png' alt='hex' />
9088
<div className='subtitle'>{this.props.track + ' ' + this.props.round}</div>
9189
<div className='title'>ENDED</div>
9290
</div>
9391
</main>
94-
<Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
92+
<Sponsors {...this.props} smallerSponsor />
9593
<Footer {...this.props} />
9694
</div>
9795
{ this.props.showScoreboard && <FinalistTable
9896
{...this.props}
9997
finalists={this.state.leaderboard}
98+
isMini
10099
/>}
101100
<style jsx global>{`
102101
#__next {
@@ -108,7 +107,7 @@ class RoundEnded extends React.Component {
108107
{`
109108
.container {
110109
display: flex;
111-
background: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E%22%3C/span%3E/static/img/background.png%3Cspan%20class=%22x%20x-first%20x-last%22%3E%22%3C/span%3E) no-repeat center center fixed;
110+
background: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E'%3C/span%3E/static/img/background.png%3Cspan%20class=%22x%20x-first%20x-last%22%3E'%3C/span%3E) no-repeat center center fixed;
112111
-webkit-background-size: cover;
113112
-moz-background-size: cover;
114113
-o-background-size: cover;
@@ -130,8 +129,21 @@ class RoundEnded extends React.Component {
130129
display: flex;
131130
flex-direction: column;
132131
flex-shrink: 1;
133-
background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
132+
background-image: linear-gradient(rgba(0,78,119,0.1) 0%,rgba(0,18,101,0.1) 51.72%,rgba(0,40,61,0.2) 100%);
134133
margin-bottom: 10px;
134+
position: relative;
135+
}
136+
137+
.main::before {
138+
content: "";
139+
width: 363.1px;
140+
background: rgba(112, 112, 112, 0.12);
141+
height: 2px;
142+
position: absolute;
143+
bottom: 0;
144+
left: 0;
145+
right: 0;
146+
margin: auto;
135147
}
136148
137149
.hexa {

‎pages/sponsor.js

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,7 @@ class SponsorPage extends React.Component {
8585
<PageHead />
8686
<Header {...this.props} smallHeader />
8787
<main className='main'>
88-
<img className='hexa' src='/static/img/largeHexa.png' />
8988
<div className='message'>
90-
<img src='/static/img/hexagon.png' alt='hex' />
91-
{/* <div className='subtitle'>players</div> */}
9289
<div className='title'>SPONSORED BY</div>
9390
</div>
9491
<img className='sponsorImg' src={this.props.mainSponsor} />
@@ -113,7 +110,7 @@ class SponsorPage extends React.Component {
113110
{`
114111
.container {
115112
display: flex;
116-
background: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E%22%3C/span%3E/static/img/background.png%3Cspan%20class=%22x%20x-first%20x-last%22%3E%22%3C/span%3E) no-repeat center center fixed;
113+
background: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E'%3C/span%3E/static/img/background.png%3Cspan%20class=%22x%20x-first%20x-last%22%3E'%3C/span%3E) no-repeat center center fixed;
117114
-webkit-background-size: cover;
118115
-moz-background-size: cover;
119116
-o-background-size: cover;
@@ -135,8 +132,21 @@ class SponsorPage extends React.Component {
135132
display: flex;
136133
flex-direction: column;
137134
flex-shrink: 1;
138-
background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
135+
background-image: linear-gradient(rgba(0,78,119,0.1) 0%,rgba(0,18,101,0.1) 51.72%,rgba(0,40,61,0.2) 100%);
139136
margin-bottom: 10px;
137+
position: relative;
138+
}
139+
140+
.main::before {
141+
content: "";
142+
width: 363.1px;
143+
background: rgba(112, 112, 112, 0.12);
144+
height: 2px;
145+
position: absolute;
146+
bottom: 0;
147+
left: 0;
148+
right: 0;
149+
margin: auto;
140150
}
141151
142152
.hexa {

0 commit comments

Comments
 (0)