Skip to content

Tools Page Table mobile Adjustments #1473

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

Closed
wants to merge 13 commits into from
Closed

Tools Page Table mobile Adjustments #1473

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7f691da
adjusting the tables for mobile
idanidan29 Mar 2, 2025
c532c3e
small adjusment
idanidan29 Mar 2, 2025
522c976
Merge branch 'json-schema-org:main' into table-mobile-design
idanidan29 Mar 4, 2025
631febc
Merge branch 'json-schema-org:main' into table-mobile-design
idanidan29 Mar 6, 2025
e8a8439
Aligning the desktop version
idanidan29 Mar 6, 2025
3122b82
format adjustments
idanidan29 Mar 6, 2025
0dac678
more adjustments
idanidan29 Mar 6, 2025
3ae3a18
final format fixing
idanidan29 Mar 6, 2025
af0daea
testing format
idanidan29 Mar 6, 2025
3faaaeb
fianl format adjustment
idanidan29 Mar 6, 2025
0ed2015
adjusting the languages string
idanidan29 Mar 10, 2025
8ae5c02
adding the field name before each field value
idanidan29 Mar 11, 2025
892acc6
adjusting the bowtie field
idanidan29 Mar 18, 2025
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