Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update modal and table styling #31

Merged
merged 4 commits into from
Aug 20, 2024
Merged

Update modal and table styling #31

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dbf8354
update td styling to have max height and bigger width
jojortz Aug 20, 2024
663f5b9
update addFileMOdal with Company name
jojortz Aug 20, 2024
e4d0dbf
Merge branch 'main' into jojo-branch
jojortz Aug 20, 2024
7d62c84
[fix] update project name in modal
jojortz Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions app/components/modals/sustainabilityReport/SustainabilityReportAddFileModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
const SustainabilityReportAddFileModal = () => {
const SustainabilityReportAddFileModal = useSustainabilityReportAddFileModal();
const [isLoading, setIsLoading] = useState(false);
const { reportsToAdd, setReportsToAdd, userId } = useSustainabilityStore();
const { reportsToAdd, setReportsToAdd, userId, projects } = useSustainabilityStore();
const { fetchAttributesThenProjects } = useFetchSustainabilityData();

const { handleSubmit, reset } = useForm<FieldValues>({});
Expand Down Expand Up @@ -75,7 +75,11 @@ const SustainabilityReportAddFileModal = () => {

const bodyContent = (
<div className="flex flex-col gap-4">
<Heading title="Add Files" subtitle="" center />
<Heading
title={`Add Files to ${projects.filter((project) => project.id === SustainabilityReportAddFileModal.projectId)[0].name}`}
subtitle=""
center
/>
{SustainabilityReportAddFileModal.addFileModalState === AddFileModalState.ADD_FILES && (
<>
<Dropzone />
Expand Down
20 changes: 11 additions & 9 deletions app/pages/sustainabilityreports/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ function Page() {
<table className="w-full min-w-max table-auto text-left">
<thead className="sticky top-0 z-20">
<tr className="border-b border-blue-gray-100 bg-blue-gray-50">
<th className="p-4 max-w-[175px] sticky left-0 z-30 bg-blue-gray-50">
<th className="p-4 min-w-[125px] max-w-[175px] sticky left-0 z-30 bg-blue-gray-50">
<Typography variant="small" color="blue-gray" className="font-normal leading-none opacity-70 ">
Company
</Typography>
Expand All @@ -227,7 +227,7 @@ function Page() {
</Typography>
</th>
{attributes.map((attribute: Attribute, i) => (
<th key={attribute.name + i} className="relative group p-4 w-[150px] xl:w-[225px]">
<th key={attribute.name + i} className="relative group p-4 w-[200px] xl:w-[300px]">
<div className="h-full flex items-center justify-between">
<Typography
variant="small"
Expand Down Expand Up @@ -275,34 +275,36 @@ function Page() {
const classes = isLast ? 'p-4' : 'p-4 border-b border-blue-gray-50';

return (
<tr key={index} className="border-b border-blue-gray-100">
<tr key={index} className="border-b border-blue-gray-100 max-h-[300px]">
<td className={`${classes} sticky left-0 z-10 bg-white`}>
<Typography
variant="paragraph"
color="blue-gray"
className="font-normal w-full overflow-auto text-nowrap"
className="font-normal w-full overflow-auto text-nowrap"
>
{name}
</Typography>
</td>
<td className={`${classes} w-[250px] h-auto`}>
<td className={`${classes} w-[250px] h-auto max-h-[300px] overflow-y-auto`}>
<FilesContainer reports={reports} projectId={id} />
</td>

{attributes.map((attribute: Attribute, index: number) => (
<td className={classes} key={index + name}>
<td className={`${classes} max-h-[300px] overflow-y-auto`} key={index + name}>
{attribute.id in projectResults && isNotEmpty(projectResults[attribute.id]) ? (
<div>{projectResults[attribute.id]}</div>
<div className="max-h-[300px] overflow-y-auto">{projectResults[attribute.id]}</div>
) : (
<div
className={`w-full h-[32px] rounded-lg bg-gray-300 flex justify-center items-center text-gray-600 ${status === GenerationStatus.GENERATING && ' bg-gray-400 animate-pulse'}`}
className={`w-full h-[32px] rounded-lg bg-gray-300 flex justify-center items-center text-gray-600 ${
status === GenerationStatus.GENERATING && 'bg-gray-400 animate-pulse'
}`}
>
{status !== GenerationStatus.GENERATING && 'None'}
</div>
)}
</td>
))}
<td className={'p-4 w-auto sticky right-0 z-10 bg-white'}>
<td className={'p-4 w-auto sticky right-0 z-10 bg-white max-h-[300px] overflow-y-auto'}>
{attributes.length > 0 && projects.length > 0 && (
<div className="h-full flex flex-row items-center justify-end">
<div className="h-full flex gap-2">
Expand Down
Loading