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}
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
value={client.enabled}
setValue={onToggleMutation}

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

@ -108,29 +108,29 @@ function FeedSettings() {
>
{data && data.length > 0 ? (
<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
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")}>
Enabled <span className="sort-indicator">{sortedFeeds.getSortIndicator("enabled")}</span>
</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")}>
Name <span className="sort-indicator">{sortedFeeds.getSortIndicator("name")}</span>
</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")}>
Type <span className="sort-indicator">{sortedFeeds.getSortIndicator("type")}</span>
</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")}>
Last run <span className="sort-indicator">{sortedFeeds.getSortIndicator("last_run")}</span>
</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")}>
Next run <span className="sort-indicator">{sortedFeeds.getSortIndicator("next_run")}</span>
</div>
@ -172,36 +172,36 @@ function ListItem({ feed }: ListItemProps) {
};
return (
<li key={feed.id} className="text-gray-500 dark:text-gray-400">
<li key={feed.id}>
<FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed} />
<div className="grid grid-cols-12 items-center">
<div className="col-span-2 sm:col-span-1 pl-1 sm:pl-5 flex 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-6 flex items-center">
<Checkbox
value={feed.enabled}
setValue={toggleActive}
/>
</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">
<span>{feed.name}</span>
<span className="text-gray-900 dark:text-gray-500 text-xs">
<div className="col-span-9 md:col-span-4 pl-10 sm:pl-12 py-3 flex flex-col">
<span className="pr-2 dark:text-white truncate">{feed.name}</span>
<span className="pr-3 text-xs truncate">
{feed.indexer}
</span>
</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()]}
</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)}>
{IsEmptyDate(feed.last_run)}
</span>
</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)}>
{IsEmptyDate(feed.next_run)}
</span>
</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
feed={feed}
onToggle={toggleActive}

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

@ -137,7 +137,7 @@ function ListItem({ notification }: ListItemProps) {
<NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
<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
value={notification.enabled}
setValue={onToggleMutation}