M: Small layout fixes
This commit is contained in:
parent
1643cd737c
commit
c04ea8993e
|
@ -102,7 +102,7 @@ export function FormCreateItem() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form
|
<form
|
||||||
className='cc-fade-in cc-column min-w-120 max-w-120 mx-auto px-6 py-3'
|
className='cc-fade-in cc-column w-120 mx-auto px-6 py-3'
|
||||||
onSubmit={event => void handleSubmit(onSubmit)(event)}
|
onSubmit={event => void handleSubmit(onSubmit)(event)}
|
||||||
onChange={resetErrors}
|
onChange={resetErrors}
|
||||||
>
|
>
|
||||||
|
|
|
@ -53,7 +53,7 @@ export function LibraryPage() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ToolbarSearch total={libraryItems.length} filtered={filtered.length} />
|
<ToolbarSearch className='sticky top-0 h-9' total={libraryItems.length} filtered={filtered.length} />
|
||||||
<div className='relative cc-fade-in flex'>
|
<div className='relative cc-fade-in flex'>
|
||||||
<MiniButton
|
<MiniButton
|
||||||
className='absolute z-tooltip top-1 right-0 cc-animate-position'
|
className='absolute z-tooltip top-1 right-0 cc-animate-position'
|
||||||
|
|
|
@ -60,7 +60,7 @@ export function TableLibraryItems({ items }: TableLibraryItemsProps) {
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={items}
|
data={items}
|
||||||
headPosition='0'
|
headPosition='0'
|
||||||
className={clsx('text-xs sm:text-sm cc-scroll-y h-fit border-b', { 'border-l': folderMode })}
|
className={clsx('cc-scroll-y h-fit text-xs sm:text-sm border-b', { 'border-l': folderMode })}
|
||||||
style={{ maxHeight: tableHeight }}
|
style={{ maxHeight: tableHeight }}
|
||||||
noDataComponent={
|
noDataComponent={
|
||||||
<div className='cc-column dense p-3 items-center min-h-24'>
|
<div className='cc-column dense p-3 items-center min-h-24'>
|
||||||
|
|
|
@ -26,11 +26,12 @@ import { LocationHead } from '../../models/library';
|
||||||
import { useHasCustomFilter, useLibrarySearchStore } from '../../stores/librarySearch';
|
import { useHasCustomFilter, useLibrarySearchStore } from '../../stores/librarySearch';
|
||||||
|
|
||||||
interface ToolbarSearchProps {
|
interface ToolbarSearchProps {
|
||||||
|
className?: string;
|
||||||
total: number;
|
total: number;
|
||||||
filtered: number;
|
filtered: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ToolbarSearch({ total, filtered }: ToolbarSearchProps) {
|
export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps) {
|
||||||
const headMenu = useDropdown();
|
const headMenu = useDropdown();
|
||||||
const userMenu = useDropdown();
|
const userMenu = useDropdown();
|
||||||
|
|
||||||
|
@ -75,7 +76,7 @@ export function ToolbarSearch({ total, filtered }: ToolbarSearchProps) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='sticky top-0 h-9 flex gap-3 border-b text-sm clr-input items-center'>
|
<div className={clsx('flex gap-3 border-b text-sm clr-input items-center', className)}>
|
||||||
<div className='ml-3 min-w-18 sm:min-w-30 select-none whitespace-nowrap'>
|
<div className='ml-3 min-w-18 sm:min-w-30 select-none whitespace-nowrap'>
|
||||||
{filtered} из {total}
|
{filtered} из {total}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { toast } from 'react-toastify';
|
import { toast } from 'react-toastify';
|
||||||
import clsx from 'clsx';
|
|
||||||
|
|
||||||
import { useAuthSuspense } from '@/features/auth';
|
import { useAuthSuspense } from '@/features/auth';
|
||||||
import { HelpTopic } from '@/features/help';
|
import { HelpTopic } from '@/features/help';
|
||||||
|
@ -63,7 +62,7 @@ export function ViewSideLocation({ isVisible, onRenameLocation }: ViewSideLocati
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={clsx('max-w-40 sm:max-w-60', 'flex flex-col', 'text:xs sm:text-sm', 'select-none')}
|
className='max-w-40 sm:max-w-60 flex flex-col text:xs sm:text-sm select-none'
|
||||||
style={{
|
style={{
|
||||||
transitionProperty: 'width, min-width, opacity',
|
transitionProperty: 'width, min-width, opacity',
|
||||||
transitionDuration: `${PARAMETER.moveDuration}ms`,
|
transitionDuration: `${PARAMETER.moveDuration}ms`,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user