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

fix(web): filters list desktop and mobile friendly (#659)

Browse source 
changed the resolution response from sm (640px) to 768px (md) for the indexer column
compacted the filter lines while maintaining the padding to the border when a filter name spans over multiple lines
span the filter name over the full width until the next div
fixed a duplicate display property
adjusted the width of the indexer and sort listbox for show the full values. (widths for both are uniform)
adjusted padding of indexer listbox entries
This commit is contained in:
martylukyy 2023-01-18 22:10:48 +01:00 • committed by GitHub
parent 21c02dfab0
commit 5d8131e211
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/src/screens/filters/list.tsx
View file

@ -149,7 +149,7 @@ function FilterList({ toggleCreateFilter }: any) {
</div> </div>
<div className="flex items-center gap-5"> <div className="flex items-center gap-5">
<div className="hidden sm:flex"><IndexerSelectFilter dispatch={dispatchFilter} /></div> <div className="hidden md:flex"><IndexerSelectFilter dispatch={dispatchFilter} /></div>
<SortSelectFilter dispatch={dispatchFilter} /> <SortSelectFilter dispatch={dispatchFilter} />
</div> </div>
</div> </div>
@ -390,7 +390,7 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
<li <li
key={filter.id} key={filter.id}
className={classNames( className={classNames(
"flex py-1 items-center hover:bg-gray-100 dark:hover:bg-[#222225] rounded-b-lg", "flex items-center hover:bg-gray-100 dark:hover:bg-[#222225] rounded-b-lg",
idx % 2 === 0 ? idx % 2 === 0 ?
"bg-white dark:bg-[#2e2e31]" : "bg-white dark:bg-[#2e2e31]" :
"bg-gray-50 dark:bg-gray-800" "bg-gray-50 dark:bg-gray-800"
@ -417,8 +417,8 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
/> />
</Switch> </Switch>
</span> </span>
<div className="flex flex-col overflow-hidden w-full justify-center"> <div className="py-2 flex flex-col overflow-hidden w-full justify-center">
<span className="w-4/5 break-words whitespace-wrap py-1 text-sm font-bold text-gray-900 dark:text-gray-100"> <span className="w-full break-words whitespace-wrap text-sm font-bold text-gray-900 dark:text-gray-100">
<Link <Link
to={filter.id.toString()} to={filter.id.toString()}
className="hover:text-black dark:hover:text-gray-300" className="hover:text-black dark:hover:text-gray-300"
@ -440,7 +440,7 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
</span> </span>
</div> </div>
</div> </div>
<span className="hidden sm:flex px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> <span className="hidden md:flex px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
<FilterIndexers indexers={filter.indexers} /> <FilterIndexers indexers={filter.indexers} />
</span> </span>
<span className="min-w-fit px-4 py-4 whitespace-nowrap text-right text-sm font-medium"> <span className="min-w-fit px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
@ -460,7 +460,7 @@ interface IndexerTagProps {
const IndexerTag: FC<IndexerTagProps> = ({ indexer }) => ( const IndexerTag: FC<IndexerTagProps> = ({ indexer }) => (
<span <span
key={indexer.id} key={indexer.id}
className="hidden sm:flex mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400" className="hidden sm:inline-flex mr-2 items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"
> >
{indexer.name} {indexer.name}
</span> </span>
@ -537,7 +537,7 @@ const ListboxFilter = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options <Listbox.Options
className="w-48 absolute z-10 w-full mt-1 right-0 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm" className="w-52 absolute z-10 mt-1 right-0 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
> >
{children} {children}
</Listbox.Options> </Listbox.Options>
@ -590,7 +590,7 @@ interface FilterOptionProps {
const FilterOption = ({ label, value }: FilterOptionProps) => ( const FilterOption = ({ label, value }: FilterOptionProps) => (
<Listbox.Option <Listbox.Option
className={({ active }) => classNames( className={({ active }) => classNames(
"cursor-pointer select-none relative py-2 pl-10 pr-4", "cursor-pointer select-none relative py-2 px-4",
active ? "text-black dark:text-gray-200 bg-gray-100 dark:bg-gray-900" : "text-gray-700 dark:text-gray-400" active ? "text-black dark:text-gray-200 bg-gray-100 dark:bg-gray-900" : "text-gray-700 dark:text-gray-400"
)} )}
value={value} value={value}