Skip to content

Commit

Permalink
- Initial work from @irenejoeunpark with PR #2491
Browse files Browse the repository at this point in the history 
- Changed repos display to row, added border bottom for header, added hint icon for accordion
  • Loading branch information
@menghif @TueeNguyen
menghif authored and TueeNguyen committed Jan 23, 2022
1 parent 974ae80 commit 3440918
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 58 deletions.
2 changes: 1 addition & 1 deletion src/web/src/components/Posts/GitHubInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const parseGitHubUrl = (url: string): URL | null => {
}
};

const filterGitHubUrls = (urls: string[]) => {
export const filterGitHubUrls = (urls: string[]) => {
const issues: Set<string> = new Set();
const pullRequests: Set<string> = new Set();
const repos: Set<string> = new Set();
Expand Down
51 changes: 51 additions & 0 deletions src/web/src/components/Posts/GitHubInfoMobile.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/core';
import Repos from './Repos';
import Issues from './Issues';
import PullRequests from './PullRequests';
import Commits from './Commits';
import Users from './Users';
import { filterGitHubUrls } from './GitHubInfo';

type Props = {
ghUrls: string[];
};

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
padding: '0',
display: 'flex',
flexDirection: 'column',
marginTop: '0',
lineHeight: '1',
[theme.breakpoints.up('lg')]: {
width: '21rem',
},
color: theme.palette.text.secondary,
},
GitHubInfoContainer: {
margin: '0 0 0 1rem',
},
})
);

const GitHubInfoMobile = ({ ghUrls }: Props) => {
const classes = useStyles();
const { repos, issues, pullRequests, commits, users } = filterGitHubUrls(ghUrls);

return (
<div>
<ListSubheader className={classes.root}>
<div className={classes.GitHubInfoContainer}>
{!!repos.length && <Repos repoUrls={repos} />}
{!!issues.length && <Issues issueUrls={issues} />}
{!!pullRequests.length && <PullRequests prUrls={pullRequests} />}
{!!commits.length && <Commits commitUrls={commits} />}
{!!users.length && <Users usernames={users} />}
</div>
</ListSubheader>
</div>
);
};

export default GitHubInfoMobile;
171 changes: 115 additions & 56 deletions src/web/src/components/Posts/Post.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,22 @@ import {
ListSubheader,
createStyles,
useMediaQuery,
Accordion,
AccordionSummary,
AccordionDetails,
Chip,
} from '@material-ui/core';
import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
import LiteYouTubeEmbed from 'react-lite-youtube-embed';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ExpandLessIcon from '@material-ui/icons/ExpandLess';
import { Post } from '../../interfaces';
import AdminButtons from '../AdminButtons';
import Spinner from '../Spinner';
import PostDesktopInfo from './PostInfo';
import PostAvatar from './PostAvatar';
import GitHubInfo from './GitHubInfo';
import GitHubInfoMobile from './GitHubInfoMobile';
import ShareButton from './ShareButton';

import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
Expand Down Expand Up @@ -62,7 +68,8 @@ const useStyles = makeStyles((theme: Theme) =>
gridTemplateColumns: 'auto auto auto auto',
justifyContent: 'left',
width: '100%',
padding: '1em 0 1em 0',
padding: '1em 0 0 0',
marginBottom: '0',
},
},
video: {
Expand Down Expand Up @@ -105,6 +112,7 @@ const useStyles = makeStyles((theme: Theme) =>
fontSize: 'clamp(2.5em, 4vw, 3em)',
[theme.breakpoints.down(1205)]: {
textAlign: 'start',
fontSize: '2em',
marginLeft: '.3em',
},
[theme.breakpoints.down(1024)]: {
Expand Down Expand Up @@ -184,7 +192,7 @@ const useStyles = makeStyles((theme: Theme) =>
[theme.breakpoints.down(1024)]: {
fontSize: '1.1em',
height: '5px',
margin: '-1.6em 1em -1em .5px',
margin: '-1.6em -.5em .5px',
},
},
authorAvatarContainer: {
Expand Down Expand Up @@ -216,6 +224,28 @@ const useStyles = makeStyles((theme: Theme) =>
width: 'auto',
},
},
accordionSummary: {
marginTop: '0',
paddingRight: '0',
justifyContent: 'flex-end',
overflow: 'hidden',
textOverflow: 'ellipsis',
paddingBottom: '0',
'& .MuiAccordionSummary-content': {
marginBottom: '0.2em',
},
},
accordion: {
backgroundColor: 'inherit',
borderBottom: '1.5px solid #cccccc',
boxShadow: 'none',
top: '0',
zIndex: 1,
position: 'sticky',
},
expandIcon: {
alignSelf: 'center',
},
})
);

