jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - cards - cards modal footer alignment

Browse source
This commit is contained in:
Shekar Siri 2023-01-02 11:35:31 +01:00
parent b4982a55f3
commit 280d80b775
2 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
View file

@ -26,12 +26,14 @@ function MetricsLibraryModal(props: Props) {
return (
<>
<Modal.Header title="Cards Library" />
<Modal.Content>
<Modal.Content className='p-4 pb-20'>
<div className="border">
<MetricsList siteId={siteId} onSelectionChange={onSelectionChange} />
</div>
<SelectedContent dashboardId={dashboardId} selected={selectedList} />
</Modal.Content>
<Modal.Footer>
<SelectedContent dashboardId={dashboardId} selected={selectedList} />
</Modal.Footer>
</>
);
}
@ -49,7 +51,7 @@ function SelectedContent({ dashboardId, selected }: any) {
};
return (
<div className="flex items-center rounded border bg-gray-light-shade absolute justify-between p-3 left-4 right-4 bottom-4">
<div className="flex items-center rounded border bg-gray-light-shade justify-between p-3">
<div>
Selected <span className="font-medium">{selected.length}</span> of{' '}
<span className="font-medium">{total}</span>

4
frontend/app/components/Modal/Modal.tsx
View file

@ -50,4 +50,8 @@ Modal.Content = ({ children, className = 'p-4' }: { children: any; className?: s
return <div className={cn('overflow-y-auto relative', className)} style={{ height: 'calc(100vh - 52px)'}}>{children}</div>;
};
Modal.Footer = ({ children, className = ''} : any) => {
return <div className={cn('absolute bottom-0 w-full left-0 right-0', className)} style={{ }}>{children}</div>;
}
export default Modal;