jamesf/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Merge two divs into one and set responsive layout that changes based on md size

Browse source
This commit is contained in:
Kaiwen Gong 2024-07-15 10:31:48 +08:00
parent 702e13b8dc
commit 5498fc945e
1 changed files with 4 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

19
ui/components/NewsPage.tsx
View file

@ -83,11 +83,11 @@ const NewsPage = () => {
{news.map(item => ( {news.map(item => (
<div <div
key={item.id} key={item.id}
className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 lg:mx-4" className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 md:mx-4"
> >
{/* Large Screen Layout */} {/* Large and Small Responsive Screen Layout */}
<Link href={`/news/${item.id}`} className="cursor-pointer hidden lg:flex flex-row"> <Link href={`/news/${item.id}`} className="cursor-pointer md:flex flex-row">
<img src={item.image} alt={item.title} className="w-32 h-32 object-cover rounded-lg" /> <img src={item.image} alt={item.title} className="w-full h-48 md:h-32 object-cover rounded-lg md:w-32" />
<div className="flex flex-col space-y-5 ml-4"> <div className="flex flex-col space-y-5 ml-4">
<h3 className="text-black dark:text-white lg:text-xl font-medium hover:underline">{item.title}</h3> <h3 className="text-black dark:text-white lg:text-xl font-medium hover:underline">{item.title}</h3>
<p className="text-black/70 dark:text-white/70 text-sm hover:text-black dark:hover:text-white"> <p className="text-black/70 dark:text-white/70 text-sm hover:text-black dark:hover:text-white">
@ -95,17 +95,6 @@ const NewsPage = () => {
</p> </p>
</div> </div>
</Link> </Link>
{/* Small Screen Layout */}
<div className="lg:hidden">
<img src={item.image} className="w-full h-48 object-cover rounded-lg" alt={item.title} />
<Link href={`/news/${item.id}`} className="cursor-pointer">
<h3 className="text-black dark:text-white lg:text-xl font-medium hover:underline">{item.title}</h3>
<p className="text-black/70 dark:text-white/70 text-sm hover:text-black dark:hover:text-white">
{item.summary}
</p>
</Link>
</div>
</div> </div>
))} ))}
</div> </div>