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

Added segment groups

Browse Source
This commit is contained in:
Michael Fatemi 2020-11-25 20:17:10 -05:00
parent cc73d1d857
commit 53e2ef077d
17 changed files with 182 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintcache
View File

File diff suppressed because one or more lines are too long

1
public/index.html
View File

@ -24,7 +24,6 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
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`.
--> -->
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css" />
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>

81
src/App.css
View File

@ -1,38 +1,61 @@
.App { .header {
text-align: center;
font-weight: bold;
margin: 1rem 0rem;
font-size: 1.5rem;
}
/* Three column layout */
.split-thirds {
margin: 2rem auto;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 1024px) {
.split-thirds > div {
width: 33.33%;
}
}
@media (max-width: 1024px) {
.split-thirds > div {
width: 100%;
}
}
img {
max-width: 100%;
}
.space-2 {
margin: 1rem;
padding: 1rem;
}
.space-4 {
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-align: center;
} }
.App-logo { .row {
height: 40vmin; display: flex;
pointer-events: none;
} }
@media (prefers-reduced-motion: no-preference) { .col {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center; justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} }

6
src/App.tsx
View File

@ -2,13 +2,15 @@ import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Layout from './components/Layout'; import Layout from './components/Layout';
import './App.css';
import index from './pages/index'; import index from './pages/index';
import initiatives from './pages/initiatives'; import initiatives from './pages/initiatives';
import news from './pages/news'; import news from './pages/news';
import newsArticle from './pages/newsArticle'; import newsArticle from './pages/newsArticle';
import notFound from './pages/404'; import notFound from './pages/404';
function App() { export default function App() {
return ( return (
<BrowserRouter> <BrowserRouter>
<Layout> <Layout>
@ -23,5 +25,3 @@ function App() {
</BrowserRouter> </BrowserRouter>
); );
} }
export default App;

5
src/components/ArticleList.tsx
View File

@ -23,8 +23,6 @@ export default function ArticleList() {
let articles = await sanity.fetch<SGA.ArticleDocument[]>(query, params); let articles = await sanity.fetch<SGA.ArticleDocument[]>(query, params);
console.log(articles.length);
if (articles.length < 3) { if (articles.length < 3) {
setReachedEnd(true); setReachedEnd(true);
} }
@ -47,8 +45,10 @@ export default function ArticleList() {
return <ArticleRow key={article._id} article={article} />; return <ArticleRow key={article._id} article={article} />;
})} })}
<div className='text-center'>
{!reachedEnd ? ( {!reachedEnd ? (
<button <button
className='button'
onClick={() => { onClick={() => {
let lastArticle = articles[articles.length - 1]; let lastArticle = articles[articles.length - 1];
addArticles(lastArticle.publish_date, lastArticle.title); addArticles(lastArticle.publish_date, lastArticle.title);
@ -60,5 +60,6 @@ export default function ArticleList() {
<div>No more articles to show</div> <div>No more articles to show</div>
)} )}
</div> </div>
</div>
); );
} }

6
src/components/ArticleRow.tsx
View File

@ -26,9 +26,11 @@ export default function ArticleRow({
</div> </div>
<div style={{ flex: 3, padding: '10px' }}> <div style={{ flex: 3, padding: '10px' }}>
<Link to={'/news/' + article._id + '/' + slug(article.title)}> <Link to={'/news/' + article._id + '/' + slug(article.title)}>
<h3 className='font-bold text-3xl mb-6'>{article.title}</h3> <h3 className='font-bold text-3xl'>{article.title}</h3>
</Link> </Link>
<i className='text-sm'>{article.publish_date}</i> <i className='text-sm'>
{article.publish_date} - {article.author || 'No author'}
</i>
<br /> <br />
<BlockContent blocks={article.content} /> <BlockContent blocks={article.content} />
</div> </div>

16
src/components/InitiativeColumn.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import BlockContent from '@sanity/block-content-to-react'; import BlockContent from '@sanity/block-content-to-react';
import imageUrl from '../imageUrl'; import imageUrl from '../imageUrl';
import '../css/initiative.css';
export default function InitiativeColumn({ name, thumbnail, content }) { export default function InitiativeColumn({ name, thumbnail, content }) {
let thumbUrl: string | null = null; let thumbUrl: string | null = null;
@ -9,12 +9,14 @@ export default function InitiativeColumn({ name, thumbnail, content }) {
} }
return ( return (
<div className='lg:w-1/3 w-full lg:px-4 mb-4'> <div>
<h3 className='text-center font-bold text-3xl text-secondary mb-6'> <h3 className='header'>{name}</h3>
{name} {thumbUrl ? (
</h3> <img className='initiative-img' src={thumbUrl} alt={name} />
{thumbUrl ? <img className='mb-4' src={thumbUrl} alt={name} /> : null} ) : null}
<BlockContent blocks={content} style={{ fontSize: '1.5rem' }} /> <div className='initiative-summary'>
<BlockContent blocks={content} />
</div>
</div> </div>
); );
} }

2
src/components/InitiativeList.tsx
View File

@ -12,7 +12,7 @@ export default function InitiativeList() {
} }
return ( return (
<section className='container mx-auto px-8 my-8 flex flex-wrap'> <section className='split-thirds'>
{initiatives.map((initiative) => { {initiatives.map((initiative) => {
return <InitiativeColumn key={initiative._id} {...initiative} />; return <InitiativeColumn key={initiative._id} {...initiative} />;
})} })}

4
src/components/InitiativeRow.tsx
View File

@ -20,7 +20,9 @@ export default function InitiativeRow({
) : null} ) : null}
</div> </div>
<div style={{ flex: 3, padding: '10px' }}> <div style={{ flex: 3, padding: '10px' }}>
<h3>{initiative.name}</h3> <h3 className='header'>
{initiative.name}
</h3>
<BlockContent blocks={initiative.content} /> <BlockContent blocks={initiative.content} />
</div> </div>
</div> </div>

15
src/components/Segment.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Link } from 'react-router-dom';
import '../css/segment.css';
export default function InfoColumn({ title, content, imageURL, infoURL }) {
return (
<div className='segment'>
<h3>{title}</h3>
<img src={imageURL} alt={title} />
<p className='segment-body'>{content}</p>
<Link to={infoURL} className='segment-button'>
MORE INFO
</Link>
</div>
);
}

26
src/components/SegmentGroup.tsx Normal file
View File

@ -0,0 +1,26 @@
import Segment from './Segment';
export default function InfoColumnGroup() {
return (
<div className='row'>
<Segment
imageURL='/images/segment-1.jpg'
title='News and Happenings'
content={`Read about SGA initiatives, goals, and progress from SGA officers, as well as from other student leaders, students, and student organizations.`}
infoURL='/news'
/>
<Segment
imageURL='/images/segment-2.jpg'
title='Who We Are'
content={`Learn about your representatives, and how they're working to advance the common agenda that SGA has set to improve your experience at TJ.`}
infoURL='/officers'
/>
<Segment
imageURL='/images/segment-3.jpg'
title='Get Involved'
content={`Any questions or concerns? Have an idea for how SGA could be doing more to advocate for students? Want to get involved? Contact Us!`}
infoURL='/involved'
/>
</div>
);
}

