idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 08:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): download client table overflow (#522)

Browse source 
* convert client table to grid

* too much data

* fix(web): download client table overflow
• Converted DownloadClient table into a responsive grid.
• Overflowing content will now truncate and hovering over it will show you the full value.
This commit is contained in:
xoaaC 2022-12-03 15:51:16 +01:00 • committed by GitHub
parent 2ae237015d
commit ef088c27ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

73
web/src/screens/settings/DownloadClient.tsx
View file

@ -36,13 +36,14 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
};
return (
<tr key={client.name} className={idx % 2 === 0 ? "light:bg-white" : "light:bg-gray-50"}>
<li key={client.name}>
<div className="grid grid-cols-12 gap-2 lg:gap-4 items-center py-2">
<DownloadClientUpdateForm
client={client}
isOpen={updateClientIsOpen}
toggle={toggleUpdateClient}
/>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<div className="col-span-3 sm:col-span-2 px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<Switch
checked={client.enabled}
onChange={onToggleMutation}
@ -60,16 +61,17 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
)}
/>
</Switch>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm truncate max-w-sm font-medium text-gray-900 dark:text-white">{client.name}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm truncate max-w-sm text-gray-500 dark:text-gray-400">{client.host}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm truncate max-w-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
</div>
<div className="col-span-7 sm:col-span-3 px-1 sm:px-0 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
<div className="hidden sm:block col-span-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
<div className="hidden sm:block col-span-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
<div className="col-span-1 whitespace-nowrap text-center text-sm font-medium">
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
Edit
</span>
</td>
</tr>
</div>
</div>
</li>
);
}
@ -110,52 +112,29 @@ function DownloadClientSettings() {
</div>
</div>
<div className="flex flex-col mt-6">
<div className="flex flex-col mt-6 px-4">
{data && data.length > 0 ?
<div className="-my-2 overflow-x-auto">
<div className="py-2 align-middle inline-block min-w-full">
<div className="light:shadow overflow-hidden light:border-b light:border-gray-200 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="light:bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
>
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
<ol className="min-w-full relative">
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
<div className="col-span-3 sm:col-span-2 px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Enabled
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
>
</div>
<div className="col-span-6 sm:col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Name
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
>
</div>
<div className="hidden sm:block col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Host
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
>
</div>
<div className="hidden sm:block col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Type
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="light:bg-white divide-y divide-gray-200 dark:divide-gray-700">
</div>
</li>
{data && data.map((client, idx) => (
<DownloadClientSettingsListItem client={client} idx={idx} key={idx} />
))}
</tbody>
</table>
</div>
</div>
</div>
</ol>
</section>
: <EmptySimple title="No download clients" subtitle="Add a new client" buttonText="New client" buttonAction={toggleAddClient} />
}
</div>