klbr/LetterFeed
1
0
Fork 0
mirror of https://github.com/khoaliber/LetterFeed.git synced 2026-03-02 13:18:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: responsive layout

Browse Source
This commit is contained in:
Leon
2025-07-16 22:13:57 +02:00
parent 9f1eea4488
commit a3d42b51f4
5 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/letterfeed/EditNewsletterDialog.tsx
View File

@@ -89,7 +89,7 @@ export function EditNewsletterDialog({ newsletter, isOpen, onOpenChange, onSucce
return ( return (
<Dialog open={isOpen} onOpenChange={onOpenChange}> <Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent className="sm:max-w-[425px]">
<DialogHeader> <DialogHeader>
<DialogTitle>Edit Newsletter</DialogTitle> <DialogTitle>Edit Newsletter</DialogTitle>
<DialogDescription>Update the details for {newsletter.name}.</DialogDescription> <DialogDescription>Update the details for {newsletter.name}.</DialogDescription>

12
frontend/components/letterfeed/Header.tsx
View File

@@ -27,8 +27,8 @@ export function Header({ onOpenAddNewsletter, onOpenSettings }: HeaderProps) {
} }
return ( return (
<div className="flex items-center justify-between mb-8"> <div className="flex flex-col md:flex-row items-center justify-between mb-8">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4 mb-4 md:mb-0">
<Image <Image
src="/logo.png" src="/logo.png"
alt="LetterFeed Logo" alt="LetterFeed Logo"
@@ -37,14 +37,14 @@ export function Header({ onOpenAddNewsletter, onOpenSettings }: HeaderProps) {
className="rounded-lg" className="rounded-lg"
/> />
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">LetterFeed</h1> <h1 className="text-2xl md:text-3xl font-bold text-gray-900">LetterFeed</h1>
<p className="text-gray-600 mt-1"> <p className="text-gray-600 mt-1 hidden md:block">
Read your newsletters as RSS feeds! Newsletters as RSS feeds
</p> </p>
</div> </div>
</div> </div>
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
<Button onClick={onOpenAddNewsletter}> <Button onClick={onOpenAddNewsletter}>
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add Newsletter Add Newsletter

2
frontend/components/letterfeed/NewsletterList.tsx
View File

@@ -8,7 +8,7 @@ interface NewsletterListProps {
export function NewsletterList({ newsletters, onEditNewsletter }: NewsletterListProps) { export function NewsletterList({ newsletters, onEditNewsletter }: NewsletterListProps) {
return ( return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{newsletters.map((newsletter) => ( {newsletters.map((newsletter) => (
<NewsletterCard key={newsletter.id} newsletter={newsletter} onEdit={onEditNewsletter} /> <NewsletterCard key={newsletter.id} newsletter={newsletter} onEdit={onEditNewsletter} />
))} ))}

2
frontend/components/letterfeed/SettingsDialog.tsx
View File

@@ -98,7 +98,7 @@ export function SettingsDialog({
return ( return (
<Dialog open={isOpen} onOpenChange={onOpenChange}> <Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto"> <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle>Settings</DialogTitle> <DialogTitle>Settings</DialogTitle>
<DialogDescription> <DialogDescription>

2
frontend/src/app/page.tsx
View File

@@ -59,7 +59,7 @@ export default function LetterFeedApp() {
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Header <Header
onOpenAddNewsletter={() => setIsAddDialogOpen(true)} onOpenAddNewsletter={() => setIsAddDialogOpen(true)}
onOpenSettings={() => setIsSettingsOpen(true)} onOpenSettings={() => setIsSettingsOpen(true)}