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): improve responsiveness on settings pages (#1270)

Browse source 
* fix(web): truncate feed name and adjust margins

This is to avoid clipping on narrow screens.
Bug: https://i.imgur.com/Aw3FzRK.png

* fix(web): fix boundaries and layout on feed page
fix(web): align switches on download client, feed and notification page

* fix(web): add truncate and margin to feed names

* correct truncate
change margin to padding

* inherit text styles

---------

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
Co-authored-by: Fabricio Silva <hi@fabricio.dev>
This commit is contained in:
soup 2023-11-22 20:12:18 +01:00 • committed by GitHub
parent f89a25d645
commit e6b3d6117e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -116,7 +116,7 @@ function ListItem({ client }: DLSettingsItemProps) {
isOpen={updateClientIsOpen} isOpen={updateClientIsOpen}
toggle={toggleUpdateClient} toggle={toggleUpdateClient}
/> />
<div className="col-span-2 sm:col-span-1 pl-1 sm:pl-5 flex items-center"> <div className="col-span-2 sm:col-span-1 pl-1 sm:pl-6 flex items-center">
<Checkbox <Checkbox
value={client.enabled} value={client.enabled}
setValue={onToggleMutation} setValue={onToggleMutation}

38
web/src/screens/settings/Feed.tsx
View file

@ -108,29 +108,29 @@ function FeedSettings() {
> >
{data && data.length > 0 ? ( {data && data.length > 0 ? (
<ul className="min-w-full relative"> <ul className="min-w-full relative">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700"> <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 font-medium uppercase tracking-wider">
<div <div
className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" className="flex col-span-2 sm:col-span-1 pl-4 py-3 cursor-pointer"
onClick={() => sortedFeeds.requestSort("enabled")}> onClick={() => sortedFeeds.requestSort("enabled")}>
Enabled <span className="sort-indicator">{sortedFeeds.getSortIndicator("enabled")}</span> Enabled <span className="sort-indicator">{sortedFeeds.getSortIndicator("enabled")}</span>
</div> </div>
<div <div
className="col-span-5 pl-10 sm:pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" className="col-span-4 pl-10 sm:pl-12 py-3 cursor-pointer"
onClick={() => sortedFeeds.requestSort("name")}> onClick={() => sortedFeeds.requestSort("name")}>
Name <span className="sort-indicator">{sortedFeeds.getSortIndicator("name")}</span> Name <span className="sort-indicator">{sortedFeeds.getSortIndicator("name")}</span>
</div> </div>
<div <div
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" className="hidden md:flex col-span-2 py-3 cursor-pointer"
onClick={() => sortedFeeds.requestSort("type")}> onClick={() => sortedFeeds.requestSort("type")}>
Type <span className="sort-indicator">{sortedFeeds.getSortIndicator("type")}</span> Type <span className="sort-indicator">{sortedFeeds.getSortIndicator("type")}</span>
</div> </div>
<div <div
className="hidden md:flex col-span-2 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" className="hidden md:flex col-span-2 px-4 py-3 cursor-pointer"
onClick={() => sortedFeeds.requestSort("last_run")}> onClick={() => sortedFeeds.requestSort("last_run")}>
Last run <span className="sort-indicator">{sortedFeeds.getSortIndicator("last_run")}</span> Last run <span className="sort-indicator">{sortedFeeds.getSortIndicator("last_run")}</span>
</div> </div>
<div <div
className="hidden md:flex col-span-2 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" className="hidden md:flex col-span-2 px-4 py-3 cursor-pointer"
onClick={() => sortedFeeds.requestSort("next_run")}> onClick={() => sortedFeeds.requestSort("next_run")}>
Next run <span className="sort-indicator">{sortedFeeds.getSortIndicator("next_run")}</span> Next run <span className="sort-indicator">{sortedFeeds.getSortIndicator("next_run")}</span>
</div> </div>
@ -172,36 +172,36 @@ function ListItem({ feed }: ListItemProps) {
}; };
return ( return (
<li key={feed.id} className="text-gray-500 dark:text-gray-400"> <li key={feed.id}>
<FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed} /> <FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed} />
<div className="grid grid-cols-12 items-center"> <div className="grid grid-cols-12 items-center text-sm font-medium text-gray-900 dark:text-gray-500">
<div className="col-span-2 sm:col-span-1 pl-1 sm:pl-5 flex items-center"> <div className="col-span-2 sm:col-span-1 pl-6 flex items-center">
<Checkbox <Checkbox
value={feed.enabled} value={feed.enabled}
setValue={toggleActive} setValue={toggleActive}
/> />
</div> </div>
<div className="col-span-8 sm:col-span-5 pl-10 sm:pl-12 py-3 flex flex-col text-sm font-medium text-gray-900 dark:text-white"> <div className="col-span-9 md:col-span-4 pl-10 sm:pl-12 py-3 flex flex-col">
<span>{feed.name}</span> <span className="pr-2 dark:text-white truncate">{feed.name}</span>
<span className="text-gray-900 dark:text-gray-500 text-xs"> <span className="pr-3 text-xs truncate">
{feed.indexer} {feed.indexer}
</span> </span>
</div> </div>
<div className="hidden md:flex col-span-1 py-3 items-center"> <div className="hidden md:flex col-span-2 py-3 items-center">
{ImplementationBadges[feed.type.toLowerCase()]} {ImplementationBadges[feed.type.toLowerCase()]}
</div> </div>
<div className="hidden md:flex col-span-2 py-3 items-center sm:px-4 text-sm font-medium text-gray-900 dark:text-gray-500"> <div className="hidden md:flex col-span-2 py-3 items-center sm:px-4">
<span title={simplifyDate(feed.last_run)}> <span title={simplifyDate(feed.last_run)}>
{IsEmptyDate(feed.last_run)} {IsEmptyDate(feed.last_run)}
</span> </span>
</div> </div>
<div className="hidden md:flex col-span-2 py-3 items-center sm:px-4 text-sm font-medium text-gray-900 dark:text-gray-500"> <div className="hidden md:flex col-span-2 py-3 items-center sm:px-4">
<span title={simplifyDate(feed.next_run)}> <span title={simplifyDate(feed.next_run)}>
{IsEmptyDate(feed.next_run)} {IsEmptyDate(feed.next_run)}
</span> </span>
</div> </div>
<div className="col-span-1 flex justify-center items-center sm:px-6"> <div className="col-span-1 md:col-span-1 sm:col-span-2 flex justify-center items-center md:px-6">
<FeedItemDropdown <FeedItemDropdown
feed={feed} feed={feed}
onToggle={toggleActive} onToggle={toggleActive}
@ -255,13 +255,13 @@ const FeedItemDropdown = ({
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries({ queryKey: feedKeys.lists() }); queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
toast.custom((t) => <Toast type="success" body={`Feed ${feed?.name} was force run successfully.`} t={t} />); toast.custom((t) => <Toast type="success" body={`Feed ${feed?.name} was force run successfully.`} t={t} />);
toggleForceRunModal(); toggleForceRunModal();
}, },
onError: (error: any) => { onError: (error: any) => {
toast.custom((t) => <Toast type="error" body={`Failed to force run ${feed?.name}. Error: ${error.message}`} t={t} />, { toast.custom((t) => <Toast type="error" body={`Failed to force run ${feed?.name}. Error: ${error.message}`} t={t} />, {
duration: 10000 duration: 10000
}); });
toggleForceRunModal(); toggleForceRunModal();
} }
}); });

2
web/src/screens/settings/Notifications.tsx
View file

@ -137,7 +137,7 @@ function ListItem({ notification }: ListItemProps) {
<NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} /> <NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
<div className="grid grid-cols-12 items-center py-2"> <div className="grid grid-cols-12 items-center py-2">
<div className="col-span-2 sm:col-span-1 pl-1 py-0.5 sm:pl-5 flex items-center"> <div className="col-span-2 sm:col-span-1 pl-1 py-0.5 sm:pl-6 flex items-center">
<Checkbox <Checkbox
value={notification.enabled} value={notification.enabled}
setValue={onToggleMutation} setValue={onToggleMutation}