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

feat(web): mobile UI improvements (#359)

Browse source 
* enhancement: improved alerts component contrast
enhancement: simplified and improved radio switch group look
fix: fixed inconsistent spacing in input components (there's still some work left to be done)
fix: made slideover panel display on full width on mobile devices
enhancement: made forms more accessible to mobile users, adapter changes in accordance with the previous input components fix
fix: fixed misspelling in NotificationForms filename
chore: cleaned up code
fix: made filter table top edges less round and improved look
fix: fixed a bug where when a modal/slideover component was opened, a 1px white bar would be shown in one of the modal parent elements (for the fix see L89 in screens/settings/DwonloadClient.tsx)
enhancement: improved responsiveness for irc network list

* Fixed 2 small comma warnings from ESLint

Co-authored-by: anonymous <anonymous>
This commit is contained in:
stacksmash76 2022-07-17 23:34:49 +02:00 • committed by GitHub
parent f961115dac
commit 3da594ec75
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 758 additions and 640 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/components/inputs/input_wide.tsx
View file

@ -25,7 +25,7 @@ export const TextFieldWide = ({
required,
hidden
}: TextFieldWideProps) => (
<div hidden={hidden} className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div hidden={hidden} className="space-y-1 p-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4">
<div>
<label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
{label} {required && <span className="text-gray-500">*</span>}
@ -80,7 +80,7 @@ export const PasswordFieldWide = ({
const [isVisible, toggleVisibility] = useToggle(defaultVisible);
return (
<div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div className="space-y-1 p-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4">
<div>
<label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
{label} {required && <span className="text-gray-500">*</span>}
@ -134,7 +134,7 @@ export const NumberFieldWide = ({
defaultValue,
required
}: NumberFieldWideProps) => (
<div className="px-4 space-y-1 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div className="px-4 space-y-1 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4">
<div>
<label
htmlFor={name}
@ -187,7 +187,7 @@ export const SwitchGroupWide = ({
description,
defaultValue
}: SwitchGroupWideProps) => (
<ul className="mt-2 divide-y divide-gray-200 dark:divide-gray-700">
<ul className="mt-2 px-4 divide-y divide-gray-200 dark:divide-gray-700">
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<div className="flex flex-col">
<Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white"
@ -212,7 +212,7 @@ export const SwitchGroupWide = ({
type="button"
value={field.value}
checked={field.checked ?? false}
onChange={value => {
onChange={(value: unknown) => {
form.setFieldValue(field?.name ?? "", value);
}}
className={classNames(