Skip to content

Commit 1fa70e5

Browse files
ww3637ww3637
authored
Merge pull request #938 from codeRIT/centering
MLH Code of Conduct button visible on mobile, content vertical centering on desktop
2 parents d145260 + 3532aa7 commit 1fa70e5

4 files changed

Lines changed: 68 additions & 61 deletions

File tree

‎src/covid-popover.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class CovidPopover extends React.Component {
2727
placement="top"
2828
overlay={
2929
<Popover id="popover-basic" >
30-
<PopoverTitle as="h3">{this.props.title}</PopoverTitle>
30+
<PopoverTitle as="h3">COVID-19 Notice</PopoverTitle>
3131
<PopoverContent>
3232
{this.props.content}
3333
</PopoverContent>

‎src/index.scss‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $mobile-width: 720px;
2222
@media(max-width: #{$mobile-width}) { @content; }
2323
}
2424

25-
//override sass min() & max(), use css
25+
//override sass min() & max() fn's, use css's
2626
@function min($numbers...) {
2727
@return m#{i}n(#{$numbers});
2828
}
@@ -58,11 +58,6 @@ html, body, #root, #app, .full-height {
5858
flex-shrink: 0;
5959
}
6060

61-
.full-height { /* not really a good way to do it, will probably change to flex column layout */
62-
height: calc(100% - 445px);
63-
display: flex;
64-
flex-direction: column;
65-
}
6661
.desktop-banner {
6762
width: 100%;
6863

@@ -74,9 +69,10 @@ html, body, #root, #app, .full-height {
7469

7570
background-color: $blue;
7671
color: white;
77-
}
78-
.desktop-banner span {
79-
font-weight: 400;
72+
73+
span {
74+
font-weight: 400;
75+
}
8076
}
8177

8278
#mlh-badge {
@@ -99,14 +95,13 @@ html, body, #root, #app, .full-height {
9995
}
10096

10197
.navigation {
102-
display: inline-block;
103-
10498
width: 100%;
10599

106100
font-size: 15px;
107101
font-weight: 500;
108102

109103
color: $blue;
104+
background-color: white;
110105

111106
ul {
112107
list-style-type: none;
@@ -136,6 +131,8 @@ html, body, #root, #app, .full-height {
136131
}
137132

138133
@include tablet {
134+
display: inline-block;
135+
139136
font-size: 12px;
140137
font-weight: 400;
141138

@@ -168,15 +165,23 @@ html, body, #root, #app, .full-height {
168165
margin-bottom: max(1px, calc(10vh - 40px), calc(30vh - 190px));
169166
}
170167
}
168+
171169
.section {
170+
height: 100%;
171+
display: flex;
172+
flex-direction: column;
173+
}
174+
175+
.content {
172176
width: 100%;
173-
max-width: 1100px;
177+
178+
max-width: $desktop-width;
174179
text-align: center;
175180
margin: auto;
176181

177-
178182
@include tablet {
179183
flex-direction: column;
184+
margin: 0px;
180185
}
181186
}
182187

@@ -198,13 +203,17 @@ html, body, #root, #app, .full-height {
198203
}
199204
}
200205

206+
.hero-img.mobile-hide { //temporary, push up the desktop hero image a bit
207+
margin-bottom: 75px;
208+
}
209+
201210
/*
202211
note: development on a mac may not have all font-weights,
203212
lines of text may be wider than they appear
204213
*/
205214
#hackathon-name {
206-
height: 65px;
207-
font-size: 60px;
215+
height: 75px;
216+
font-size: 70px;
208217
font-weight: 700;
209218
color: $blue;
210219

@@ -214,8 +223,8 @@ lines of text may be wider than they appear
214223
}
215224
}
216225
#hackathon-description {
217-
height: 37px;
218-
font-size: 28.0px;
226+
height: 43px;
227+
font-size: 34px;
219228
font-weight: 700;
220229
color: $blue;
221230

@@ -225,8 +234,8 @@ lines of text may be wider than they appear
225234
}
226235
}
227236
#hackathon-info {
228-
height: 20px;
229-
font-size: 14px;
237+
height: 25px;
238+
font-size: 17px;
230239
font-weight: 500;
231240
color: $blue;
232241

@@ -237,14 +246,14 @@ lines of text may be wider than they appear
237246
}
238247

239248
.mailchimp-container {
240-
height: 40px;
241-
width: 375px;
249+
height: 50px;
250+
width: 450px;
242251
margin: 20px auto;
243-
252+
244253
border-style: solid;
245254
border-width: 1px;
246255
border-color: $blue;
247-
border-radius: 20px;
256+
border-radius: 25px;
248257

249258
@include mobile {
250259
width: 80vw;
@@ -266,7 +275,7 @@ lines of text may be wider than they appear
266275

267276
outline: none;
268277
font-family: inherit;
269-
font-size: 14px;
278+
font-size: 17px;
270279
font-weight: 500;
271280

272281
&::placeholder { /* this refers to the input placeholder text (enter your email...)*/
@@ -283,28 +292,28 @@ lines of text may be wider than they appear
283292
}
284293
}
285294
.mailchimp-button {
286-
height: 30px;
287-
width: 30px;
295+
height: 40px;
296+
width: 40px;
288297

289298
margin-right: 5px;
290299

291300
border-style: solid;
292301
border-width: 1px;
293302
border-color: $blue;
294-
border-radius: 15px;
303+
border-radius: 20px;
295304

296305
background-color: white;
297306
background-image: url(./input-arrow.svg);
298307
background-repeat: no-repeat;
299-
background-position: 3.75px;
300-
background-size: 18px;
308+
background-position: 4.5px;
309+
background-size: 25px;
301310

302311
outline: none;
303312
transition: 0.1s;
304313

305314
@include desktop {
306315
&:hover {
307-
background-position: 5.25px;
316+
background-position: 6.5px;
308317
}
309318
}
310319

@@ -337,8 +346,13 @@ lines of text may be wider than they appear
337346
}
338347

339348
#contact {
340-
341349
p {
342350
margin: 0;
351+
font-weight: 500;
352+
font-size: 20px;
353+
height: 25px;
354+
a{
355+
font-size: 16px;
356+
}
343357
}
344358
}

