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

feat(web): settings cosmetic improvements (#621)

Browse source 
* Minor cosmetic changes

- Changed Feeds paragraph to include regular RSS feeds
- Centered "Danger Zone" header on Settings/Releases
- Added punctuations to subtitles and sublabes that were missing them
- Removed some subtitles over "Create new" buttons in Settings

* settings(releases) Added paragraph below header

* Changed user and docs icons

* Fixed Notifications table for narrow screens

* Made Notifications-page dynamic like the IRC-page

- Hiding notification type and events on smaller screens

* Made API table look better on smaller screens

- Adjusted col-spans
- overflow-auto on name

* overflow-hidden on name

* Made Feeds dynamic like Notifications

* Made Clients dynamic like Feeds and Notifications

* name field will now truncate instead of span itself over multiple lines
mouseovering the name will now show the full value
mitigated scrollbars
changes to col-span to move the name column closer to enabled switch
adjusted paddings in desktop and mobile layout

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
This commit is contained in:
soup 2023-01-06 22:07:27 +01:00 • committed by GitHub
parent 409dc236ff
commit ca4ad498a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 62 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -34,7 +34,7 @@ function FeedSettings() {
<div className="ml-4 mt-4">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Feeds</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
Manage Torznab feeds.
Manage RSS and Torznab feeds.
</p>
</div>
</div>
@ -44,16 +44,16 @@ function FeedSettings() {
<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-2 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
</div>
<div
className="col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
</div>
<div
className="col-span-2 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
className="hidden md:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
</div>
<div
className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last run
className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last run
</div>
{/*<div className="col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Events</div>*/}
</li>
@ -101,8 +101,8 @@ function ListItem({ feed }: ListItemProps) {
<li key={feed.id} className="text-gray-500 dark:text-gray-400">
<FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed}/>
<div className="grid grid-cols-12 gap-4 items-center py-4">
<div className="col-span-2 flex items-center sm:px-6 ">
<div className="grid grid-cols-12 gap-4 items-center">
<div className="col-span-3 px-6 flex items-center sm:px-6 ">
<Switch
checked={feed.enabled}
onChange={toggleActive}
@ -121,16 +121,16 @@ function ListItem({ feed }: ListItemProps) {
/>
</Switch>
</div>
<div className="col-span-4 flex flex-col sm:px-6 text-sm font-medium text-gray-900 dark:text-white">
<div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 flex flex-col px-6 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">
{feed.indexer}
</span>
</div>
<div className="col-span-2 flex items-center sm:px-6">
<div className="hidden md:flex col-span-3 py-3 flex items-center">
{ImplementationBadges[feed.type.toLowerCase()]}
</div>
<div className="col-span-3 flex items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-gray-500">
<div className="hidden md:flex col-span-2 py-3 flex items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-gray-500">
<span title={simplifyDate(feed.last_run)}>
{IsEmptyDate(feed.last_run)}
</span>