rushilwiz/tj-sga-website-react
1
0
Fork 0
mirror of https://github.com/tjsga/tj-sga-website-react.git synced 2025-04-18 18:50:16 -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="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
@ -25,11 +25,20 @@
-->
<!-- 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">
<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>React App</title>
<title>TJHSST Student Government Association</title>
</head>
<body>
<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 {
margin: 1rem;
padding: 1rem;
@ -23,23 +16,6 @@
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 {
display: flex;
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 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>
);

6
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>
</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'

4
src/css/article.css
View File

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

4
src/css/footer.css
View File

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

1
src/css/hero.css
View File

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

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;

5
src/css/segment.css
View File

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

2
src/pages/classcouncil.tsx
View File

@ -11,10 +11,12 @@ export default function ClassCouncil() {
return (
<>
<Hero heading='Class Council' />
<main>
{members &&
members.map((member) => {
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 (
<>
<Hero heading='Executive Committee' />
<main>
<div>
{excomm &&
excomm.map((member) => {
return <MemberRow member={member} />;
})}
</div>
</main>
</>
);
}

4
src/pages/index.tsx
View File

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

7
src/pages/initiatives.tsx
View File

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

18
src/pages/involved.tsx
View File

@ -15,8 +15,9 @@ export default function GetInvolved() {
}, []);
return (
<div className='text-center'>
<>
<Hero heading='Get Involved' />
<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'
@ -24,8 +25,11 @@ export default function GetInvolved() {
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'>
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 ? (
<>
@ -35,9 +39,13 @@ export default function GetInvolved() {
))}
</>
) : null}
<a className='blue-button' href='https://goo.gl/forms/F3FXer4xpAF5SDhL2'>
<a
className='blue-button'
href='https://goo.gl/forms/F3FXer4xpAF5SDhL2'
>
Contact Us
</a>
</div>
</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}
</>
);

2
src/pages/news.tsx
View File

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

2
src/pages/newsArticle.tsx
View File

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