Skip to content

Commit 78ce9e3

Browse files
FedoseevSMFedoseevSM
committed
feat: ui adaptation
1 parent 917d319 commit 78ce9e3

3 files changed

Lines changed: 132 additions & 88 deletions

File tree

‎src/index.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,42 @@
5050
min-height: 120px;
5151
resize: vertical;
5252
}
53+
54+
/* Modal scroll fixes for mobile */
55+
.modal-overlay {
56+
position: fixed;
57+
inset: 0;
58+
background-color: rgba(0, 0, 0, 0.5);
59+
z-index: 50;
60+
overflow-y: auto;
61+
-webkit-overflow-scrolling: touch;
62+
}
63+
64+
.modal-content {
65+
min-height: 100vh;
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
padding: 1rem;
70+
}
71+
72+
.modal-dialog {
73+
width: 100%;
74+
max-width: 28rem; /* max-w-md */
75+
max-height: none;
76+
margin: auto;
77+
}
78+
79+
@media screen and (min-width: 768px) {
80+
.modal-content {
81+
min-height: auto;
82+
padding: 2rem;
83+
}
84+
85+
.modal-dialog {
86+
max-width: 42rem; /* max-w-2xl for larger modals */
87+
}
88+
}
5389
}
5490

5591
/* Global mobile optimizations */

‎src/pages/ForumPage.tsx‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -150,54 +150,58 @@ export function ForumPage() {
150150
</div>
151151

152152
{showCreateModal &&
153-
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
154-
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full mobile-form shadow-xl">
155-
<h2 className="text-xl font-bold mb-4">{t('createTopic')}</h2>
156-
<form onSubmit={handleCreateTopic} className="space-y-4">
157-
<div>
158-
<label className="block text-sm font-medium mb-1">
159-
{t('title')}
160-
</label>
161-
<input
162-
type="text"
163-
required
164-
value={newTopicTitle}
165-
onChange={(e) => setNewTopicTitle(e.target.value)}
166-
className="w-full mobile-input border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700" />
167-
168-
</div>
169-
<div>
170-
<label className="block text-sm font-medium mb-1">
171-
{t('content')}
172-
</label>
173-
<MarkdownEditor
174-
value={newTopicBody}
175-
onChange={setNewTopicBody}
176-
placeholder="Markdown supported..."
177-
rows={8}
178-
/>
179-
180-
</div>
181-
<div className="flex justify-end gap-3 mt-6">
182-
<button
183-
type="button"
184-
onClick={() => setShowCreateModal(false)}
185-
className="px-4 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
153+
<div className="modal-overlay">
154+
<div className="modal-content">
155+
<div className="bg-white dark:bg-gray-800 rounded-lg modal-dialog shadow-xl">
156+
<div className="p-6">
157+
<h2 className="text-xl font-bold mb-4">{t('createTopic')}</h2>
158+
<form onSubmit={handleCreateTopic} className="space-y-4">
159+
<div>
160+
<label className="block text-sm font-medium mb-1">
161+
{t('title')}
162+
</label>
163+
<input
164+
type="text"
165+
required
166+
value={newTopicTitle}
167+
onChange={(e) => setNewTopicTitle(e.target.value)}
168+
className="w-full mobile-input border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700" />
186169

187-
{t('cancel')}
188-
</button>
189-
<button
190-
type="submit"
191-
disabled={isCreating}
192-
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center gap-2 disabled:opacity-50">
170+
</div>
171+
<div>
172+
<label className="block text-sm font-medium mb-1">
173+
{t('content')}
174+
</label>
175+
<MarkdownEditor
176+
value={newTopicBody}
177+
onChange={setNewTopicBody}
178+
placeholder="Markdown supported..."
179+
rows={8}
180+
/>
193181

194-
{isCreating && <Loader2 className="w-4 h-4 animate-spin" />}
195-
{t('create')}
196-
</button>
197-
</div>
198-
</form>
182+
</div>
183+
<div className="flex justify-end gap-3 mt-6">
184+
<button
185+
type="button"
186+
onClick={() => setShowCreateModal(false)}
187+
className="px-4 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
188+
189+
{t('cancel')}
190+
</button>
191+
<button
192+
type="submit"
193+
disabled={isCreating}
194+
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center gap-2 disabled:opacity-50">
195+
196+
{isCreating && <Loader2 className="w-4 h-4 animate-spin" />}
197+
{t('create')}
198+
</button>
199+
</div>
200+
</form>
201+
</div>
199202
</div>
200203
</div>
204+
</div>
201205
}
202206
</div>);
203207

