rushilwiz/tj-sga-website-react
1
0
Fork 0
mirror of https://github.com/tjsga/tj-sga-website-react.git synced 2025-04-21 12:00: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

19
public/index.html
View File

@ -7,7 +7,7 @@
<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
@ -25,11 +25,20 @@
--> -->
<!-- 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"
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 -->
<title>React App</title> <title>TJHSST Student Government Association</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

24
src/App.css
View File

@ -1,10 +1,3 @@
.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;
@ -23,23 +16,6 @@
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;

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>
); );

6
src/components/Layout.tsx
View File

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

4
src/css/article.css
View File

@ -9,8 +9,8 @@
/* /*
To center the image To center the image
*/ */
display: flex; /* display: flex;
align-items: center; align-items: center; */
} }
.article-row-content { .article-row-content {

4
src/css/footer.css
View File

@ -1,6 +1,7 @@
.footer-wrapper { .footer-wrapper {
width: 100%; width: 100%;
margin: 2rem 0rem; margin-top: 2rem;
margin-bottom: 2rem;
} }
.footer-block { .footer-block {
@ -16,6 +17,7 @@
.footer-container { .footer-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 50px;
} }
.footer-title { .footer-title {

1
src/css/hero.css
View File

@ -1,5 +1,6 @@
.hero { .hero {
position: relative; position: relative;
width: 100%;
} }
.hero-heading { .hero-heading {

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;

5
src/css/segment.css
View File

@ -10,3 +10,8 @@
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;
}

2
src/pages/classcouncil.tsx
View File

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

2
src/pages/committee.tsx
View File

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

4
src/pages/index.tsx
View File

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

7
src/pages/initiatives.tsx
View File

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

18
src/pages/involved.tsx
View File

@ -15,8 +15,9 @@ export default function GetInvolved() {
}, []); }, []);
return ( return (
<div className='text-center'> <>
<Hero heading='Get Involved' /> <Hero heading='Get Involved' />
<main className='text-center'>
<h2>SGA Calendar</h2> <h2>SGA Calendar</h2>
<iframe <iframe
src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York' src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York'
@ -24,8 +25,11 @@ export default function GetInvolved() {
width='800' width='800'
height='600' height='600'
/> />
<p className="get-involved-body"> <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>! 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> </p>
{ways ? ( {ways ? (
<> <>
@ -35,9 +39,13 @@ export default function GetInvolved() {
))} ))}
</> </>
) : null} ) : null}
<a className='blue-button' href='https://goo.gl/forms/F3FXer4xpAF5SDhL2'> <a
className='blue-button'
href='https://goo.gl/forms/F3FXer4xpAF5SDhL2'
>
Contact Us Contact Us
</a> </a>
</div> </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}
</> </>
); );

2
src/pages/news.tsx
View File

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

2
src/pages/newsArticle.tsx
View File

@ -22,6 +22,7 @@ export default function NewsArticle() {
return ( return (
<> <>
<Hero heading='News' imageURL={thumbUrl} /> <Hero heading='News' imageURL={thumbUrl} />
<main>
<Link to='/news' className='clickable-link'> <Link to='/news' className='clickable-link'>
Go to all news articles Go to all news articles
</Link> </Link>
@ -43,6 +44,7 @@ export default function NewsArticle() {
</Link> </Link>
</div> </div>
) : null} ) : null}
</main>
</> </>
); );
} }

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>
</> </>
); );
} }