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

Some more style changes

Browse Source
This commit is contained in:
Michael Fatemi 2020-12-11 16:53:56 -05:00
parent 139c8a1102
commit 84fd33fffe
12 changed files with 88 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.css
View File

@ -43,6 +43,10 @@
cursor: pointer;
}
a.blue-button {
text-decoration: none;
}
.clickable-link {
text-decoration: underline;
color: #38A3BD;

6
src/components/ArticleRow.tsx
View File

@ -18,11 +18,9 @@ export default function ArticleRow({
};
return (
<div className='row'>
<div className='d-flex'>
<div className='article-row-thumbnail'>
{thumbUrl ? (
<img className='mb-4' src={thumbUrl} alt={article.title} />
) : null}
{thumbUrl ? <img src={thumbUrl} alt={article.title} /> : null}
</div>
<div className='article-row-content'>
<Link

15
src/components/InitiativeRow.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import imageUrl from '../imageUrl';
import BlockContent from '@sanity/block-content-to-react';
import '../css/article.css';
export default function InitiativeRow({
initiative,
@ -13,16 +14,12 @@ export default function InitiativeRow({
}
return (
<div style={{ display: 'flex' }}>
<div style={{ flex: 1, padding: '10px' }}>
{thumbUrl ? (
<img className='mb-4' src={thumbUrl} alt={initiative.name} />
) : null}
<div className='d-flex'>
<div className='article-row-thumbnail'>
{thumbUrl ? <img src={thumbUrl} alt={initiative.name} /> : null}
</div>
<div style={{ flex: 3, padding: '10px' }}>
<h3 className='header'>
{initiative.name}
</h3>
<div className='article-row-content'>
<h3 className='header'>{initiative.name}</h3>
<BlockContent blocks={initiative.content} />
</div>
</div>

5
src/components/RecentNews.tsx
View File

@ -1,3 +1,5 @@
import React from 'react';
import { Link } from 'react-router-dom';
import useQuery from '../hooks/useQuery';
import ArticleRow from './ArticleRow';
@ -12,10 +14,11 @@ export default function RecentNews() {
return (
<div>
<h3 className='text-center display-3'>Recent News</h3>
<h3 className='display-3'>Recent News</h3>
{news.map((article) => {
return <ArticleRow article={article} />;
})}
<Link to='/news'>All News</Link>
</div>
);
}

13
src/css/article.css
View File

@ -5,17 +5,16 @@
.article-row-thumbnail {
flex: 1;
padding: 10px;
/*
To center the image
*/
/* display: flex;
align-items: center; */
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 1em;
}
.article-row-content {
flex: 3;
padding: 10px;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 1em;
}
.article-paragraphs {

15
src/css/get-involved.css
View File

@ -1,14 +1,17 @@
.get-involved-body {
color: #444;
font-size: 22px;
line-height: 33px;
font-weight: 300;
color: #444;
font-size: 22px;
line-height: 33px;
font-weight: 300;
text-align: left;
}
.get-involved-title {
flex: 1;
flex: 1;
text-align: right;
padding-right: 2em;
}
.get-involved-description {
flex: 3;
flex: 3;
}

55
src/css/mission.css
View File

@ -1,45 +1,48 @@
.mission-box {
padding: 0px 20px;
padding: 0px 20px;
}
.mission-landing-page-text {
font-family: 'Arapey';
font-size: 33px;
font-style: italic;
font-weight: 500;
line-height: 44px;
font-family: 'Arapey';
font-size: 33px;
font-style: italic;
font-weight: 500;
line-height: 44px;
}
.mission-header {
font-size: 1.25rem;
font-weight: bold;
font-size: 2rem;
font-weight: bold;
text-align: right;
display: block;
padding-right: 2em;
}
.mission-para {
font-size: 22px;
line-height: 33px;
font-weight: 300;
font-size: 22px;
line-height: 33px;
font-weight: 300;
}
.mission-quote {
display: flex;
flex-direction: column;
margin: 20px 0px;
display: flex;
flex-direction: column;
margin: 20px 0px;
}
.mission-quote-text {
font-size: 2rem;
font-weight: 600;
font-style: italic;
font-family: 'Arapey';
width: 100%;
text-align: center;
font-size: 2rem;
font-weight: 600;
font-style: italic;
font-family: 'Arapey';
width: 100%;
text-align: center;
}
.mission-quote-author {
width: 100%;
text-align: right;
font-size: 20px;
display: inline-block;
padding-right: 200px;
}
width: 100%;
text-align: right;
font-size: 20px;
display: inline-block;
padding-right: 200px;
}

5
src/css/segment.css
View File

@ -12,6 +12,7 @@
}
.segment-title {
margin: 10px 0px;
font-weight: 600;
margin: 1em 0px;
font-size: 1.75rem;
font-weight: 500;
}

2
src/pages/involved.tsx
View File

@ -18,7 +18,7 @@ export default function GetInvolved() {
<>
<Hero heading='Get Involved' />
<main className='text-center'>
<h2>SGA Calendar</h2>
<h2 className='my-2'>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'

13
src/pages/mission.tsx
View File

@ -19,20 +19,19 @@ export default function Mission() {
— {mission.quote_author}
</span>
</div>
<div className='row'>
<div className='flex-1'>
<div className='d-flex'>
<div className='flex-1 p-2'>
<span className='mission-header'>Vision</span>
</div>
<div className='flex-2'>
<div className='flex-2 p-2'>
<p className='mission-para'>{mission.vision}</p>
</div>
</div>
<hr />
<div className='row'>
<div className='flex-1'>
<div className='d-flex'>
<div className='flex-1 p-2'>
<span className='mission-header'>Mission</span>
</div>
<div className='flex-2'>
<div className='flex-2 p-2'>
<p className='mission-para'>{mission.mission}</p>
</div>
</div>

4
src/pages/news.tsx
View File

@ -7,7 +7,9 @@ export default function News() {
<>
<Hero heading='News' />
<main>
<ArticleList />
<div style={{ paddingTop: '1em' }}>
<ArticleList />
</div>
</main>
</>
);

29
src/pages/newsArticle.tsx
View File

@ -1,38 +1,39 @@
import React from 'react';
import { Link, useParams } from 'react-router-dom';
import Hero from '../components/Hero';
import useQuery from '../hooks/useQuery';
import imageUrl from '../imageUrl';
import BlockContent from '@sanity/block-content-to-react';
import sanity from '../sanity';
import '../css/article.css';
export default function NewsArticle() {
let { articleId } = useParams<{ articleId: string }>();
let article = useQuery<SGA.ArticleDocument>('*[_id == $articleId] [0]', {
articleId,
});
let [article, setArticle] = React.useState<SGA.ArticleDocument>(null!);
let thumbUrl: string | undefined = undefined;
React.useEffect(() => {
sanity.fetch('*[_id == $articleId] [0]', { articleId }).then(setArticle);
}, [articleId]);
let thumbUrl: string | null = null;
if (article?.thumbnail) {
thumbUrl = imageUrl(article.thumbnail).url() || undefined;
thumbUrl = imageUrl(article.thumbnail).url();
} else {
thumbUrl = '/images/hero.png';
}
return (
<>
<Hero heading='News' imageURL={thumbUrl} />
<Hero heading='News' imageURL={thumbUrl || undefined} />
<main>
<Link to='/news' className='clickable-link'>
Go to all news articles
</Link>
<br />
{article ? (
<div style={{ maxWidth: '640px', margin: '2rem auto' }}>
<Link to='/news' className='clickable-link'>
Go to all news articles
</Link>
<h1>{article.title}</h1>
<i className='text-sm'>{article.publish_date}</i>
<br />
<i>{article.author || 'No author'}</i>
<i>
Posted {article.publish_date} by {article.author || 'No author'}
</i>
<br />
{/* Wrap the BlockContent in a div because it expands to <></> */}
<div className='article-paragraphs'>