ryan/simbarag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile-responsive-layout #9

Merged
ryan merged 9 commits from mobile-responsive-layout into main 2025-10-29 21:15:14 -04:00
Conversation 0 Commits 9 Files Changed 11 +46 -29
5 changed files with 46 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 19d1df2f68 - Show all commits

8
raggr-frontend/src/components/AnswerBubble.tsx
View File

@@ -7,7 +7,7 @@ type AnswerBubbleProps = {
export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => { export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
return ( return (
<div className="rounded-md bg-orange-100 p-3"> <div className="rounded-md bg-orange-100 p-3 sm:p-4">
{loading ? ( {loading ? (
<div className="flex flex-col w-full animate-pulse gap-2"> <div className="flex flex-col w-full animate-pulse gap-2">
<div className="flex flex-row gap-2 w-full"> <div className="flex flex-row gap-2 w-full">
@@ -20,8 +20,10 @@ export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex flex-col"> <div className="flex flex-col break-words overflow-wrap-anywhere">
<ReactMarkdown>{"🐈: " + text}</ReactMarkdown> <ReactMarkdown className="text-sm sm:text-base [&>*]:break-words">
{"🐈: " + text}
</ReactMarkdown>
</div> </div>
)} )}
</div> </div>

22
raggr-frontend/src/components/ChatScreen.tsx
View File

@@ -160,14 +160,14 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
<div className="h-screen bg-opacity-20"> <div className="h-screen bg-opacity-20">
<div className="bg-white/85 h-screen"> <div className="bg-white/85 h-screen">
<div className="flex flex-row justify-center py-4"> <div className="flex flex-row justify-center py-4">
<div className="flex flex-col gap-4 min-w-xl max-w-xl"> <div className="flex flex-col gap-4 w-full px-4 sm:w-11/12 sm:max-w-2xl lg:max-w-4xl sm:px-0">
<div className="flex flex-row justify-between"> <div className="flex flex-col sm:flex-row gap-3 sm:gap-0 sm:justify-between">
<header className="flex flex-row justify-center gap-2 sticky top-0 z-10 bg-white"> <header className="flex flex-row justify-center gap-2 sticky top-0 z-10 bg-white">
<h1 className="text-3xl">ask simba!</h1> <h1 className="text-2xl sm:text-3xl">ask simba!</h1>
</header> </header>
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2 justify-center sm:justify-end">
<button <button
className="p-2 border border-green-400 bg-green-200 hover:bg-green-400 cursor-pointer rounded-md" className="p-2 h-11 border border-green-400 bg-green-200 hover:bg-green-400 cursor-pointer rounded-md text-sm sm:text-base"
onClick={() => setShowConversations(!showConversations)} onClick={() => setShowConversations(!showConversations)}
> >
{showConversations {showConversations
@@ -175,7 +175,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
: "show conversations"} : "show conversations"}
</button> </button>
<button <button
className="p-2 border border-red-400 bg-red-200 hover:bg-red-400 cursor-pointer rounded-md" className="p-2 h-11 border border-red-400 bg-red-200 hover:bg-red-400 cursor-pointer rounded-md text-sm sm:text-base"
onClick={() => setAuthenticated(false)} onClick={() => setAuthenticated(false)}
> >
logout logout
@@ -198,26 +198,28 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
<footer className="flex flex-col gap-2 sticky bottom-0"> <footer className="flex flex-col gap-2 sticky bottom-0">
<div className="flex flex-row justify-between gap-2 grow"> <div className="flex flex-row justify-between gap-2 grow">
<textarea <textarea
className="p-4 border border-blue-200 rounded-md grow bg-white" className="p-3 sm:p-4 border border-blue-200 rounded-md grow bg-white min-h-[44px] resize-y"
onChange={handleQueryChange} onChange={handleQueryChange}
value={query} value={query}
rows={2}
/> />
</div> </div>
<div className="flex flex-row justify-between gap-2 grow"> <div className="flex flex-row justify-between gap-2 grow">
<button <button
className="p-4 border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow" className="p-3 sm:p-4 min-h-[44px] border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow text-sm sm:text-base"
onClick={() => handleQuestionSubmit()} onClick={() => handleQuestionSubmit()}
type="submit" type="submit"
> >
Submit Submit
</button> </button>
</div> </div>
<div className="flex flex-row justify-center gap-2 grow"> <div className="flex flex-row justify-center gap-2 grow items-center">
<input <input
type="checkbox" type="checkbox"
onChange={(event) => setSimbaMode(event.target.checked)} onChange={(event) => setSimbaMode(event.target.checked)}
className="w-5 h-5 cursor-pointer"
/> />
<p>simba mode?</p> <p className="text-sm sm:text-base">simba mode?</p>
</div> </div>
</footer> </footer>
</div> </div>

13
raggr-frontend/src/components/ConversationList.tsx
View File

@@ -38,22 +38,25 @@ export const ConversationList = ({
}, []); }, []);
return ( return (
<div className="bg-indigo-300 rounded-md p-3 flex flex-col"> <div className="bg-indigo-300 rounded-md p-3 sm:p-4 flex flex-col gap-1">
{conservations.map((conversation) => { {conservations.map((conversation) => {
return ( return (
<div <div
className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-2" key={conversation.id}
className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
onClick={() => onSelectConversation(conversation)} onClick={() => onSelectConversation(conversation)}
> >
<p>{conversation.title}</p> <p className="text-sm sm:text-base break-words">
{conversation.title}
</p>
</div> </div>
); );
})} })}
<div <div
className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-2" className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
onClick={() => onCreateNewConversation()} onClick={() => onCreateNewConversation()}
> >
<p> + Start a new thread</p> <p className="text-sm sm:text-base"> + Start a new thread</p>
</div> </div>
</div> </div>
); );

26
raggr-frontend/src/components/LoginScreen.tsx
View File

@@ -32,42 +32,48 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
<div className="h-screen bg-opacity-20"> <div className="h-screen bg-opacity-20">
<div className="bg-white/85 h-screen"> <div className="bg-white/85 h-screen">
<div className="flex flex-row justify-center py-4"> <div className="flex flex-row justify-center py-4">
<div className="flex flex-col gap-4 min-w-xl max-w-xl"> <div className="flex flex-col gap-4 w-full px-4 sm:w-11/12 sm:max-w-2xl lg:max-w-4xl sm:px-0">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex flex-grow justify-center w-full bg-amber-400"> <div className="flex flex-grow justify-center w-full bg-amber-400 p-2">
<h1 className="text-xl font-bold"> <h1 className="text-base sm:text-xl font-bold text-center">
I AM LOOKING FOR A DESIGNER. THIS APP WILL REMAIN UGLY UNTIL A I AM LOOKING FOR A DESIGNER. THIS APP WILL REMAIN UGLY UNTIL A
DESIGNER COMES. DESIGNER COMES.
</h1> </h1>
</div> </div>
<header className="flex flex-row justify-center gap-2 grow sticky top-0 z-10 bg-white"> <header className="flex flex-row justify-center gap-2 grow sticky top-0 z-10 bg-white">
<h1 className="text-3xl">ask simba!</h1> <h1 className="text-2xl sm:text-3xl">ask simba!</h1>
</header> </header>
<label htmlFor="username">username</label> <label htmlFor="username" className="text-sm sm:text-base">
username
</label>
<input <input
type="text" type="text"
id="username" id="username"
name="username" name="username"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
className="border border-s-slate-950 p-3 rounded-md" className="border border-s-slate-950 p-3 rounded-md min-h-[44px]"
/> />
<label htmlFor="password">password</label> <label htmlFor="password" className="text-sm sm:text-base">
password
</label>
<input <input
type="password" type="password"
id="password" id="password"
name="password" name="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className="border border-s-slate-950 p-3 rounded-md" className="border border-s-slate-950 p-3 rounded-md min-h-[44px]"
/> />
{error && ( {error && (
<div className="text-red-600 font-semibold">{error}</div> <div className="text-red-600 font-semibold text-sm sm:text-base">
{error}
</div>
)} )}
</div> </div>
<button <button
className="p-4 border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow" className="p-3 sm:p-4 min-h-[44px] border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow text-sm sm:text-base"
onClick={handleLogin} onClick={handleLogin}
> >
login login

6
raggr-frontend/src/components/QuestionBubble.tsx
View File

@@ -3,5 +3,9 @@ type QuestionBubbleProps = {
}; };
export const QuestionBubble = ({ text }: QuestionBubbleProps) => { export const QuestionBubble = ({ text }: QuestionBubbleProps) => {
return <div className="rounded-md bg-stone-200 p-3">🤦: {text}</div>; return (
<div className="rounded-md bg-stone-200 p-3 sm:p-4 break-words overflow-wrap-anywhere text-sm sm:text-base">
🤦: {text}
</div>
);
}; };