Skip to content

Commit dc32fbd

Browse files
KaichiManabeKaichiManabe
committed
ChatのCSSを変更(要修正)
1 parent f1e3058 commit dc32fbd

File tree

3 files changed

+98
-102
lines changed

3 files changed

+98
-102
lines changed

‎web/app/chat/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function ChatPageLayout({
1010
return (
1111
<NavigateByAuthState type="toLoginForUnauthenticated">
1212
<Header title="チャット/Chat" />
13-
<div className="grow overflow-y-auto">{children}</div>
13+
<div className="grow ">{children}</div>
1414
<BottomBar activeTab="3_chat" />
1515
</NavigateByAuthState>
1616
);

‎web/components/BottomBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function BottomBarCell({
3333
export default function BottomBar(props: Props) {
3434
const { activeTab } = props;
3535
return (
36-
<div className="flex w-full flex-row items-center justify-around ">
36+
<div className="flex w-full flex-row items-center justify-around">
3737
<BottomBarCell
3838
href="/home"
3939
isActive={activeTab === "0_home"}

‎web/components/chat/RoomWindow.tsx‎

Lines changed: 96 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export function RoomWindow(props: Props) {
2424
);
2525
}
2626

27-
console.log("rendering");
2827
useEffect(() => {
2928
(async () => {
3029
const lastM = room.messages.at(-1);
@@ -146,118 +145,115 @@ export function RoomWindow(props: Props) {
146145
);
147146

148147
return (
149-
<>
148+
<div className="flex h-full flex-col">
150149
{room.matchingStatus !== "matched" && (
151150
<FloatingMessage
152151
message="この人とはマッチングしていません。"
153152
friendId={friendId}
154153
showButtons={room.matchingStatus === "otherRequest"}
155154
/>
156155
)}
157-
158-
<div className="fixed top-14 z-50 w-full bg-white">
156+
<div className="w-full bg-white">
159157
<RoomHeader room={room} />
160158
</div>
161-
<div className="absolute top-14 right-0 left-0 flex flex-col overflow-y-auto">
162-
{messages && messages.length > 0 ? (
163-
<div className="flex-grow overflow-y-auto p-2" ref={scrollDiv}>
164-
{messages.map((m) =>
165-
m.isPicture ? (
166-
<img
167-
height="300px"
168-
width="300px"
169-
style={{
170-
maxHeight: "300px",
171-
maxWidth: "300px",
172-
float: m.creator === myId ? "right" : "left",
173-
}}
174-
key={m.id}
175-
alt=""
176-
src={API_ENDPOINT + m.content}
177-
/>
178-
) : (
179-
<div
180-
key={m.id}
181-
className={`mb-2 flex ${
182-
m.creator === myId ? "justify-end" : "justify-start"
183-
}`}
184-
>
185-
{editingMessageId === m.id ? (
186-
<div className="flex w-3/5 flex-col">
187-
<textarea
188-
value={editedContent}
189-
onChange={(e) => setEditedContent(e.target.value)}
190-
onKeyDown={(e) => {
191-
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
192-
commitEdit(editingMessageId, editedContent);
193-
}
194-
}}
195-
className="textarea textarea-bordered h-24 w-full"
196-
/>
197-
<div className="mt-2 flex justify-evenly gap-2">
198-
{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
199-
<button
200-
className="btn btn-primary"
201-
onClick={() =>
202-
commitEdit(editingMessageId, editedContent)
203-
}
204-
>
205-
保存
206-
</button>
207-
{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
208-
<button className="btn " onClick={cancelEdit}>
209-
キャンセル
210-
</button>
211-
</div>
159+
{messages && messages.length > 0 ? (
160+
<div className="flex-1 overflow-hidden p-2" ref={scrollDiv}>
161+
{messages.map((m) =>
162+
m.isPicture ? (
163+
<img
164+
height="300px"
165+
width="300px"
166+
style={{
167+
maxHeight: "300px",
168+
maxWidth: "300px",
169+
float: m.creator === myId ? "right" : "left",
170+
}}
171+
key={m.id}
172+
alt=""
173+
src={API_ENDPOINT + m.content}
174+
/>
175+
) : (
176+
<div
177+
key={m.id}
178+
className={`mb-2 flex ${
179+
m.creator === myId ? "justify-end" : "justify-start"
180+
}`}
181+
>
182+
{editingMessageId === m.id ? (
183+
<div className="flex w-3/5 flex-col">
184+
<textarea
185+
value={editedContent}
186+
onChange={(e) => setEditedContent(e.target.value)}
187+
onKeyDown={(e) => {
188+
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
189+
commitEdit(editingMessageId, editedContent);
190+
}
191+
}}
192+
className="textarea textarea-bordered h-24 w-full"
193+
/>
194+
<div className="mt-2 flex justify-evenly gap-2">
195+
{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
196+
<button
197+
className="btn btn-primary"
198+
onClick={() =>
199+
commitEdit(editingMessageId, editedContent)
200+
}
201+
>
202+
保存
203+
</button>
204+
{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
205+
<button className="btn " onClick={cancelEdit}>
206+
キャンセル
207+
</button>
212208
</div>
213-
) : (
214-
<div
215-
className={`rounded-xl p-2 shadow ${
216-
m.creator === myId ? "bg-secondary" : "bg-white"
217-
}`}
218-
>
219-
<p className="whitespace-pre-wrap break-words">
220-
{m.content}
221-
</p>
222-
{m.creator === myId && (
223-
<Dots
224-
actions={[
225-
{
226-
label: "編集",
227-
onClick: () => startEditing(m.id, m.content),
228-
alert: false,
229-
},
230-
{
231-
label: "削除",
232-
color: "red",
233-
onClick: () => deleteMessage(m.id, friendId),
234-
alert: true,
235-
messages: {
236-
buttonMessage: "削除",
237-
AlertMessage: "本当に削除しますか？",
238-
subAlertMessage: "この操作は取り消せません。",
239-
yesMessage: "削除",
240-
},
209+
</div>
210+
) : (
211+
<div
212+
className={`rounded-xl p-2 shadow ${
213+
m.creator === myId ? "bg-secondary" : "bg-white"
214+
}`}
215+
>
216+
<p className="whitespace-pre-wrap break-words">
217+
{m.content}
218+
</p>
219+
{m.creator === myId && (
220+
<Dots
221+
actions={[
222+
{
223+
label: "編集",
224+
onClick: () => startEditing(m.id, m.content),
225+
alert: false,
226+
},
227+
{
228+
label: "削除",
229+
color: "red",
230+
onClick: () => deleteMessage(m.id, friendId),
231+
alert: true,
232+
messages: {
233+
buttonMessage: "削除",
234+
AlertMessage: "本当に削除しますか？",
235+
subAlertMessage: "この操作は取り消せません。",
236+
yesMessage: "削除",
241237
},
242-
]}
243-
/>
244-
)}
245-
</div>
246-
)}
247-
</div>
248-
),
249-
)}
250-
</div>
251-
) : (
252-
<div className="text-center text-gray-500">
253-
最初のメッセージを送ってみましょう！
254-
</div>
255-
)}
256-
</div>
257-
<div className="fixed bottom-12 w-full bg-white p-0">
238+
},
239+
]}
240+
/>
241+
)}
242+
</div>
243+
)}
244+
</div>
245+
),
246+
)}
247+
</div>
248+
) : (
249+
<div className="flex-1 p-2 text-center text-gray-500">
250+
最初のメッセージを送ってみましょう！
251+
</div>
252+
)}
253+
<div className="w-full bg-white">
258254
<MessageInput reload={reload} send={sendDMMessage} room={room} />
259255
</div>
260-
</>
256+
</div>
261257
);
262258
}
263259

0 commit comments

Comments
 (0)