rushilwiz/tj-sga-website-react
1
0
Fork 0
mirror of https://github.com/tjsga/tj-sga-website-react.git synced 2025-04-17 18:30:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updated font, made hero stretch full width

Browse Source
This commit is contained in:
Michael Fatemi 2020-12-11 16:27:22 -05:00
parent a4047daabb
commit 139c8a1102
24 changed files with 230 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
public/index.html
View File

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/images/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/images/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Official website for the Thomas Jefferson High School Student Government Association"
/> />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@ -24,17 +24,26 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap"
<!-- Title --> rel="stylesheet"
<title>React App</title> />
</head> <!-- CSS only -->
<body> <link
<noscript>You need to enable JavaScript to run this app.</noscript> href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
<div id="root"></div> rel="stylesheet"
<!-- integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<!-- Title -->
<title>TJHSST Student Government Association</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@ -44,5 +53,5 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html> </html>

78
src/App.css
View File

@ -1,73 +1,49 @@
.header {
text-align: center;
font-weight: bold;
margin: 1rem 0rem;
font-size: 1.5rem;
}
.space-2 { .space-2 {
margin: 1rem; margin: 1rem;
padding: 1rem; padding: 1rem;
} }
.space-4 { .space-4 {
margin: 2rem; margin: 2rem;
padding: 2rem; padding: 2rem;
} }
.button { .button {
border-color: #474849; border-color: #474849;
border-width: 2px; border-width: 2px;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: inherit; background-color: inherit;
box-shadow: none; box-shadow: none;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-sm {
font-size: 0.75rem;
}
.row {
display: flex;
flex-direction: row;
} }
.col { .col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.flex-1 { .flex-1 {
flex: 1; flex: 1;
} }
.flex-2 { .flex-2 {
flex: 2; flex: 2;
} }
.blue-button { .blue-button {
text-transform: uppercase; text-transform: uppercase;
padding: 13px 23px; padding: 13px 23px;
border-width: 2px; border-width: 2px;
border-radius: 0.25rem; border-radius: 0.25rem;
border-style: solid; border-style: solid;
border-color: #38A3BD; border-color: #38A3BD;
background-color: white; background-color: white;
color: #38A3BD; color: #38A3BD;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.clickable-link { .clickable-link {
text-decoration: underline; text-decoration: underline;
color: #38A3BD; color: #38A3BD;
} }

3
src/App.tsx
View File

@ -14,10 +14,11 @@ const notfound = React.lazy(() => import('./pages/404'));
const officers = React.lazy(() => import('./pages/officers')); const officers = React.lazy(() => import('./pages/officers'));
const committee = React.lazy(() => import('./pages/committee')); const committee = React.lazy(() => import('./pages/committee'));
const classcouncil = React.lazy(() => import('./pages/classcouncil')); const classcouncil = React.lazy(() => import('./pages/classcouncil'));
const loading = () => <h1>Loading...</h1>;
export default function App() { export default function App() {
return ( return (
<Suspense fallback="Loading..."> <Suspense fallback={loading}>
<BrowserRouter> <BrowserRouter>
<Layout> <Layout>
<Switch> <Switch>

5
src/components/ArticleRow.tsx
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import imageUrl from '../imageUrl'; import imageUrl from '../imageUrl';
import BlockContent from '@sanity/block-content-to-react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import '../css/article.css'; import '../css/article.css';
@ -30,13 +29,13 @@ export default function ArticleRow({
to={'/news/' + article._id + '/' + slug(article.title)} to={'/news/' + article._id + '/' + slug(article.title)}
className='clickable-link' className='clickable-link'
> >
<h3>{article.title}</h3> <h3 style={{ margin: '0px' }}>{article.title}</h3>
</Link> </Link>
<i className='text-sm'>{article.publish_date}</i> <i className='text-sm'>{article.publish_date}</i>
<br /> <br />
<i>{article.author || 'No author'}</i> <i>{article.author || 'No author'}</i>
<br /> <br />
<p>{article.summary}</p> <p style={{ marginBottom: '0px' }}>{article.summary}</p>
</div> </div>
</div> </div>
); );

10
src/components/Layout.tsx
View File

@ -14,14 +14,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<div> <div>
<Navbar /> <Navbar />
{children}
<main> <Footer />
{children}
<hr />
<Footer />
</main>
</div> </div>
); );
} }

5
src/components/MemberRow.tsx
View File

@ -1,4 +1,5 @@
import imageUrl from '../imageUrl'; import imageUrl from '../imageUrl';
import '../css/article.css';
export default function MemberRow({ member }: { member: SGA.MemberDocument }) { export default function MemberRow({ member }: { member: SGA.MemberDocument }) {
let thumbUrl: string | null = null; let thumbUrl: string | null = null;
@ -15,7 +16,9 @@ export default function MemberRow({ member }: { member: SGA.MemberDocument }) {
</div> </div>
<div className='article-row-content'> <div className='article-row-content'>
<h3>{member.name}</h3> <h3>{member.name}</h3>
<i>{member.role}, {member.year}</i> <i>
{member.role}, {member.year}
</i>
<br /> <br />
<p>{member.bio}</p> <p>{member.bio}</p>
</div> </div>

2
src/components/RecentNews.tsx
View File

@ -12,7 +12,7 @@ export default function RecentNews() {
return ( return (
<div> <div>
<h3 className='header'>Recent News</h3> <h3 className='text-center display-3'>Recent News</h3>
{news.map((article) => { {news.map((article) => {
return <ArticleRow article={article} />; return <ArticleRow article={article} />;
})} })}

2
src/components/Segment.tsx
View File

@ -4,7 +4,7 @@ import '../css/segment.css';
export default function InfoColumn({ title, content, imageURL, infoURL }) { export default function InfoColumn({ title, content, imageURL, infoURL }) {
return ( return (
<div className='segment'> <div className='segment'>
<h3>{title}</h3> <h3 className='segment-title'>{title}</h3>
<img src={imageURL} alt={title} /> <img src={imageURL} alt={title} />
<p className='segment-body'>{content}</p> <p className='segment-body'>{content}</p>
<Link to={infoURL} className='blue-button'> <Link to={infoURL} className='blue-button'>

2
src/components/SegmentGroup.tsx
View File

@ -2,7 +2,7 @@ import Segment from './Segment';
export default function InfoColumnGroup() { export default function InfoColumnGroup() {
return ( return (
<div className='row'> <div className='d-flex'>
<Segment <Segment
imageURL='/images/segment-1.jpg' imageURL='/images/segment-1.jpg'
title='News and Happenings' title='News and Happenings'

14
src/css/article.css
View File

@ -6,11 +6,11 @@
.article-row-thumbnail { .article-row-thumbnail {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
/* /*
To center the image To center the image
*/ */
display: flex; /* display: flex;
align-items: center; align-items: center; */
} }
.article-row-content { .article-row-content {
@ -19,7 +19,7 @@
} }
.article-paragraphs { .article-paragraphs {
font-size: 22px; font-size: 22px;
line-height: 33px; line-height: 33px;
font-weight: 400; font-weight: 400;
} }

42
src/css/footer.css
View File

@ -1,43 +1,45 @@
.footer-wrapper { .footer-wrapper {
width: 100%; width: 100%;
margin: 2rem 0rem; margin-top: 2rem;
margin-bottom: 2rem;
} }
.footer-block { .footer-block {
line-height: 1.25rem; line-height: 1.25rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.footer-banner { .footer-banner {
width: 100%; width: 100%;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.footer-container { .footer-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 50px;
} }
.footer-title { .footer-title {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
font-weight: bold; font-weight: bold;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.footer-item { .footer-item {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.footer-col { .footer-col {
width: 33.3%; width: 33.3%;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.footer-col { .footer-col {
width: 100%; width: 100%;
} }
} }

23
src/css/hero.css
View File

@ -1,16 +1,17 @@
.hero { .hero {
position: relative; position: relative;
width: 100%;
} }
.hero-heading { .hero-heading {
display: flex; display: flex;
font-size: 4rem; font-size: 4rem;
font-weight: bold; font-weight: bold;
text-shadow: 1px 1px rgba(48, 48, 48, 0.5); text-shadow: 1px 1px rgba(48, 48, 48, 0.5);
color: white; color: white;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }

5
src/css/navbar.css
View File

@ -6,6 +6,11 @@
align-items: center; align-items: center;
} }
.nav a {
color: inherit;
text-decoration: none;
}
.nav-link { .nav-link {
display: block; display: block;
padding: 10px; padding: 10px;

19
src/css/segment.css
View File

@ -1,12 +1,17 @@
.segment { .segment {
padding: 0px 17px; padding: 0px 17px;
text-align: center; text-align: center;
} }
.segment-body { .segment-body {
color: #444; color: #444;
font-size: 22px; font-size: 22px;
line-height: 33px; line-height: 33px;
font-weight: 300; font-weight: 300;
text-align: left; text-align: left;
} }
.segment-title {
margin: 10px 0px;
font-weight: 600;
}

20
src/index.css
View File

@ -1,6 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300&display=swap');
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', color: #444;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -16,16 +19,6 @@ code {
box-sizing: border-box; box-sizing: border-box;
} }
a {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
img { img {
max-width: 100%; max-width: 100%;
} }
@ -34,3 +27,8 @@ main {
width: 1200px; width: 1200px;
margin: 0px auto; margin: 0px auto;
} }
h3 {
font-size: 1.5rem;
font-weight: bold;
}

10
src/pages/classcouncil.tsx
View File

@ -11,10 +11,12 @@ export default function ClassCouncil() {
return ( return (
<> <>
<Hero heading='Class Council' /> <Hero heading='Class Council' />
{members && <main>
members.map((member) => { {members &&
return <MemberRow key={member._id} member={member}></MemberRow>; members.map((member) => {
})} return <MemberRow key={member._id} member={member}></MemberRow>;
})}
</main>
</> </>
); );
} }

14
src/pages/committee.tsx
View File

@ -12,12 +12,14 @@ export default function Committee() {
return ( return (
<> <>
<Hero heading='Executive Committee' /> <Hero heading='Executive Committee' />
<div> <main>
{excomm && <div>
excomm.map((member) => { {excomm &&
return <MemberRow member={member} />; excomm.map((member) => {
})} return <MemberRow member={member} />;
</div> })}
</div>
</main>
</> </>
); );
} }

14
src/pages/index.tsx
View File

@ -9,15 +9,15 @@ export default function IndexPage() {
{/* Hero image */} {/* Hero image */}
<Hero /> <Hero />
<hr /> <main>
{/* Info columns */}
<SegmentGroup />
{/* Info columns */} <hr />
<SegmentGroup />
<hr /> {/* Mission */}
<NewsAndMission />
{/* Mission */} </main>
<NewsAndMission />
</> </>
); );
} }

15
src/pages/initiatives.tsx
View File

@ -10,12 +10,15 @@ export default function Initiatives() {
return ( return (
<> <>
<Hero heading='Initiatives'></Hero> <Hero heading='Initiatives' />
<div style={{ display: 'flex', flexDirection: 'column' }}> <main>
{initiatives && initiatives.map((initiative) => { <div style={{ display: 'flex', flexDirection: 'column' }}>
return <InitiativeRow initiative={initiative} />; {initiatives &&
})} initiatives.map((initiative) => {
</div> return <InitiativeRow initiative={initiative} />;
})}
</div>
</main>
</> </>
); );
} }

54
src/pages/involved.tsx
View File

@ -15,29 +15,37 @@ export default function GetInvolved() {
}, []); }, []);
return ( return (
<div className='text-center'> <>
<Hero heading='Get Involved' /> <Hero heading='Get Involved' />
<h2>SGA Calendar</h2> <main className='text-center'>
<iframe <h2>SGA Calendar</h2>
src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York' <iframe
title='SGA Calendar' src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York'
width='800' title='SGA Calendar'
height='600' width='800'
/> height='600'
<p className="get-involved-body"> />
Interested in getting involved with SGA? You can run for office, work on a project, or apply to a committee. If you just want to share an idea or concern or get to know your representatives, reach out to us at <b>sga@tjhsst.edu</b>! <p className='get-involved-body'>
</p> Interested in getting involved with SGA? You can run for office, work
{ways ? ( on a project, or apply to a committee. If you just want to share an
<> idea or concern or get to know your representatives, reach out to us
<h2>Here are some ways to connect with SGA:</h2> at <b>sga@tjhsst.edu</b>!
{ways.ways.map((way) => ( </p>
<GetInvolvedRow way={way} key={way._id} /> {ways ? (
))} <>
</> <h2>Here are some ways to connect with SGA:</h2>
) : null} {ways.ways.map((way) => (
<a className='blue-button' href='https://goo.gl/forms/F3FXer4xpAF5SDhL2'> <GetInvolvedRow way={way} key={way._id} />
Contact Us ))}
</a> </>
</div> ) : null}
<a
className='blue-button'
href='https://goo.gl/forms/F3FXer4xpAF5SDhL2'
>
Contact Us
</a>
</main>
</>
); );
} }

4
src/pages/mission.tsx
View File

@ -10,7 +10,7 @@ export default function Mission() {
<> <>
<Hero heading='Mission and History' /> <Hero heading='Mission and History' />
{mission ? ( {mission ? (
<div> <main>
<div className='mission-quote'> <div className='mission-quote'>
<span className='mission-quote-text'>“{mission.quote_text}”</span> <span className='mission-quote-text'>“{mission.quote_text}”</span>
<br /> <br />
@ -44,7 +44,7 @@ export default function Mission() {
Previous Leadership Previous Leadership
</a> </a>
</div> </div>
</div> </main>
) : null} ) : null}
</> </>
); );

4
src/pages/news.tsx
View File

@ -6,7 +6,9 @@ export default function News() {
return ( return (
<> <>
<Hero heading='News' /> <Hero heading='News' />
<ArticleList /> <main>
<ArticleList />
</main>
</> </>
); );
} }

42
src/pages/newsArticle.tsx
View File

@ -22,27 +22,29 @@ export default function NewsArticle() {
return ( return (
<> <>
<Hero heading='News' imageURL={thumbUrl} /> <Hero heading='News' imageURL={thumbUrl} />
<Link to='/news' className='clickable-link'> <main>
Go to all news articles <Link to='/news' className='clickable-link'>
</Link> Go to all news articles
<br /> </Link>
{article ? ( <br />
<div style={{ maxWidth: '640px', margin: '2rem auto' }}> {article ? (
<h1>{article.title}</h1> <div style={{ maxWidth: '640px', margin: '2rem auto' }}>
<i className='text-sm'>{article.publish_date}</i> <h1>{article.title}</h1>
<br /> <i className='text-sm'>{article.publish_date}</i>
<i>{article.author || 'No author'}</i> <br />
<br /> <i>{article.author || 'No author'}</i>
{/* Wrap the BlockContent in a div because it expands to <></> */} <br />
<div className='article-paragraphs'> {/* Wrap the BlockContent in a div because it expands to <></> */}
<BlockContent blocks={article.content} /> <div className='article-paragraphs'>
<BlockContent blocks={article.content} />
</div>
<br />
<Link to='/news' className='clickable-link'>
Go to all news articles
</Link>
</div> </div>
<br /> ) : null}
<Link to='/news' className='clickable-link'> </main>
Go to all news articles
</Link>
</div>
) : null}
</> </>
); );
} }

4
src/pages/officers.tsx
View File

@ -15,13 +15,13 @@ export default function Officers() {
return ( return (
<> <>
<Hero heading='Officers' /> <Hero heading='Officers' />
<div> <main>
{officers {officers
? officers.map((officer) => { ? officers.map((officer) => {
return <MemberRow member={officer} />; return <MemberRow member={officer} />;
}) })
: null} : null}
</div> </main>
</> </>
); );
} }