Skip to content

Tools Page Table mobile Adjustments #1584

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Tools Page Table mobile Adjustments #1584

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
67 changes: 63 additions & 4 deletions pages/tools/components/ToolingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,11 @@ const ToolingTable = ({
<Headline2>{toTitleCase(group, '-')}</Headline2>
</div>
)}
<div className='overflow-x-auto'>
<table className='min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
<div className='overflow-x-hidden'>
{/* Desktop Table */}
<table className='hidden lg:table min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
<thead>
<tr className='flex w-full min-w-[976px]'>
<tr className='flex w-full min-w-[860px]'>
<TableSortableColumnHeader
sortBy='name'
transform={transform}
Expand Down Expand Up @@ -269,6 +270,65 @@ const ToolingTable = ({
})}
</tbody>
</table>

{/* Mobile Table */}
<table className='lg:hidden min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
<tbody>
{toolsByGroup[group].map((tool: JSONSchemaTool, index) => {
const bowtieData = getBowtieData(tool);
if (bowtieData) {
tool.bowtie = bowtieData;
}
return (
<tr
key={index}
className='border-b border-gray-200 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer'
onClick={() => openModal(tool)}
>
<td className='p-2 relative'>
{bowtieData && (
<div className='absolute top-0 right-0 m-2 text-sm text-gray-600 dark:text-gray-300 flex items-center'>
<span>Bowtie:</span>
<a
href={`https://bowtie.report/#/implementations/${bowtieData.id}`}
target='blank'
onClick={(event) => event.stopPropagation()}
title='See at Bowtie'
className='ml-1'
>
<OutLinkIcon className='fill-none stroke-current w-5 h-5 stroke-2' />
</a>
</div>
)}

<div className='flex justify-between items-center'>
<div className='font-medium'>
{tool.name}
{tool.status === 'obsolete' && (
<Tag intent='error'>{tool.status}</Tag>
)}
</div>
</div>
<div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
Languages: {tool.languages?.join(', ')}
</div>
<div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
Supported Dialects:
</div>
<div className='flex flex-wrap gap-1 mt-1'>
{tool.supportedDialects?.draft?.map((draft) => (
<Badge key={draft}>{draft}</Badge>
))}
</div>
<div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
License: {tool.license}
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</section>
))}
Expand All @@ -278,7 +338,6 @@ const ToolingTable = ({
</>
);
};

const TableColumnHeader = ({
children,
attributes: propAttributes,
Expand Down