Expand Down Expand Up @@ -332,62 +362,91 @@ const PostComponent = ({ postUrl, currentPost, totalPosts }: Props) => {
</div>
)}

<ListSubheader component="div" className={classes.postInfo}>
<div className={classes.titleContainer}>
<Typography
variant="h3"
title={post.title}
id={post.id}
className={clsx(classes.title, expandHeader && classes.expandedTitle)}
>
<span
role="button"
tabIndex={0}
onClick={() => setExpandHeader(!expandHeader)}
onKeyDown={() => setExpandHeader(!expandHeader)}
>
{post.title}
</span>
</Typography>
</div>
{!desktop && (
<>
<div className={classes.authorAvatarContainer}>
<PostAvatar name={post.feed.author} url={post.feed.link} />
</div>
<div className={classes.authorNameContainer}>
<h1 className={classes.author}>
<a className={classes.link} href={post.feed.link}>
{post.feed.author}
</a>
</h1>
</div>
<div className={classes.publishedDateContainer}>
<h1 className={classes.published}>
<a href={post.url} rel="bookmark" className={classes.link}>
<time dateTime={post.updated}>{`${formatPublishedDate(post.updated)}`}</time>
</a>

<ShareButton url={post.url} />
</h1>

<div>
<AdminButtons />
{!desktop && (
<Accordion
onClick={() => setExpandHeader(!expandHeader)}
onKeyDown={() => setExpandHeader(!expandHeader)}
className={classes.accordion}
>
<AccordionSummary className={classes.accordionSummary}>
<ListSubheader component="div" className={classes.postInfo}>
<div className={classes.titleContainer}>
<Typography
variant="h3"
title={post.title}
id={post.id}
className={clsx(classes.title, expandHeader && classes.expandedTitle)}
>
<span role="button" tabIndex={0}>
{post.title}
</span>
</Typography>
</div>
</div>
</>
)}
</ListSubheader>
<div className={classes.authorAvatarContainer}>
<PostAvatar name={post.feed.author} url={post.feed.link} />
</div>
<div className={classes.authorNameContainer}>
<h1 className={classes.author}>
<a className={classes.link} href={post.feed.link}>
{post.feed.author}
</a>
</h1>
</div>
<div className={classes.publishedDateContainer}>
<h1 className={classes.published}>
<a href={post.url} rel="bookmark" className={classes.link}>
<time dateTime={post.updated}>{`${formatPublishedDate(post.updated)}`}</time>
</a>
<ShareButton url={post.url} />
</h1>
{expandHeader ? (
<ExpandLessIcon className={classes.expandIcon} />
) : (
<ExpandMoreIcon className={classes.expandIcon} />
)}
<div>
<AdminButtons />
</div>
</div>
</ListSubheader>
</AccordionSummary>
<AccordionDetails>
{!!extractedGitHubUrls.length && <GitHubInfoMobile ghUrls={extractedGitHubUrls} />}
</AccordionDetails>
</Accordion>
)}

{desktop && (
<ListSubheader component="div" className={classes.desktopPostInfo}>
<PostDesktopInfo
postUrl={post.url}
authorName={post.feed.author}
postDate={formatPublishedDate(post.updated)}
blogUrl={post.feed.link}
/>
{!!extractedGitHubUrls.length && <GitHubInfo ghUrls={extractedGitHubUrls} />}
</ListSubheader>
<>
<ListSubheader component="div" className={classes.postInfo}>
<div className={classes.titleContainer}>
<Typography
variant="h3"
title={post.title}
id={post.id}
className={clsx(classes.title, expandHeader && classes.expandedTitle)}
>
<span
role="button"
tabIndex={0}
onClick={() => setExpandHeader(!expandHeader)}
onKeyDown={() => setExpandHeader(!expandHeader)}
>
{post.title}
</span>
</Typography>
</div>
</ListSubheader>
<ListSubheader component="div" className={classes.desktopPostInfo}>
<PostDesktopInfo
postUrl={post.url}
authorName={post.feed.author}
postDate={formatPublishedDate(post.updated)}
blogUrl={post.feed.link}
/>
{!!extractedGitHubUrls.length && <GitHubInfo ghUrls={extractedGitHubUrls} />}
</ListSubheader>
</>
)}
<div className={classes.content}>
{isMedia && (
Expand Down
2 changes: 1 addition & 1 deletion src/web/src/components/Posts/Repos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const useStyles = makeStyles((theme: Theme) =>
repos: {
paddingLeft: 0,
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap',
gap: '1.5rem',
},
repo: {
Expand Down

0 comments on commit 3440918

Please sign in to comment.