Move file manager buttons beside the breadcrumb, other tweaks

This commit is contained in:
Matthew Penner 2020-12-03 21:10:41 -07:00
parent 77abfd01ec
commit de1f7ea906
3 changed files with 31 additions and 27 deletions

View file

@ -5,23 +5,24 @@ import config from '../../../../tailwind.config';
const SubNavigation = styled.div`
${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
& > div {
${tw`flex items-center text-sm mx-auto px-2`};
max-width: 1200px;
& > a, & > div {
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-no-wrap transition-all duration-150`};
&:not(:first-of-type) {
${tw`ml-2`};
}
&:active, &:hover {
&:hover {
${tw`text-neutral-100`};
}
&:active, &:hover, &.active {
&:active, &.active {
${tw`text-neutral-100`};
box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
}
}

View file

@ -44,7 +44,7 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
};
return (
<div css={tw`flex items-center text-sm mb-4 text-neutral-500`}>
<div css={tw`flex flex-grow-0 items-center text-sm text-neutral-500 overflow-x-hidden`}>
{(files && files.length > 0 && !params?.action) ?
<FileActionCheckbox
type={'checkbox'}

View file

@ -51,9 +51,28 @@ export default () => {
return (
<ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
<ErrorBoundary>
<FileManagerBreadcrumbs/>
</ErrorBoundary>
<div css={tw`flex flex-wrap-reverse md:flex-no-wrap justify-center mb-4`}>
<ErrorBoundary>
<FileManagerBreadcrumbs/>
</ErrorBoundary>
<Can action={'file.create'}>
<ErrorBoundary>
<div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-no-wrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>
<NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
<UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
<NavLink
to={`/server/${id}/files/new${window.location.hash}`}
css={tw`flex-1 sm:flex-none sm:mt-0`}
>
<Button css={tw`w-full`}>
New File
</Button>
</NavLink>
</div>
</ErrorBoundary>
</Can>
</div>
{
!files ?
<Spinner size={'large'} centered/>
@ -83,22 +102,6 @@ export default () => {
</div>
</CSSTransition>
}
<Can action={'file.create'}>
<ErrorBoundary>
<div css={tw`flex flex-wrap-reverse justify-end mt-4`}>
<NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
<UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
<NavLink
to={`/server/${id}/files/new${window.location.hash}`}
css={tw`flex-1 sm:flex-none sm:mt-0`}
>
<Button css={tw`w-full`}>
New File
</Button>
</NavLink>
</div>
</ErrorBoundary>
</Can>
</>
}
</ServerContentBlock>