‎src/pages/HomePage.tsx‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -120,54 +120,58 @@ export function HomePage() {
120120
}
121121

122122
{showCreateModal &&
123-
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
124-
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full mobile-form shadow-xl">
125-
<h2 className="text-xl font-bold mb-4">{t('createBoard')}</h2>
126-
<form onSubmit={handleCreateForum} className="space-y-4">
127-
<div>
128-
<label className="block text-sm font-medium mb-1">
129-
{t('title')}
130-
</label>
131-
<input
132-
type="text"
133-
required
134-
value={newForumTitle}
135-
onChange={(e) => setNewForumTitle(e.target.value)}
136-
className="w-full mobile-input border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700" />
137-
138-
</div>
139-
<div>
140-
<label className="block text-sm font-medium mb-1">
141-
{t('description')}
142-
</label>
143-
<MarkdownEditor
144-
value={newForumDesc}
145-
onChange={setNewForumDesc}
146-
placeholder="Describe your forum..."
147-
rows={4}
148-
/>
149-
150-
</div>
151-
<div className="flex justify-end gap-3 mt-6">
152-
<button
153-
type="button"
154-
onClick={() => setShowCreateModal(false)}
155-
className="px-4 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
123+
<div className="modal-overlay">
124+
<div className="modal-content">
125+
<div className="bg-white dark:bg-gray-800 rounded-lg modal-dialog shadow-xl">
126+
<div className="p-6">
127+
<h2 className="text-xl font-bold mb-4">{t('createBoard')}</h2>
128+
<form onSubmit={handleCreateForum} className="space-y-4">
129+
<div>
130+
<label className="block text-sm font-medium mb-1">
131+
{t('title')}
132+
</label>
133+
<input
134+
type="text"
135+
required
136+
value={newForumTitle}
137+
onChange={(e) => setNewForumTitle(e.target.value)}
138+
className="w-full mobile-input border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700" />
156139

157-
{t('cancel')}
158-
</button>
159-
<button
160-
type="submit"
161-
disabled={isCreating}
162-
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center gap-2 disabled:opacity-50">
140+
</div>
141+
<div>
142+
<label className="block text-sm font-medium mb-1">
143+
{t('description')}
144+
</label>
145+
<MarkdownEditor
146+
value={newForumDesc}
147+
onChange={setNewForumDesc}
148+
placeholder="Describe your forum..."
149+
rows={4}
150+
/>
163151

164-
{isCreating && <Loader2 className="w-4 h-4 animate-spin" />}
165-
{t('create')}
166-
</button>
167-
</div>
168-
</form>
152+
</div>
153+
<div className="flex justify-end gap-3 mt-6">
154+
<button
155+
type="button"
156+
onClick={() => setShowCreateModal(false)}
157+
className="px-4 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
158+
159+
{t('cancel')}
160+
</button>
161+
<button
162+
type="submit"
163+
disabled={isCreating}
164+
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center gap-2 disabled:opacity-50">
165+
166+
{isCreating && <Loader2 className="w-4 h-4 animate-spin" />}
167+
{t('create')}
168+
</button>
169+
</div>
170+
</form>
171+
</div>
169172
</div>
170173
</div>
174+
</div>
171175
}
172176
</div>);
173177

0 commit comments

Comments
 (0)