‎src/nav-bar.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,35 @@ import React from 'react';
22

33
class NavBar extends React.Component {
44
componentDidMount(){
5-
/*
6-
var fixedContainer = document.getElementById("fixed-container");
5+
var fixedContainer = document.getElementById("navigation-container");
76
var children = Array.from(fixedContainer.children);
87

98
children.forEach(child => {
109
var clone = child.cloneNode(true);
1110
clone.removeAttribute("id");
1211
clone.style.visibility = "hidden";
13-
12+
clone.classList.add("desktop-hide");
13+
1414
child.style.position = "fixed";
1515

1616
fixedContainer.append(child);
1717
fixedContainer.append(clone);
1818
});
19-
*/
2019
}
2120
render(){
2221
return(
23-
<div id="fixed-container">
24-
<div className="desktop-banner mobile-hide" id="desktop-banner">
25-
<span>{this.props.title}</span>{this.props.content}
26-
</div>
27-
22+
<div id="navigation-container">
2823
<div className="navigation" id="navigation">
24+
<div className="desktop-banner mobile-hide" id="desktop-banner">
25+
<span>COVID-19 Notice: </span>{this.props.content}
26+
</div>
27+
2928
<a href="https://mlh.io/seasons/na-2021/events?utm_source=na-hackathon&amp;utm_medium=TrustBadge&amp;utm_campaign=2020-season&amp;utm_content=gray">
3029
<img id="mlh-badge" alt="Major League Hacking 2021 Hackathon Season" src="https://s3.amazonaws.com/logged-assets/trust-badge/2021/mlh-trust-badge-2021-gray.svg"></img>
3130
</a>
3231

3332
<ul className="flex-container">
34-
<li className="mobile-hide"><a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH CODE OF CONDUCT</a></li>
33+
<li><a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH CODE OF CONDUCT</a></li>
3534
<li><a href="https://brickhack.io/gallery/">GALLERY</a></li>
3635
</ul>
3736
</div>

‎src/preregister.js‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,21 @@ import NavBar from "./nav-bar.js";
33
import MailchimpInput from "./mailchimp-input.js";
44
import CovidPopover from "./covid-popover.js";
55

6-
var HeroImage = require('./hero.svg');
6+
var heroImage = require('./hero.svg');
7+
var heroImageAlt = "A decorative hero graphic."
78

8-
var desktopNotice = "COVID-19 Notice: "
9-
var mobileNotice = "COVID-19 Notice"
109
var noticeContent = "We're planning BrickHack 7 to be the best and safest event possible. We will publish relevant information upon receiving updates from RIT and NY State."
1110

1211
class PreRegister extends React.Component {
1312
render() {
1413
return (
1514
<div id="app">
16-
<div className="full-height">
17-
<NavBar
18-
title={desktopNotice}
19-
content={noticeContent}
20-
/>
21-
<div className="section flex-container">
15+
<NavBar
16+
content={noticeContent}
17+
/>
18+
19+
<div className="section">
20+
<div className="content flex-container">
2221
<div className="left-half">
2322
<div id="hackathon-name">
2423
BRICKHACK 7
@@ -29,29 +28,24 @@ class PreRegister extends React.Component {
2928
<div id="hackathon-info">
3029
Feb 20-21 | ROCHESTER INSTITUTE OF TECHNOLOGY
3130
</div>
32-
33-
<img className="hero-img desktop-hide" src={HeroImage} alt="A decorative background hero graphic."/>
34-
31+
<img className="hero-img desktop-hide" src={heroImage} alt={heroImageAlt}/>
3532
<MailchimpInput/>
3633

3734
<div id="contact" className="mobile-hide">
38-
<p>interested in sponsoring?</p>
39-
<p>email <a href="mailto:sponsorship@coderit.org">sponsorship@coderit.org</a></p>
35+
<p>Interested in Sponsoring?</p>
36+
<p><a href="mailto:sponsorship@coderit.org">sponsorship@coderit.org</a></p>
4037
</div>
4138

42-
<CovidPopover
43-
title={mobileNotice}
39+
<CovidPopover
4440
content={noticeContent}
4541
/>
46-
4742
</div>
4843

4944
<div className="right-half mobile-hide">
50-
<img className="hero-img" src={HeroImage} alt="A decorative background hero graphic."/>
45+
<img className="hero-img mobile-hide" src={heroImage} alt={heroImageAlt}/>
5146
</div>
5247
</div>
5348
</div>
54-
5549
</div>
5650
);
5751
}

0 commit comments

Comments
 (0)