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

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.
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>
</head>
<body>

77
src/App.css
View File

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

6
src/App.tsx
View File

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

29
src/components/ArticleList.tsx
View File

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

6
src/components/ArticleRow.tsx
View File

@ -26,9 +26,11 @@ export default function ArticleRow({
</div>
<div style={{ flex: 3, padding: '10px' }}>
<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>
<i className='text-sm'>{article.publish_date}</i>
<i className='text-sm'>
{article.publish_date} - {article.author || 'No author'}
</i>
<br />
<BlockContent blocks={article.content} />
</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 imageUrl from '../imageUrl';
import '../css/initiative.css';
export default function InitiativeColumn({ name, thumbnail, content }) {
let thumbUrl: string | null = null;
@ -9,12 +9,14 @@ export default function InitiativeColumn({ name, thumbnail, content }) {
}
return (
<div className='lg:w-1/3 w-full lg:px-4 mb-4'>
<h3 className='text-center font-bold text-3xl text-secondary mb-6'>
{name}
</h3>
{thumbUrl ? <img className='mb-4' src={thumbUrl} alt={name} /> : null}
<BlockContent blocks={content} style={{ fontSize: '1.5rem' }} />
<div>
<h3 className='header'>{name}</h3>
{thumbUrl ? (
<img className='initiative-img' src={thumbUrl} alt={name} />
) : null}
<div className='initiative-summary'>
<BlockContent blocks={content} />
</div>
</div>
);
}

2
src/components/InitiativeList.tsx
View File

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

4
src/components/InitiativeRow.tsx
View File

@ -20,7 +20,9 @@ export default function InitiativeRow({
) : null}
</div>
<div style={{ flex: 3, padding: '10px' }}>
<h3>{initiative.name}</h3>
<h3 className='header'>
{initiative.name}
</h3>
<BlockContent blocks={initiative.content} />
</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 {
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',
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;
thumbnail: {};
content: any[];
author: string;
summary: string;
publish_date: string;
_id: string;
}

9
src/pages/index.tsx
View File

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

8
src/pages/newsArticle.tsx
View File

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