Skip to content

Commit

Permalink
[Home/News][l]: makes gray background always visible and adds tooltip…
Browse files Browse the repository at this point in the history
… -- refs #105
  • Loading branch information
demenech committed Sep 15, 2022
1 parent 6fd1811 commit d3891f6
Showing 1 changed file with 28 additions and 24 deletions.
52 changes: 28 additions & 24 deletions components/home/main/News.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,19 @@ export default function News() {

const { posts } = data.posts;

// TODO: ideally it would display the latest posts
// or the best rated ones. Also, the error handling
// was done quickly just to get the page working
// and could be better written.
const headline = (text) => {
return (
<p className="absolute bottom-0
p-8 py-2 inset-x-0 line-clamp-2
text-lg font-avenir font-medium text-[#464646] group-hover:text-black
bg-slate-200 opacity-75 group-hover:opacity-90
transition-all leading-snug
">
{text}
</p>
);
};

return (
<>
<h2 className="block text-3xl text-center font-avenir font-extrabold">
Expand All @@ -40,9 +49,10 @@ export default function News() {
href={posts[0] ? `${AR('/ar')}/news/${posts[0]?.slug}` : ''}
onClick={(e) => (!posts[0] ? e.preventDefault() : null)}
className={`${posts[0] ? 'group' : 'cursor-auto'} h-full w-full`}
title={posts[0].title}
>
<div className="relative w-full h-full">
<span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-lg z-10" />
<span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-lg z-10" />
{posts[0] ? (
<img
alt={posts[0]?.title}
Expand All @@ -52,9 +62,7 @@ export default function News() {
) : (
<div className="w-full h-full" />
)}
<p className="absolute p-8 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
{posts[0]?.title}
</p>
{headline(posts[0]?.title)}
</div>
</a>
</div>
Expand All @@ -63,10 +71,11 @@ export default function News() {
href={posts[1] ? `${AR('/ar')}/news/${posts[1]?.slug}` : ''}
onClick={(e) => (!posts[1] ? e.preventDefault() : null)}
className={`${posts[1] ? 'group' : 'cursor-auto'} w-full`}
title={posts[1].title}
>
<div className="relative w-full pb-1">
<span
className={`absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 ${
className={`absolute left-0 bottom-0 w-full h-full border-b-4 ${
posts[1] ? 'border-[#22B373]' : ''
} rounded-b-lg z-10`}
/>
Expand All @@ -79,18 +88,17 @@ export default function News() {
) : (
<div className="w-full h-36" />
)}
<p className="absolute px-8 py-4 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
{posts[1]?.title}
</p>
{headline(posts[1]?.title)}
</div>
</a>
<a
href={posts[2] ? `${AR('/ar')}/news/${posts[2]?.slug}` : ''}
onClick={(e) => (!posts[2] ? e.preventDefault() : null)}
className={`${posts[2] ? 'group' : 'cursor-auto'} w-full`}
title={posts[2].title}
>
<div className="relative w-full pt-1">
<span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-lg z-10" />
<span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-lg z-10" />
{posts[2] ? (
<img
alt={posts[2]?.title}
Expand All @@ -100,9 +108,7 @@ export default function News() {
) : (
<div className="w-full h-60" />
)}
<p className="absolute px-8 py-4 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
{posts[2]?.title}
</p>
{headline(posts[2]?.title)}
</div>
</a>
</div>
Expand All @@ -111,9 +117,10 @@ export default function News() {
href={posts[3] ? `${AR('/ar')}/news/${posts[3]?.slug}` : ''}
onClick={(e) => (!posts[3] ? e.preventDefault() : null)}
className={`${posts[3] ? 'group' : 'cursor-auto'} w-full`}
title={posts[3].title}
>
<div className="relative w-full pb-1">
<span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-lg z-10" />
<span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-lg z-10" />
{posts[3] ? (
<img
alt={posts[3]?.title}
Expand All @@ -123,18 +130,17 @@ export default function News() {
) : (
<div className="w-full h-60" />
)}
<p className="absolute px-8 py-4 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
{posts[3]?.title}
</p>
{headline(posts[3]?.title)}
</div>
</a>
<a
href={posts[4] ? `${AR('/ar')}/news/${posts[4]?.slug}` : ''}
onClick={(e) => (!posts[4] ? e.preventDefault() : null)}
className={`${posts[4] ? 'group' : 'cursor-auto'} w-full`}
title={posts[4].title}
>
<div className="relative w-full pt-1">
<span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-lg z-10" />
<span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-lg z-10" />
{posts[4] ? (
<img
alt={posts[4]?.title}
Expand All @@ -144,9 +150,7 @@ export default function News() {
) : (
<div className="w-full h-36" />
)}
<p className="absolute px-8 py-4 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
{posts[4]?.title}
</p>
{headline(posts[3]?.title)}
</div>
</a>
</div>
Expand Down

0 comments on commit d3891f6

Please sign in to comment.