Skip to content

Commit

Permalink
Merge pull request #143 from QCDIS/fix-responsive-design
Browse files Browse the repository at this point in the history 
Fix responsive design
  • Loading branch information
@gpelouze
gpelouze authored Sep 15, 2023
2 parents 56a2cc2 + e4e6330 commit ba674ad
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 166 deletions.
1 change: 0 additions & 1 deletion .github/workflows/make.yml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
name: make
on:
pull_request:
push:
schedule:
- cron: '0 4 5,25 * *'
Expand Down
158 changes: 80 additions & 78 deletions vre-panel/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,91 +40,93 @@ const VLabs = ({}) => {
}, []);

return (
<div>
<div className="min-h-screen mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
<Nav/>
<div className='min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300 space-y-10 p-10'>
<div className="max-w-full rounded bg-white p-8">
<h1 className="text-2xl text-gray-800 mb-8">
{paasConfigLoading ? (
<span className="animate-pulse">
<span className="inline-block min-h-[1em] w-3/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
</span>
) : (
paasConfig.title
)}
</h1>
<p className="text-l text-gray-800">
{paasConfigLoading ? (
<span className="animate-pulse">
<span className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-current align-middle opacity-50"></span>
</span>
) : (
paasConfig.description
<div>
<div className="container mx-auto space-y-10 py-10">
<div className="max-w-full rounded shadow-lg bg-white p-8">
<h1 className="text-2xl text-gray-800 mb-8">
{paasConfigLoading ? (
<span className="animate-pulse">
<span className="inline-block min-h-[1em] w-3/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
</span>
) : (
paasConfig.title
)}
</h1>
<p className="text-l text-gray-800">
{paasConfigLoading ? (
<span className="animate-pulse">
<span className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-current align-middle opacity-50"></span>
</span>
) : (
paasConfig.description
)}
</p>
{paasConfigLoading || (
paasConfig.documentation_url && (
<p className="mt-4">
<a
href={paasConfig.documentation_url}
className="text-blue-800 hover:underline"
>
Documentation
</a>
</p>
)
)}
</p>
{paasConfigLoading || (
paasConfig.documentation_url && (
<p className="mt-4">
<a
href={paasConfig.documentation_url}
className="text-blue-800 hover:underline"
>
Documentation
</a>
</p>
)
)}
</div>
<div className='flex flex-row space-x-10'>
{vlabsLoading ? (
<div className="w-1/3 rounded overflow-hidden shadow-lg bg-white animate">
<div>
<img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
<div className="font-bold text-l mb-2 bg-gray-300 text-white p-5">
<p className="animate-pulse">
<span className="inline-block min-h-[1em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
</p>
</div>
<div className="px-3 py-2">
<p className="text-gray-700 text-base truncate animate-pulse ...">
<span className="inline-block min-h-[0.6em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
</p>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10'>
{vlabsLoading ? (
<div className="rounded overflow-hidden shadow-lg bg-white animate">
<div>
<img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
<div className="font-bold text-l mb-2 bg-gray-300 text-white p-5">
<p className="animate-pulse">
<span className="inline-block min-h-[1em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
</p>
</div>
<div className="px-3 py-2">
<p className="text-gray-700 text-base truncate animate-pulse ...">
<span className="inline-block min-h-[0.6em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
</p>
</div>
</div>
</div>
</div>
) : (
vlabs.length > 0 ? (
vlabs.map((vlab: any) => {
return (
<div key={getSlug(vlab.title)} className="w-1/3 rounded overflow-hidden shadow-lg bg-white">
<Link
href={{
pathname: '/vlabs/[slug]',
query: {slug: vlab.slug}
}}
>
<div>
<img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
<div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div>
<div className="px-3 py-2">
<p className="text-gray-700 text-base truncate ...">
{vlab.description}
</p>
</div>
</div>
</Link>
</div>
);
})
) : (
<div className="w-1/3 rounded overflow-hidden shadow-lg bg-white">
No virtual labs found
</div>
vlabs.length > 0 ? (
vlabs.map((vlab: any) => {
return (
<div key={getSlug(vlab.title)} className="rounded overflow-hidden shadow-lg bg-white">
<Link
href={{
pathname: '/vlabs/[slug]',
query: {slug: vlab.slug}
}}
>
<div>
<img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
<div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div>
<div className="px-3 py-2">
<p className="text-gray-700 line-clamp-2">
{vlab.description}
</p>
</div>
</div>
</Link>
</div>
);
})
) : (
<div className="rounded overflow-hidden shadow-lg bg-white">
No virtual labs found
</div>
)
)
)
}
}
</div>
<NewVREDialog isOpen={isOpen} setIsOpen={setIsOpen}/>
</div>
<NewVREDialog isOpen={isOpen} setIsOpen={setIsOpen}/>
</div>
</div>
)
Expand Down
171 changes: 87 additions & 84 deletions vre-panel/pages/vlabs/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,99 +101,102 @@ const VLabDetails: React.FC<VLabDetailsProps> = ({ token }) => {
}

return (
<div>
<div className="min-h-screen mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
<Nav />
<div className="grid grid-flow-row-dense grid-cols-4 grid-rows-5 gap-4 p-5 min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300">
<div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
<p className="text-4xl font-sans">{vlab.title}</p>
<a target="blank" href={vlab.endpoint}>
<button className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-5">
Launch
<div>
<div className="container mx-auto py-10 grid grid-flow-row-dense grid-cols-4 grid-rows-5 gap-4">
<div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
<p className="text-4xl font-sans">{vlab.title}</p>
<a target="blank" href={vlab.endpoint}>
<button className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-5">
Launch
</button>
</a>
<p className="h-64 mt-5 text-justify">{vlab.description}</p>
</div>
<div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
<p className="text-2xl font-sans">Workflows Runs</p>
<button type="button"
className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-5 cursor-pointer"
onClick={() => {fetchWorkflows().then(setWorkflows)}}>
<svg xmlns="http://www.w3.org/2000/svg" className={getSpinningButtonClass(loadingWorkflow)} viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clipRule="evenodd" />
</svg>
</button>
</a>
<p className="h-64 mt-5 text-justify">{vlab.description}</p>
</div>
<div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
<p className="text-2xl font-sans">Workflows Runs</p>
<button type="button"
className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-5 cursor-pointer"
onClick={() => {fetchWorkflows().then(setWorkflows)}}>
<svg xmlns="http://www.w3.org/2000/svg" className={getSpinningButtonClass(loadingWorkflow)} viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clipRule="evenodd" />
</svg>
</button>
<table className="table-auto bg-white mt-5">
<thead>
<table className="table-auto bg-white mt-5">
<thead>
<tr>
<th className="bg-blue-200 border text-left px-8 py-4">Name</th>
<th className="bg-blue-200 border text-left px-8 py-4">Status</th>
<th className="bg-blue-200 border text-left px-8 py-4">Progress</th>
</tr>
</thead>
{vlab != null ? (
<tbody>
{workflows.map((workflow) => {
return (
<tr key={workflow['argo_id']} className="odd:bg-gray-100">
<td className={"border py-2 px-4"}>
<a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
target="blank"
href={workflow['argo_url']}>
{workflow['argo_id']}
</a>
</td>
<td className={"border py-2 px-4 text-center"}>{workflow['status']}</td>
<td className={"border py-2 px-4 text-center"}>{workflow['progress']}</td>
</tr>
)
})}
</tbody>
) : (
</thead>
{vlab != null ? (
<tbody>
{workflows.map((workflow) => {
return (
<tr key={workflow['argo_id']} className="odd:bg-gray-100">
<td className={"border py-2 px-4"}>
<a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
target="blank"
href={workflow['argo_url']}>
{workflow['argo_id']}
</a>
</td>
<td className={"border py-2 px-4 text-center"}>{workflow['status']}</td>
<td className={"border py-2 px-4 text-center"}>{workflow['progress']}</td>
</tr>
)
})}
</tbody>
) : (
<tbody>
</tbody>
)}
</table>
</div>
<div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
<p className="text-2xl font-sans">Data products</p>
<button type="button"
className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-5 cursor-pointer"
onClick={() => {fetchDataProducts().then(setDataProducts)}}>
<svg xmlns="http://www.w3.org/2000/svg" className={getSpinningButtonClass(loadingDataProduct)} viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clipRule="evenodd" />
</svg>
</button>
<table className="table-auto bg-white mt-5">
<thead>
<tr>
<th className="bg-blue-200 border text-left px-8 py-4">Title</th>
<th className="bg-blue-200 border text-left px-8 py-4">Description</th>
</tr>
</thead>
<tbody>
{dataProducts.map((dataProduct) => {
return (
<tr key={dataProduct['uuid']} className="odd:bg-gray-100">
<td className={"border py-2 px-4"}>
<a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
target="blank"
href={dataProduct['data_url']}>
{dataProduct['title']}
</a>
</td>
<td className={"border py-2 px-4 text-left"}>{dataProduct['description']}</td>
</tr>
)
})}
</tbody>
)}
</table>
</div>
<div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
<p className="text-2xl font-sans">Data products</p>
<button type="button"
className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-5 cursor-pointer"
onClick={() => {fetchDataProducts().then(setDataProducts)}}>
<svg xmlns="http://www.w3.org/2000/svg" className={getSpinningButtonClass(loadingDataProduct)} viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clipRule="evenodd" />
</svg>
</button>
<table className="table-auto bg-white mt-5">
<thead>
<tr>
<th className="bg-blue-200 border text-left px-8 py-4">Title</th>
<th className="bg-blue-200 border text-left px-8 py-4">Description</th>
</tr>
</thead>
<tbody>
{dataProducts.map((dataProduct) => {
return (
<tr key={dataProduct['uuid']} className="odd:bg-gray-100">
<td className={"border py-2 px-4"}>
<a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
target="blank"
href={dataProduct['data_url']}>
{dataProduct['title']}
</a>
</td>
<td className={"border py-2 px-4 text-left"}>{dataProduct['description']}</td>
</tr>
)
})}
</tbody>
</table>
</div>
<div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
<CatalogMapView vlab_slug={slug}/>
</table>
</div>
<div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
<CatalogMapView vlab_slug={slug}/>
</div>

</div>
</div>
</div>
Expand Down
Loading

0 comments on commit ba674ad

Please sign in to comment.