shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix media styling on mobile

Browse Source
This commit is contained in:
dswbx
2025-03-27 09:57:31 +01:00
parent e2bf6a0724
commit 7facef47da
5 changed files with 31 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/ui/elements/media/Dropzone.tsx
View File

@@ -463,7 +463,7 @@ const DropzoneInner = ({
const UploadPlaceholder = ({ onClick, text = "Upload files" }) => { const UploadPlaceholder = ({ onClick, text = "Upload files" }) => {
return ( return (
<div <div
className="w-[49%] aspect-[1/0.9] md:w-60 flex flex-col border-2 border-dashed border-muted relative justify-center items-center text-primary/30 hover:border-primary/30 hover:text-primary/50 hover:cursor-pointer hover:bg-muted/20 transition-colors duration-200" className="w-[49%] aspect-square md:w-60 flex flex-col border-2 border-dashed border-muted relative justify-center items-center text-primary/30 hover:border-primary/30 hover:text-primary/50 hover:cursor-pointer hover:bg-muted/20 transition-colors duration-200"
onClick={onClick} onClick={onClick}
> >
<span className="">{text}</span> <span className="">{text}</span>
@@ -527,7 +527,7 @@ const Preview = ({ file, handleUpload, handleDelete, onClick }: PreviewProps) =>
return ( return (
<div <div
className={twMerge( className={twMerge(
"w-[49%] md:w-60 flex flex-col border border-muted relative hover:bg-primary/5 cursor-pointer transition-colors", "w-[49%] md:w-60 aspect-square flex flex-col border border-muted relative hover:bg-primary/5 cursor-pointer transition-colors",
file.state === "failed" && "border-red-500 bg-red-200/20", file.state === "failed" && "border-red-500 bg-red-200/20",
file.state === "deleting" && "opacity-70", file.state === "deleting" && "opacity-70",
)} )}
@@ -550,7 +550,7 @@ const Preview = ({ file, handleUpload, handleDelete, onClick }: PreviewProps) =>
/> />
</div> </div>
)} )}
<div className="flex bg-primary/5 aspect-[1/0.8] overflow-hidden items-center justify-center"> <div className="flex bg-primary/5 aspect-[1/0.78] overflow-hidden items-center justify-center">
<PreviewWrapperMemoized <PreviewWrapperMemoized
file={file} file={file}
fallback={FallbackPreview} fallback={FallbackPreview}

52
app/src/ui/elements/media/DropzoneContainer.tsx
View File

@@ -99,33 +99,31 @@ export function DropzoneContainer({
const key = id + JSON.stringify(_initialItems); const key = id + JSON.stringify(_initialItems);
return ( return (
<div className="flex flex-col gap-4"> <Dropzone
<Dropzone key={id + key}
key={id + key} getUploadInfo={getUploadInfo}
getUploadInfo={getUploadInfo} handleDelete={handleDelete}
handleDelete={handleDelete} onUploaded={refresh}
onUploaded={refresh} onDeleted={refresh}
onDeleted={refresh} autoUpload
autoUpload initialItems={_initialItems}
initialItems={_initialItems} footer={
footer={ <Footer
<Footer items={_initialItems.length}
items={_initialItems.length} length={$q._data?.[0]?.body.meta.count ?? 0}
length={$q._data?.[0]?.body.meta.count ?? 0} onFirstVisible={() => $q.setSize($q.size + 1)}
onFirstVisible={() => $q.setSize($q.size + 1)} />
/> }
} {...props}
{...props} >
> {children
{children ? (props) => (
? (props) => ( <DropzoneContainerContext.Provider value={props}>
<DropzoneContainerContext.Provider value={props}> {children}
{children} </DropzoneContainerContext.Provider>
</DropzoneContainerContext.Provider> )
) : undefined}
: undefined} </Dropzone>
</Dropzone>
</div>
); );
} }

2
app/src/ui/layouts/AppShell/AppShell.tsx
View File

@@ -99,7 +99,7 @@ export function Main({ children }) {
export function Sidebar({ children }) { export function Sidebar({ children }) {
const open = appShellStore((store) => store.sidebarOpen); const open = appShellStore((store) => store.sidebarOpen);
const close = appShellStore((store) => store.closeSidebar); const close = appShellStore((store) => store.closeSidebar);
const ref = useClickOutside(close, null, [document.getElementById("header")]); const ref = useClickOutside(close, ["mouseup", "touchend"]); //, [document.getElementById("header")]);
const [location] = useLocation(); const [location] = useLocation();
const closeHandler = () => { const closeHandler = () => {

2
app/src/ui/layouts/AppShell/Header.tsx
View File

@@ -107,7 +107,7 @@ export function HeaderNavigation() {
function SidebarToggler() { function SidebarToggler() {
const toggle = appShellStore((store) => store.toggleSidebar); const toggle = appShellStore((store) => store.toggleSidebar);
const open = appShellStore((store) => store.sidebarOpen); const open = appShellStore((store) => store.sidebarOpen);
return <IconButton size="lg" Icon={open ? TbX : TbMenu2} onClick={toggle} />; return <IconButton id="toggle-sidebar" size="lg" Icon={open ? TbX : TbMenu2} onClick={toggle} />;
} }
export function Header({ hasSidebar = true }) { export function Header({ hasSidebar = true }) {

2
app/src/ui/routes/data/data.schema.$entity.tsx
View File

@@ -103,7 +103,7 @@ export function DataSchemaEntity({ params }) {
path={[{ label: "Schema", href: "/" }, { label: entity.label }]} path={[{ label: "Schema", href: "/" }, { label: entity.label }]}
backTo="/" backTo="/"
/> />
<Link to="/" className="invisible md:visible"> <Link to="/" className="hidden md:inline">
<Button IconLeft={TbSitemap}>Overview</Button> <Button IconLeft={TbSitemap}>Overview</Button>
</Link> </Link>
</div> </div>