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

Update sponsor component to display new sponsors for TCO19 #66

Merged
merged 1 commit into from
Nov 13, 2019
Merged

Update sponsor component to display new sponsors for TCO19 #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions components/Sponsors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import PropTypes from 'prop-types'

const sponsors = (props) => {
const { showFlatDesign, hideMainSponsor, showDivider, mainSponsor, otherSponsors, smallerSponsor } = props
const { showFlatDesign, showDivider, otherSponsors, smallerSponsor } = props
const sponsorGroup1 = otherSponsors.slice(0, 7)
const sponsorGroup2 = otherSponsors.slice(8, otherSponsors.length)
let containerClass = (showFlatDesign) ? 'flatContainer' : (smallerSponsor) ? 'small' : ''
return (<div className={`container ${containerClass}`}>
{showDivider && <img className='divider' src='/static/img/divider.png' alt='divider' />}
Expand All @@ -10,10 +12,14 @@ const sponsors = (props) => {
SPONSORED BY
</div>
}
{ !hideMainSponsor && <img className='sponsor' src={mainSponsor} />}
<div className='otherSponsorsContainer'>
{
otherSponsors.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
sponsorGroup1.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
}
</div>
<div className='otherSponsorsContainer'>
{
sponsorGroup2.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
}
</div>
<style jsx>
Expand All @@ -27,7 +33,7 @@ const sponsors = (props) => {
}

.container.small {
margin-bottom: 0px;
margin-bottom: 10px;
}

.flatContainer {
Expand Down Expand Up @@ -86,10 +92,13 @@ const sponsors = (props) => {
.otherSponsor {
margin: 0px 30px;
height: 24px;
width: auto;
opacity: 0.6;
}

.small .otherSponsor {
margin: 0px 20px;
width: auto;
}

.flatContainer .otherSponsorsContainer .otherSponsor {
Expand Down Expand Up @@ -137,16 +146,14 @@ sponsors.propTypes = {
showDivider: PropTypes.bool,
mainSponsor: PropTypes.string,
otherSponsors: PropTypes.arrayOf(PropTypes.string),
smallerSponsor: PropTypes.bool,
hideMainSponsor: PropTypes.bool
smallerSponsor: PropTypes.bool
}

sponsors.defaultProps = {
showDivider: false,
showFlatDesign: false,
mainSponsor: undefined,
smallerSponsor: false,
hideMainSponsor: false
smallerSponsor: false
}

export default sponsors
6 changes: 3 additions & 3 deletions pages/finalists.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const Finalists = (props) => {
</div>
</div>
</main>
<Sponsors {...props} hideMainSponsor showFlatDesign />
<Sponsors {...props} smallerSponsor />
<Footer {...props} />
<style jsx>
{`
Expand All @@ -160,7 +160,7 @@ const Finalists = (props) => {
align-items: center;
display: flex;
flex-direction: column;
min-height: 800px;
min-height: 760px;
position: relative;
}

Expand All @@ -172,7 +172,7 @@ const Finalists = (props) => {
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;
margin-top: 20px;
text-transform: uppercase;
position: relative;
z-index: 4;
Expand Down
15 changes: 14 additions & 1 deletion pages/full-screen-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,21 @@ class FullScreenImage extends React.Component {
display: flex;
flex-direction: column;
flex-shrink: 1;
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%);
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%);
margin-bottom: 10px;
position: relative;
}

.main::before {
content: "";
width: 363.1px;
background: rgba(112, 112, 112, 0.12);
height: 2px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

.content-image {
Expand Down
3 changes: 1 addition & 2 deletions pages/get-ready.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import fetch from 'isomorphic-unfetch'
import Header from '../components/Header'
import Footer from '../components/Footer'
import PageHead from '../components/PageHead'
import Sponsors from '../components/Sponsors'
import FinalistTable from '../components/FinalistTable'
import { checkForMainSponsor } from '../common/helper'

Expand Down Expand Up @@ -188,7 +187,7 @@ const GetReady = (props) => {
</div>
{finalistsLayout(props)}
</main>
<Sponsors {...props} hideMainSponsor smallerSponsor showFlatDesign />
{/* <Sponsors {...props} smallerSponsor /> */}
<Footer {...props} />
</div>
<FinalistTable
Expand Down
3 changes: 2 additions & 1 deletion pages/live-stream.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,12 +94,13 @@ class LiveStream extends React.Component {
allowFullScreen
/>
</main>
<Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
<Sponsors {...this.props} smallerSponsor />
<Footer {...this.props} />
</div>
{ this.props.showScoreboard && <FinalistTable
{...this.props}
finalists={this.state.leaderboard}
isMini
// smallerDesign
/>}
<style jsx global>{`
Expand Down
20 changes: 13 additions & 7 deletions pages/prize-overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,15 +155,13 @@ class PrizeOverview extends React.Component {
<PageHead />
<Header {...this.props} smallHeader />
<main className='main'>
<img className='hexa' src='/static/img/largeHexa.png' />
<div className='message'>
<img src='/static/img/hexagon.png' alt='hex' />
<div className='subtitle'>TCO Champions</div>
<div className='title'>Prize overview</div>
</div>
{prizesLayout(this.props.prizes)}
</main>
<Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
<Sponsors {...this.props} smallerSponsor />
<Footer {...this.props} />
</div>
{ this.props.showScoreboard && <FinalistTable
Expand All @@ -181,7 +179,7 @@ class PrizeOverview extends React.Component {
{`
.container {
display: flex;
background: url(https://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;
background: url(https://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;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Expand All @@ -203,13 +201,21 @@ class PrizeOverview extends React.Component {
display: flex;
flex-direction: column;
flex-shrink: 1;
background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
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%);
margin-bottom: 10px;
position: relative;
}

.hexa {
.main::before {
content: "";
width: 363.1px;
background: rgba(112, 112, 112, 0.12);
height: 2px;
position: absolute;
width: 550px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

.message {
Expand Down
2 changes: 1 addition & 1 deletion pages/problem-statement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ class ProblemStatement extends React.Component {
<div className='description'>{this.props.problemDescription}</div>
</main>
<div className='problemStatementSponsor'>
<Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
<Sponsors {...this.props} smallerSponsor />
</div>
<Footer {...this.props} />
</div>
Expand Down
22 changes: 17 additions & 5 deletions pages/round-ended.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,18 @@ class RoundEnded extends React.Component {
<PageHead />
<Header {...this.props} smallHeader />
<main className='main'>
<img className='hexa' src='/static/img/largeHexa.png' />
<div className='message'>
<img src='/static/img/hexagon.png' alt='hex' />
<div className='subtitle'>{this.props.track + ' ' + this.props.round}</div>
<div className='title'>ENDED</div>
</div>
</main>
<Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
<Sponsors {...this.props} smallerSponsor />
<Footer {...this.props} />
</div>
{ this.props.showScoreboard && <FinalistTable
{...this.props}
finalists={this.state.leaderboard}
isMini
/>}
<style jsx global>{`
#__next {
Expand All @@ -108,7 +107,7 @@ class RoundEnded extends React.Component {
{`
.container {
display: flex;
background: url(https://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;
background: url(https://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;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Expand All @@ -130,8 +129,21 @@ class RoundEnded extends React.Component {
display: flex;
flex-direction: column;
flex-shrink: 1;
background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
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%);
margin-bottom: 10px;
position: relative;
}

.main::before {
content: "";
width: 363.1px;
background: rgba(112, 112, 112, 0.12);
height: 2px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

.hexa {
Expand Down
20 changes: 15 additions & 5 deletions pages/sponsor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,7 @@ class SponsorPage extends React.Component {
<PageHead />
<Header {...this.props} smallHeader />
<main className='main'>
<img className='hexa' src='/static/img/largeHexa.png' />
<div className='message'>
<img src='/static/img/hexagon.png' alt='hex' />
{/* <div className='subtitle'>players</div> */}
<div className='title'>SPONSORED BY</div>
</div>
<img className='sponsorImg' src={this.props.mainSponsor} />
Expand All @@ -113,7 +110,7 @@ class SponsorPage extends React.Component {
{`
.container {
display: flex;
background: url(https://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;
background: url(https://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;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Expand All @@ -135,8 +132,21 @@ class SponsorPage extends React.Component {
display: flex;
flex-direction: column;
flex-shrink: 1;
background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
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%);
margin-bottom: 10px;
position: relative;
}

.main::before {
content: "";
width: 363.1px;
background: rgba(112, 112, 112, 0.12);
height: 2px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

.hexa {
Expand Down
Loading