sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-30 10:53:02 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve responsive spacing of chat page footer buttons

Browse source 
- Remove x axis footer padding on small screens to preserve space,
  keep equal spacing between footer items
- Add 1rem margin to buttons to not have overlap in boundary
- Add 1rem y-axis padding to chat footer to not have focus boundary
  leave the footer boundary on smaller screens
This commit is contained in:
Debanjum Singh Solanky 2024-08-04 14:48:44 +05:30
parent 4f2fcc82f0
commit 60af173c4a
4 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/interface/web/app/chat/chat.module.css
View file

@ -18,8 +18,6 @@ div.inputBox {
border: 1px solid var(--border-color);
margin-bottom: 20px;
gap: 12px;
padding-left: 20px;
padding-right: 20px;
align-content: center;
}

2
src/interface/web/app/chat/page.tsx
View file

@ -86,7 +86,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
incomingMessages={props.streamedMessages}
/>
</div>
<div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3 dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}>
<div className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}>
<ChatInputArea
agentColor={agentMetadata?.color}
isLoggedIn={props.isLoggedIn}

17
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View file

@ -7,7 +7,6 @@ import { Progress } from "@/components/ui/progress"
import 'katex/dist/katex.min.css';
import {
ArrowCircleUp,
ArrowRight,
ArrowUp,
Browser,
@ -370,10 +369,10 @@ export default function ChatInputArea(props: ChatInputProps) {
/>
<Button
variant={'ghost'}
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
disabled={props.sendDisabled}
onClick={handleFileButtonClick}>
<Paperclip className='w-6 h-6 md:w-8 md:h-8' />
<Paperclip className='w-8 h-8' />
</Button>
<div className="grid w-full gap-1.5 relative">
<Textarea
@ -399,13 +398,13 @@ export default function ChatInputArea(props: ChatInputProps) {
<TooltipTrigger asChild>
<Button
variant={'ghost'}
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
onClick={() => {
setRecording(!recording);
}}
disabled={props.sendDisabled}
>
<Stop weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
<Stop weight='fill' className='w-8 h-8' />
</Button>
</TooltipTrigger>
<TooltipContent>
@ -423,14 +422,14 @@ export default function ChatInputArea(props: ChatInputProps) {
<TooltipTrigger asChild>
<Button
variant={'ghost'}
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
onClick={() => {
setMessage("Listening...");
setRecording(!recording);
}}
disabled={props.sendDisabled}
>
<Microphone weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
<Microphone weight='fill' className='w-8 h-8' />
</Button>
</TooltipTrigger>
<TooltipContent>
@ -441,10 +440,10 @@ export default function ChatInputArea(props: ChatInputProps) {
)
}
<Button
className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 h-auto text-3xl transition transform hover:-translate-y-1`}
className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 mr-1 h-auto text-3xl transition transform hover:-translate-y-1`}
onClick={onSendMessage}
disabled={props.sendDisabled}>
<ArrowUp className='w-4 h-4 md:w-6 md:h-6' weight='bold' />
<ArrowUp className='w-6 h-6' weight='bold' />
</Button>
</div >
</>

2
src/interface/web/app/page.tsx
View file

@ -184,7 +184,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
</div>
}
</div>
<div className={`ml-auto mr-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}>
<div className={`mx-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}>
{
!props.isMobileWidth &&
<div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none rounded-2xl`}>