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): floating "Import filter" dropdown button (#1102)

Browse source 
fix: incorrect z-height on "Import filter" dropdown button
This commit is contained in:
stacksmash76 2023-09-10 18:38:42 +02:00 • committed by GitHub
parent 1215036d89
commit 528405d1cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

96
web/src/screens/filters/List.tsx
View file

@ -141,55 +141,53 @@ export function Filters() {
<FilterAddForm isOpen={createFilterIsOpen} toggle={toggleCreateFilter} />
<div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
<h1 className="text-3xl font-bold text-black dark:text-white">Filters</h1>
<div className="relative">
<Menu>
{({ open }) => (
<>
<button
className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-l-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={(e: { stopPropagation: () => void; }) => {
if (!open) {
e.stopPropagation();
toggleCreateFilter();
}
}}
>
<PlusIcon className="h-5 w-5 mr-1" />
Add Filter
</button>
<Menu.Button className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
<ChevronDownIcon className="h-5 w-5" />
</Menu.Button>
<Transition
show={open}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 mt-0.5 w-46 bg-white dark:bg-gray-700 rounded-md shadow-lg">
<Menu.Item>
{({ active }) => (
<button
type="button"
className={`${active
? "bg-gray-50 dark:bg-gray-600"
: ""
} w-full text-left py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500`}
onClick={() => setShowImportModal(true)}
>
Import Filter
</button>
)}
</Menu.Item>
</Menu.Items>
</Transition>
</>
)}
</Menu>
</div>
<Menu as="div" className="relative">
{({ open }) => (
<>
<button
className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-l-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={(e: { stopPropagation: () => void; }) => {
if (!open) {
e.stopPropagation();
toggleCreateFilter();
}
}}
>
<PlusIcon className="h-5 w-5 mr-1" />
Add Filter
</button>
<Menu.Button className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
<ChevronDownIcon className="h-5 w-5" />
</Menu.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Menu.Items className="absolute z-10 right-0 mt-0.5 w-46 bg-white dark:bg-gray-700 rounded-md shadow-lg">
<Menu.Item>
{({ active }) => (
<button
type="button"
className={classNames(
active ? "bg-gray-50 dark:bg-gray-600" : "",
"w-full text-left py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500")}
onClick={() => setShowImportModal(true)}
>
Import Filter
</button>
)}
</Menu.Item>
</Menu.Items>
</Transition>
</>
)}
</Menu>
</div>
{showImportModal && (