mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
fix(web): download client table overflow (#522)
* 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
GitHub
parent
2ae237015d
commit
ef088c27ad
1 changed files with 58 additions and 79 deletions
|
|
@ -36,40 +36,42 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr key={client.name} className={idx % 2 === 0 ? "light:bg-white" : "light:bg-gray-50"}>
|
<li key={client.name}>
|
||||||
<DownloadClientUpdateForm
|
<div className="grid grid-cols-12 gap-2 lg:gap-4 items-center py-2">
|
||||||
client={client}
|
<DownloadClientUpdateForm
|
||||||
isOpen={updateClientIsOpen}
|
client={client}
|
||||||
toggle={toggleUpdateClient}
|
isOpen={updateClientIsOpen}
|
||||||
/>
|
toggle={toggleUpdateClient}
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
/>
|
||||||
<Switch
|
<div className="col-span-3 sm:col-span-2 px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
checked={client.enabled}
|
<Switch
|
||||||
onChange={onToggleMutation}
|
checked={client.enabled}
|
||||||
className={classNames(
|
onChange={onToggleMutation}
|
||||||
client.enabled ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
|
className={classNames(
|
||||||
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
client.enabled ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
|
||||||
)}
|
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
>
|
)}
|
||||||
<span className="sr-only">Use setting</span>
|
>
|
||||||
<span
|
<span className="sr-only">Use setting</span>
|
||||||
aria-hidden="true"
|
<span
|
||||||
className={classNames(
|
aria-hidden="true"
|
||||||
client.enabled ? "translate-x-5" : "translate-x-0",
|
className={classNames(
|
||||||
"inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
client.enabled ? "translate-x-5" : "translate-x-0",
|
||||||
)}
|
"inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
||||||
/>
|
)}
|
||||||
</Switch>
|
/>
|
||||||
</td>
|
</Switch>
|
||||||
<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>
|
</div>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm truncate max-w-sm text-gray-500 dark:text-gray-400">{client.host}</td>
|
<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>
|
||||||
<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>
|
<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>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
<div className="hidden sm:block col-span-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
|
||||||
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
|
<div className="col-span-1 whitespace-nowrap text-center text-sm font-medium">
|
||||||
Edit
|
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
|
||||||
</span>
|
Edit
|
||||||
</td>
|
</span>
|
||||||
</tr>
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -110,52 +112,29 @@ function DownloadClientSettings() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col mt-6">
|
<div className="flex flex-col mt-6 px-4">
|
||||||
{data && data.length > 0 ?
|
{data && data.length > 0 ?
|
||||||
<div className="-my-2 overflow-x-auto">
|
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
||||||
<div className="py-2 align-middle inline-block min-w-full">
|
<ol className="min-w-full relative">
|
||||||
<div className="light:shadow overflow-hidden light:border-b light:border-gray-200 sm:rounded-lg">
|
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-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">
|
||||||
<thead className="light:bg-gray-50">
|
Enabled
|
||||||
<tr>
|
</div>
|
||||||
<th
|
<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">
|
||||||
scope="col"
|
Name
|
||||||
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">
|
||||||
Enabled
|
Host
|
||||||
</th>
|
</div>
|
||||||
<th
|
<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">
|
||||||
scope="col"
|
Type
|
||||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
|
</div>
|
||||||
>
|
</li>
|
||||||
Name
|
{data && data.map((client, idx) => (
|
||||||
</th>
|
<DownloadClientSettingsListItem client={client} idx={idx} key={idx} />
|
||||||
<th
|
))}
|
||||||
scope="col"
|
</ol>
|
||||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
|
</section>
|
||||||
>
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
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">
|
|
||||||
{data && data.map((client, idx) => (
|
|
||||||
<DownloadClientSettingsListItem client={client} idx={idx} key={idx} />
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: <EmptySimple title="No download clients" subtitle="Add a new client" buttonText="New client" buttonAction={toggleAddClient} />
|
: <EmptySimple title="No download clients" subtitle="Add a new client" buttonText="New client" buttonAction={toggleAddClient} />
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue