Skip to content

fix: レスポンシブ対応した #80

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

Merged
takusandayooo merged 1 commit into from
Dec 20, 2025
Merged

fix: レスポンシブ対応した #80

Show file tree
Hide file tree
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
26 changes: 13 additions & 13 deletions frontend/src/features/edit/AiGenerationScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,9 +124,9 @@ export default function AiGenerationScreen({

if (viewState === "result" && generatedImage) {
return (
<div className="flex flex-col h-screen overflow-y-auto bg-neutral-100 p-6 text-foreground relative gap-6">
<div className="flex flex-col h-screen overflow-y-auto bg-neutral-100 p-4 md:p-6 text-foreground relative gap-4 md:gap-6">
{/* Header */}
<div className="flex flex-col items-start gap-4">
<div className="flex flex-col items-start gap-2 md:gap-4">
<button
type="button"
onClick={() => setViewState("chat")}
Expand All @@ -136,11 +136,11 @@ export default function AiGenerationScreen({
AI生成に戻る
</button>

<div className="flex items-center gap-3">
<div className="size-10 bg-white rounded-full flex items-center justify-center shadow-sm">
<InventoryIcon className="size-6 text-primary" />
<div className="flex items-center gap-2 md:gap-3">
<div className="size-8 md:size-10 bg-white rounded-full flex items-center justify-center shadow-sm">
<InventoryIcon className="size-5 md:size-6 text-primary" />
</div>
<h1 className="text-2xl font-bold text-primary">
<h1 className="text-xl md:text-2xl font-bold text-primary">
写真をAIで生成する
</h1>
</div>
Expand Down Expand Up @@ -173,10 +173,10 @@ export default function AiGenerationScreen({
}

return (
<div className="flex w-full py-8 px-8 items-center justify-center min-h-screen">
<div className="flex flex-col max-h-screen overflow-y-auto w-3/4 bg-neutral-100 p-6 text-foreground max-w-7xl rounded-3xl gap-6">
<div className="flex w-full p-4 md:p-8 items-center justify-center min-h-screen">
<div className="flex flex-col max-h-screen overflow-y-auto w-full md:w-3/4 bg-neutral-100 p-4 md:p-6 text-foreground max-w-7xl rounded-2xl md:rounded-3xl gap-4 md:gap-6">
{/* Header */}
<div className="flex flex-col items-start gap-4">
<div className="flex flex-col items-start gap-2 md:gap-4">
<button
type="button"
onClick={onBack}
Expand All @@ -186,11 +186,11 @@ export default function AiGenerationScreen({
画像アップロード画面に戻る
</button>

<div className="flex items-center gap-3">
<div className="size-10 bg-white rounded-full flex items-center justify-center shadow-sm">
<InventoryIcon className="size-6 text-primary" />
<div className="flex items-center gap-2 md:gap-3">
<div className="size-8 md:size-10 bg-white rounded-full flex items-center justify-center shadow-sm">
<InventoryIcon className="size-5 md:size-6 text-primary" />
</div>
<h1 className="text-2xl font-bold text-primary">
<h1 className="text-xl md:text-2xl font-bold text-primary">
写真をAIで生成する
</h1>
</div>
Expand Down
25 changes: 12 additions & 13 deletions frontend/src/features/edit/itemSelectDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ const FILTER_TYPES = [
{ id: "all", label: "すべて" },
{ id: "photo_frame", label: "フォトフレーム" },
{ id: "christmas", label: "クリスマス" },
{ id: "furniture", label: "家具" },
{ id: "accessory", label: "小物" },
{ id: "all_season", label: "その他" },
] as const;

function ItemCard({
Expand Down Expand Up @@ -99,35 +98,35 @@ export default function ItemSelectDialog({
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
showCloseButton={false}
className="max-w-[1100px] h-[90vh] bg-muted/95 border-2 border-white rounded-3xl p-10 flex flex-col gap-6"
className="w-[95vw] md:w-full max-w-[1100px] h-[90vh] bg-muted/95 border-2 border-white rounded-2xl md:rounded-3xl p-4 md:p-10 flex flex-col gap-4 md:gap-6"
>
<DialogHeader className="flex flex-row justify-between items-center gap-4 shrink-0">
<div className="flex gap-4 items-center">
<DialogHeader className="flex flex-row justify-between items-center gap-2 md:gap-4 shrink-0">
<div className="flex gap-2 md:gap-4 items-center">
<div className="bg-background p-2 rounded-2xl">
<InventoryIcon className="size-6 text-primary" />
<InventoryIcon className="size-5 md:size-6 text-primary" />
</div>
<DialogTitle className="text-2xl text-primary font-bold leading-none">
<DialogTitle className="text-xl md:text-2xl text-primary font-bold leading-none">
<span className="font-extrabold">{day}</span>日のアイテムを選ぶ
</DialogTitle>
</div>
<Button
onClick={handleConfirm}
disabled={!selectedItemId}
className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-xl px-4 py-3 gap-1"
className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-xl px-3 py-2 md:px-4 md:py-3 gap-1 h-auto"
>
<Check className="size-5" />
<span className="text-base font-bold">決定</span>
<Check className="size-4 md:size-5" />
<span className="text-sm md:text-base font-bold">決定</span>
</Button>
</DialogHeader>

<div className="flex items-center gap-2 shrink-0 overflow-x-auto">
<div className="flex items-center gap-2 shrink-0 overflow-x-auto pb-2 md:pb-0">
{FILTER_TYPES.map((filter) => (
<button
key={filter.id}
type="button"
onClick={() => setSelectedFilter(filter.id)}
className={cn(
"px-4 py-3 rounded-full text-sm font-bold transition-all",
"px-3 py-2 md:px-4 md:py-3 rounded-full text-xs md:text-sm font-bold transition-all whitespace-nowrap",
selectedFilter === filter.id
? "bg-[#920209] text-primary-foreground"
: "bg-background text-foreground",
Expand All @@ -144,7 +143,7 @@ export default function ItemSelectDialog({
<p className="text-muted-foreground text-base">読み込み中...</p>
</div>
) : (
<div className="grid grid-cols-6 gap-2 w-full">
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2 w-full">
{items.map((item) => (
<ItemCard
key={item.id}
Expand Down
33 changes: 17 additions & 16 deletions frontend/src/features/edit/uploadImg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,35 +130,35 @@ export default function UploadImg({
</div>
)}

<div className="bg-gray-100 rounded-lg p-10 w-3/4 my-auto">
<div className="bg-gray-100 rounded-lg p-4 md:p-10 w-full md:w-3/4 my-auto">
{/* Header */}
<div className="mb-8">
<div className="mb-6 md:mb-8">
{onBack && (
<Button
onClick={onBack}
disabled={isLoading}
className="bg-transparent hover:bg-transparent text-gray-600"
className="bg-transparent hover:bg-transparent text-gray-600 px-0 md:px-4 mb-2 md:mb-0"
>
<ChevronLeft className="size-4 mr-1" />
アイテム選択に戻る
</Button>
)}

<div className="flex items-center gap-3">
<div className="size-10 bg-white rounded-full flex items-center justify-center shadow-sm">
<InventoryIcon className="size-6 text-primary" />
<div className="size-8 md:size-10 bg-white rounded-full flex items-center justify-center shadow-sm shrink-0">
<InventoryIcon className="size-5 md:size-6 text-primary" />
</div>
<h1 className="text-2xl font-bold text-primary">
<h1 className="text-lg md:text-2xl font-bold text-primary">
フォトフレームに写真を入れる
</h1>
</div>
</div>

{/* Main Content */}
<div className="flex-1 flex items-start justify-center">
<div className=" max-w-6xl mx-auto flex items-center justify-center gap-12 w-full">
<div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-center gap-6 md:gap-12 w-full">
{/* Photo Frames Display */}
<div className="flex-1 flex justify-center items-center">
<div className="w-full md:flex-1 flex justify-center items-center">
{item && (
<div className="w-full bg-transparent rounded-sm flex items-center justify-center p-2">
{thumbnailUrl ? (
Expand All @@ -174,13 +174,13 @@ export default function UploadImg({
)}
</div>

<div className="flex-1 flex flex-col gap-6 max-w-lg mx-auto">
<div className="w-full md:flex-1 flex flex-col gap-4 md:gap-6 max-w-lg mx-auto">
{/* AI Generate Button */}
<div className="text-center w-full">
<Button
onClick={onAiGenerate}
disabled={isLoading}
className="w-full bg-red-800 hover:bg-red-900 text-white px-24 py-5 rounded-lg font-medium text-lg"
className="w-full bg-red-800 hover:bg-red-900 text-white py-5 rounded-lg font-medium text-base md:text-lg"
>
<Sparkles className="size-5 mr-2" />
AIで画像を生成する
Expand All @@ -202,7 +202,7 @@ export default function UploadImg({
<Button
variant="outline"
className={cn(
"w-full h-48 border-2 border-dashed rounded-lg flex flex-col gap-2 relative",
"w-full h-48 border-2 border-dashed rounded-lg flex flex-col gap-2 relative whitespace-normal",
dragOver
? "border-primary bg-primary/5"
: "border-muted-foreground/25",
Expand All @@ -214,11 +214,12 @@ export default function UploadImg({
disabled={isLoading}
asChild
>
<label>
<Upload className="size-6 text-muted-foreground" />
<div className="text-sm text-muted-foreground text-center">
<p>ここにドラッグ&ドロップかクリックでファイルを選択</p>
<p>【PNG/5MB以下】</p>
<label className="cursor-pointer flex flex-col items-center justify-center w-full h-full p-4">
<Upload className="size-6 text-muted-foreground mb-2" />
<div className="text-sm text-muted-foreground text-center w-full break-words">
<p>ここにドラッグ&ドロップか</p>
<p>クリックでファイルを選択</p>
<p className="mt-1 text-xs">【PNG/5MB以下】</p>
</div>
<input
type="file"
Expand Down