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}

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

@@ -99,7 +99,6 @@ 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}
@@ -125,7 +124,6 @@ export function DropzoneContainer({
) )
: 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>