rushilwiz/tj-sga-website-react
1
0
Fork 0
mirror of https://github.com/tjsga/tj-sga-website-react.git synced 2025-04-09 22:50: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>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/images/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/images/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
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
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.
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.
@ -24,17 +24,26 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap" rel="stylesheet">
<!-- Title -->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap"
rel="stylesheet"
/>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
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.
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 create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</body>
</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 {
margin: 1rem;
padding: 1rem;
margin: 1rem;
padding: 1rem;
}
.space-4 {
margin: 2rem;
padding: 2rem;
margin: 2rem;
padding: 2rem;
}
.button {
border-color: #474849;
border-width: 2px;
border-radius: 0.25rem;
background-color: inherit;
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;
border-color: #474849;
border-width: 2px;
border-radius: 0.25rem;
background-color: inherit;
box-shadow: none;
}
.col {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.flex-1 {
flex: 1;
flex: 1;
}
.flex-2 {
flex: 2;
flex: 2;
}
.blue-button {
text-transform: uppercase;
padding: 13px 23px;
border-width: 2px;
border-radius: 0.25rem;
border-style: solid;
border-color: #38A3BD;
background-color: white;
color: #38A3BD;
display: inline-block;
cursor: pointer;
text-transform: uppercase;
padding: 13px 23px;
border-width: 2px;
border-radius: 0.25rem;
border-style: solid;
border-color: #38A3BD;
background-color: white;
color: #38A3BD;
display: inline-block;
cursor: pointer;
}
.clickable-link {
text-decoration: underline;
color: #38A3BD;
}
text-decoration: underline;
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 committee = React.lazy(() => import('./pages/committee'));
const classcouncil = React.lazy(() => import('./pages/classcouncil'));
const loading = () => <h1>Loading...</h1>;
export default function App() {
return (
<Suspense fallback="Loading...">
<Suspense fallback={loading}>
<BrowserRouter>
<Layout>
<Switch>

5
src/components/ArticleRow.tsx
View File

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

10
src/components/Layout.tsx
View File

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

5
src/components/MemberRow.tsx
View File

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

2
src/components/RecentNews.tsx
View File

@ -12,7 +12,7 @@ export default function RecentNews() {
return (
<div>
<h3 className='header'>Recent News</h3>
<h3 className='text-center display-3'>Recent News</h3>
{news.map((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 }) {
return (
<div className='segment'>
<h3>{title}</h3>
<h3 className='segment-title'>{title}</h3>
<img src={imageURL} alt={title} />
<p className='segment-body'>{content}</p>
<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() {
return (
<div className='row'>
<div className='d-flex'>
<Segment
imageURL='/images/segment-1.jpg'
title='News and Happenings'

14
src/css/article.css
View File

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

42
src/css/footer.css
View File

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

23
src/css/hero.css
View File

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

5
src/css/navbar.css
View File

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

19
src/css/segment.css
View File

@ -1,12 +1,17 @@
.segment {
padding: 0px 17px;
text-align: center;
padding: 0px 17px;
text-align: center;
}
.segment-body {
color: #444;
font-size: 22px;
line-height: 33px;
font-weight: 300;
text-align: left;
color: #444;
font-size: 22px;
line-height: 33px;
font-weight: 300;
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 {
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',
sans-serif;
-webkit-font-smoothing: antialiased;
@ -16,16 +19,6 @@ code {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
}
@ -34,3 +27,8 @@ main {
width: 1200px;
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 (
<>
<Hero heading='Class Council' />
{members &&
members.map((member) => {
return <MemberRow key={member._id} member={member}></MemberRow>;
})}
<main>
{members &&
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 (
<>
<Hero heading='Executive Committee' />
<div>
{excomm &&
excomm.map((member) => {
return <MemberRow member={member} />;
})}
</div>
<main>
<div>
{excomm &&
excomm.map((member) => {
return <MemberRow member={member} />;
})}
</div>
</main>
</>
);
}

14
src/pages/index.tsx
View File

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

15
src/pages/initiatives.tsx
View File

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

54
src/pages/involved.tsx
View File

@ -15,29 +15,37 @@ export default function GetInvolved() {
}, []);
return (
<div className='text-center'>
<>
<Hero heading='Get Involved' />
<h2>SGA Calendar</h2>
<iframe
src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York'
title='SGA Calendar'
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>
{ways ? (
<>
<h2>Here are some ways to connect with SGA:</h2>
{ways.ways.map((way) => (
<GetInvolvedRow way={way} key={way._id} />
))}
</>
) : null}
<a className='blue-button' href='https://goo.gl/forms/F3FXer4xpAF5SDhL2'>
Contact Us
</a>
</div>
<main className='text-center'>
<h2>SGA Calendar</h2>
<iframe
src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York'
title='SGA Calendar'
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>
{ways ? (
<>
<h2>Here are some ways to connect with SGA:</h2>
{ways.ways.map((way) => (
<GetInvolvedRow way={way} key={way._id} />
))}
</>
) : 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' />
{mission ? (
<div>
<main>
<div className='mission-quote'>
<span className='mission-quote-text'>“{mission.quote_text}”</span>
<br />
@ -44,7 +44,7 @@ export default function Mission() {
Previous Leadership
</a>
</div>
</div>
</main>
) : null}
</>
);

4
src/pages/news.tsx
View File

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

42
src/pages/newsArticle.tsx
View File

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

4
src/pages/officers.tsx
View File

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