sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 15:38:55 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Align agents and automation page structure, widths and spacings

Browse source 
- Remove invalid call to styles.main
- Remove unnecessary top padding above side pane to keep side pane at
  consistent position across web app
- Use same pageLayout styles and styling structure on agent like
  automation
- Vertically center automation section and page title on it's row
- Fix applying flex vs grid with tailwind
This commit is contained in:
Debanjum Singh Solanky 2024-08-04 18:15:58 +05:30
parent 60af173c4a
commit c7b67a978e
3 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/interface/web/app/agents/agents.module.css
View file

@ -16,16 +16,17 @@ div.agentPersonality {
overflow: hidden;
}
div.pageLayout {
max-width: 60vw;
margin: auto;
margin-bottom: 2rem;
}
div.sidePanel {
position: fixed;
height: 100%;
}
div.pageLayout {
gap: 1rem;
}
button.infoButton {
border: none;
background-color: transparent !important;
@ -55,6 +56,10 @@ div.agentList {
grid-template-columns: 1fr;
}
div.pageLayout {
max-width: 90vw;
}
div.sidePanel {
position: relative;
height: 100%;

22
src/interface/web/app/agents/page.tsx
View file

@ -262,14 +262,8 @@ export default function Agents() {
}
return (
<main className={`${styles.main} w-full mx-auto`}>
{
showLoginPrompt &&
<LoginPrompt
loginRedirectMessage="Sign in to start chatting with a specialized agent"
onOpenChange={setShowLoginPrompt} />
}
<div className={`${styles.pageLayout} w-full mx-auto`}>
<main className={`w-full mx-auto`}>
<div className={`grid w-full mx-auto`}>
<div className={`${styles.sidePanel} top-0`}>
<SidePanel
conversationId={null}
@ -277,9 +271,9 @@ export default function Agents() {
isMobileWidth={isMobileWidth}
/>
</div>
<div className={`mx-auto ${isMobileWidth ? "w-11/12" : "w-1/2"} pt-4`}>
<div className={`pt-6 md:pt-8 flex justify-between align-middle w-full`}>
<h1 className="text-3xl">Agents</h1>
<div className={`${styles.pageLayout} w-full`}>
<div className={`pt-6 md:pt-8 flex justify-between`}>
<h1 className="text-3xl flex items-center">Agents</h1>
<div className="ml-auto float-right border p-2 pt-3 rounded-xl font-bold hover:bg-stone-100 dark:hover:bg-neutral-900">
<TooltipProvider>
<Tooltip>
@ -296,6 +290,12 @@ export default function Agents() {
</TooltipProvider>
</div>
</div>
{
showLoginPrompt &&
<LoginPrompt
loginRedirectMessage="Sign in to start chatting with a specialized agent"
onOpenChange={setShowLoginPrompt} />
}
<Alert className='bg-secondary border-none my-4'>
<AlertDescription>
<Lightning weight={'fill'} className='h-4 w-4 text-purple-400 inline' />

26
src/interface/web/app/automations/page.tsx
View file

@ -342,7 +342,7 @@ function AutomationsCard(props: AutomationsCardProps) {
</Popover>
</CardTitle>
</CardHeader>
<CardContent className='text-secondary-foreground'>
<CardContent className='text-secondary-foreground break-all'>
{updatedAutomationData?.query_to_run || automation.query_to_run}
</CardContent>
<CardFooter className="flex flex-col items-start md:flex-row md:justify-between md:items-center gap-2">
@ -873,7 +873,7 @@ function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
}}>
<DrawerTrigger asChild>
<Button
className='shadow-sm'
className='shadow-sm justify-start'
variant="outline">
<Plus className='h-4 w-4 mr-2' />
{props.callToAction}
@ -902,7 +902,7 @@ function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
>
<DialogTrigger asChild>
<Button
className='shadow-sm'
className='shadow-sm justify-start'
variant="outline">
<Plus className='h-4 w-4 mr-2' />
{props.callToAction}
@ -972,8 +972,8 @@ export default function Automations() {
if (error) return <InlineLoading message='Oops, something went wrong. Please refresh the page.' />;
return (
<main className={`${styles.main} w-full ml-auto mr-auto pt-4`}>
<div className={`grid w-full ml-auto mr-auto`}>
<main className={`w-full mx-auto`}>
<div className={`grid w-full mx-auto`}>
<div className={`${styles.sidePanel} top-0`}>
<SidePanel
conversationId={null}
@ -982,14 +982,13 @@ export default function Automations() {
/>
</div>
<div className={`${styles.pageLayout} w-full`}>
<div className='py-4 sm:flex sm:justify-between grid gap-1'>
<h1 className="text-3xl pt-6">Automations</h1>
<div className='pt-6 md:pt-8 grid gap-1 md:flex md:justify-between'>
<h1 className="text-3xl flex items-center">Automations</h1>
<div className='flex flex-wrap gap-2 items-center justify-start'>
{
authenticatedData ? (
<span className='rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm' ><Envelope className='h-4 w-4 mr-2 inline text-orange-500 shadow-sm' />{authenticatedData.email}</span>
)
: null
) : null
}
{
ipLocationData && (
@ -999,7 +998,6 @@ export default function Automations() {
{
ipLocationData && (
<span className='rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm' ><Clock className='h-4 w-4 mr-2 inline text-green-500' />{ipLocationData ? `${ipLocationData.timezone}` : 'Unknown'}</span>
)
}
</div>
@ -1007,17 +1005,17 @@ export default function Automations() {
{
showLoginPrompt && (
<LoginPrompt
onOpenChange={setShowLoginPrompt}
loginRedirectMessage={"Create an account to make your own automation"} />
loginRedirectMessage={"Create an account to make your own automation"}
onOpenChange={setShowLoginPrompt} />
)
}
<Alert className='bg-secondary border-none'>
<Alert className='bg-secondary border-none my-4'>
<AlertDescription>
<Lightning weight={'fill'} className='h-4 w-4 text-purple-400 inline' />
<span className='font-bold'>How it works</span> Automations help you structure your time by automating tasks you do regularly. Build your own, or try out our presets. Get results straight to your inbox.
</AlertDescription>
</Alert>
<div className='flex justify-between py-4'>
<div className='flex justify-between items-center py-4'>
<h3
className="text-xl">
Your Creations