Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive Web Design Fixes: News Page #145

Closed
wants to merge 1 commit into from
Closed

Responsive Web Design Fixes: News Page #145

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 93 additions & 91 deletions components/static/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,101 +36,103 @@ const List: React.FC = () => {
const { posts, meta } = data.posts;

return (
<div className="font-avenir mt-8 mb-12 px-4 sm:mx-12">
<h2
className={`text-2xl text-[#4D4D4D] font-extrabold tracking-tight capitalize px-2 mb-4 text-center ${AR(
'md:text-right',
'md:text-left'
)}`}
>
{t(meta.pagination.total == 1 ? 'article-found' : 'articles-found', {
count: meta.pagination.total,
})}
</h2>
<ul className="mb-10">
{posts.map((post, index) => (
<li
key={index}
className="group relative bg-[#F7FAFC] min-w-0 flex-1 xl:flex sm:items-center sm:justify-between mt-6 py-4 px-8 rounded-xl h-fit"
>
<div className="flex flex-cols items-center h-full z-10">
{/* Image */}
<div className="h-full min-w-[7rem] w-28 rounded-xl bg-gray-200">
<img
src={
post.image ||
`/images/topics/topic-${Math.floor(
Math.random() * (6 - 1 + 1) + 1
)}.png`
}
alt={post.title}
className="w-full object-scale-down object-center rounded-md"
/>
</div>
{/* Title, description & org */}
<div className="px-6 flex flex-col sm:justify-between h-full space-y-4 sm:space-y-0">
<Link href={`/news/${post.slug}`}>
{/* eslint-disable-next-line */}
<div className="container mx-auto">
<div className="font-avenir mt-8 mb-12 px-4 sm:mx-12">
<h2
className={`text-2xl text-[#4D4D4D] font-extrabold tracking-tight capitalize px-2 mb-4 text-center ${AR(
'md:text-right',
'md:text-left'
)}`}
>
{t(meta.pagination.total == 1 ? 'article-found' : 'articles-found', {
count: meta.pagination.total,
})}
</h2>
<ul className="mb-10">
{posts.map((post, index) => (
<li
key={index}
className="group relative bg-[#F7FAFC] min-w-0 flex-1 xl:flex sm:items-center sm:justify-between mt-6 py-6 px-4 md:px-6 md:py-6 rounded-xl h-fit"
>
<div className="flex flex-col sm:flex-row items-center h-full z-10">
{/* Image */}
<div className="h-full min-w-[7rem] w-[12rem] sm:w-28 rounded-xl bg-gray-200 mb-4 sm:mb-0">
<img
src={
post.image ||
`/images/topics/topic-${Math.floor(
Math.random() * (6 - 1 + 1) + 1
)}.png`
}
alt={post.title}
className="w-full object-scale-down object-center rounded-md"
/>
</div>
{/* Title, description & org */}
<div className="px-6 flex flex-col sm:justify-between h-full space-y-4 sm:space-y-0">
<Link href={`/news/${post.slug}`}>
{/* eslint-disable-next-line */}
<a className="block focus:outline-none space-y-2 xl:space-y-0">
<h1
className={`text-lg font-semibold text-[#202020] text-center ${AR(
'sm:text-right',
'sm:text-left'
)} max-w-xl`}
>
{post.title}
</h1>
<p
className={`text-sm font-medium text-[#7C7C7C] line-clamp-2 text-center ${AR(
'sm:text-right',
'sm:text-left'
)}`}
>
{post.excerpt}
</p>
</a>
</Link>
<div className="grow h-full"></div>
<div className="inline-flex items-center justify-center sm:justify-start py-1 xl:py-2 space-x-2 text-[#7C7C7C]">
<div className={`${AR('ml-4', 'mr-4')}`}>
<img
src="/images/time.svg"
alt="reading time"
className={`inline w-4 pb-1 grayscale ${AR(
'ml-1',
'mr-1'
)}`}
/>
<span className="text-xs text-center sm:text-left">
{post.readingTime} min read
</span>
</div>
<div>
<CalendarIcon className={`inline pb-1 w-4`} />
<span
className={`text-xs text-center sm:text-left ${AR(
'mr-1',
'ml-1'
)}`}
>
{timeago.format(post.published)}
</span>
<h1
className={`text-lg font-semibold text-[#202020] text-center ${AR(
'sm:text-right',
'sm:text-left'
)} max-w-xl`}
>
{post.title}
</h1>
<p
className={`text-sm font-medium text-[#7C7C7C] line-clamp-2 text-center ${AR(
'sm:text-right',
'sm:text-left'
)}`}
>
{post.excerpt}
</p>
</a>
</Link>
<div className="grow h-full"></div>
<div className="inline-flex items-center justify-center sm:justify-start py-1 xl:py-2 space-x-2 text-[#7C7C7C]">
<div className={`${AR('ml-4', 'mr-4')}`}>
<img
src="/images/time.svg"
alt="reading time"
className={`inline w-4 pb-1 grayscale ${AR(
'ml-1',
'mr-1'
)}`}
/>
<span className="text-xs text-center sm:text-left">
{post.readingTime} min read
</span>
</div>
<div>
<CalendarIcon className={`inline pb-1 w-4`} />
<span
className={`text-xs text-center sm:text-left ${AR(
'mr-1',
'ml-1'
)}`}
>
{timeago.format(post.published)}
</span>
</div>
</div>
</div>
</div>
</div>
</li>
))}
</ul>
<div className="flex justify-center">
<Pagination
count={meta?.pagination.total}
// TODO: pagination component should be more
// generic
setQvariables={() => null}
onPageChange={handlePageChange}
initAtPage={initialPage}
/>
</li>
))}
</ul>
<div className="flex justify-center">
<Pagination
count={meta?.pagination.total}
// TODO: pagination component should be more
// generic
setQvariables={() => null}
onPageChange={handlePageChange}
initAtPage={initialPage}
/>
</div>
</div>
</div>
);
Expand Down
Loading