Skip to content
This repository has been archived by the owner on May 24, 2022. It is now read-only.

Commit

Permalink
responsive spacing on press and blog list items
Browse files Browse the repository at this point in the history
  • Loading branch information
@zlonko
zlonko committed May 10, 2022
1 parent 872acdc commit 155864e
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 42 deletions.
48 changes: 27 additions & 21 deletions src/components/Blog/BlogListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,29 +35,35 @@ export const BlogListItem: FunctionComponent<PostIndexItem> = ({
</header>
{slugPath && (
<div className="card-body pt-0 d-flex flex-card">
<div className="flex-1 w-75">
{frontmatter.description ? (
<p>{truncate(frontmatter.description, { length: 300 })}</p>
) : (
<p>{excerpt}</p>
<div className="row">
<div className="col-md-9 pb-3 pb-md-0">
{frontmatter.description ? (
<p>{truncate(frontmatter.description, { length: 300 })}</p>
) : (
<p>{excerpt}</p>
)}
<div className="text-center text-sm-left">
<Link href={`/blog/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="font-weight-bold">Read more</a>
</Link>
</div>
</div>
{frontmatter.heroImage && (
<div className="col-md-3 d-flex justify-content-center">
<Link href={`/blog/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a>
<img
className="w-100"
src={frontmatter.heroImage}
alt={frontmatter.title}
/>
</a>
</Link>
</div>
)}
<Link href={`/blog/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="font-weight-bold">Read more</a>
</Link>
</div>
{frontmatter.heroImage && (
<Link href={`/blog/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a>
<img
className="max-w-100 max-h-150 flex-1 max-w-250"
src={frontmatter.heroImage}
alt={frontmatter.title}
/>
</a>
</Link>
)}
</div>
)}
</div>
Expand Down
48 changes: 27 additions & 21 deletions src/components/Blog/PressReleaseListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,29 +34,35 @@ export const PressReleaseListItem: FunctionComponent<PostIndexItem> = ({
</header>
{slugPath && (
<div className="card-body pt-0 d-flex flex-card">
<div className="flex-1 w-75">
{frontmatter.description ? (
<p>{truncate(frontmatter.description, { length: 300 })}</p>
) : (
<p>{excerpt}</p>
<div className="row w-100">
<div className="col-md-10 pb-3 pb-md-0">
{frontmatter.description ? (
<p>{truncate(frontmatter.description, { length: 300 })}</p>
) : (
<p>{excerpt}</p>
)}
<div className="text-center text-sm-left">
<Link href={`/press-release/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="font-weight-bold">Read more</a>
</Link>
</div>
</div>
{frontmatter.heroImage && (
<div className="col-md-2 d-flex justify-content-center">
<Link href={`/press-release/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a>
<img
className="max-h-150"
src={frontmatter.heroImage}
alt={frontmatter.title}
/>
</a>
</Link>
</div>
)}
<Link href={`/press-release/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="font-weight-bold">Read more</a>
</Link>
</div>
{frontmatter.heroImage && (
<Link href={`/press-release/${slugPath}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a>
<img
className="max-w-100 max-h-150 flex-1 max-w-250"
src={frontmatter.heroImage}
alt={frontmatter.title}
/>
</a>
</Link>
)}
</div>
)}
</div>
Expand Down

0 comments on commit 155864e

Please sign in to comment.