9
src/css/initiative.css
View File

@ -1,3 +1,12 @@
.initiative-row { .initiative-row {
display: flex; display: flex;
} }
.initiative-img {
padding: 0.5rem;
}
.initiative-summary {
padding: 0.5rem;
font-size: 1.5rem;
}

20
src/css/segment.css Normal file
View File

@ -0,0 +1,20 @@
.segment {
padding: 0px 17px;
}
.segment-body {
color: #444;
font-size: 22px;
line-height: 33px;
font-weight: 300;
}
.segment-button {
text-transform: uppercase;
padding: 13px 23px;
border-width: 2px;
border-radius: 0.25rem;
border-style: solid;
border-color: #38A3BD;
color: #38A3BD;
}

14
src/index.css
View File

@ -11,3 +11,17 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
* {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}

2
src/index.d.ts vendored
View File

@ -10,6 +10,8 @@ declare namespace SGA {
title: string; title: string;
thumbnail: {}; thumbnail: {};
content: any[]; content: any[];
author: string;
summary: string;
publish_date: string; publish_date: string;
_id: string; _id: string;
} }

9
src/pages/index.tsx
View File

@ -1,17 +1,20 @@
import React from 'react'; import React from 'react';
import Hero from '../components/Hero'; import Hero from '../components/Hero';
import SegmentGroup from '../components/SegmentGroup';
import InitiativeList from '../components/InitiativeList';
import Mission from '../components/Mission'; import Mission from '../components/Mission';
const IndexPage = () => { const IndexPage = () => {
return ( return (
<> <>
{/* Hero image */} {/* Hero image */}
<Hero></Hero> <Hero />
{/* Info columns */}
<SegmentGroup />
{/* Initiatives section */} {/* Initiatives section */}
<InitiativeList /> {/* <InitiativeList /> */}
{/* Mission */} {/* Mission */}
<Mission /> <Mission />

8
src/pages/newsArticle.tsx
View File

@ -19,13 +19,13 @@ export default function NewsArticle() {
thumbUrl = imageUrl(article.thumbnail).url() || undefined; thumbUrl = imageUrl(article.thumbnail).url() || undefined;
} }
console.log(article);
return ( return (
<> <>
<Hero heading={article.title} imageURL={thumbUrl} /> <Hero heading={article.title} imageURL={thumbUrl} />
<div style={{ maxWidth: '640px' }} className='mx-auto my-8'> <div style={{ maxWidth: '640px' }} className='mx-auto mt-4 mb-8'>
<i className='text-sm'>Published: {article.publish_date}</i> <i className='text-sm'>
{article.publish_date} - {article.author || 'No author'}
</i>
<br /> <br />
<Link to='/news'>Go to all news articles</Link> <Link to='/news'>Go to all news articles</Link>
<br /> <br />