shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 20:37: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" }) => {
return (
<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}
>
<span className="">{text}</span>
@@ -527,7 +527,7 @@ const Preview = ({ file, handleUpload, handleDelete, onClick }: PreviewProps) =>
return (
<div
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 === "deleting" && "opacity-70",
)}
@@ -550,7 +550,7 @@ const Preview = ({ file, handleUpload, handleDelete, onClick }: PreviewProps) =>
/>
</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
file={file}
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);
return (
<div className="flex flex-col gap-4">
<Dropzone
key={id + key}
getUploadInfo={getUploadInfo}
handleDelete={handleDelete}
onUploaded={refresh}
onDeleted={refresh}
autoUpload
initialItems={_initialItems}
footer={
<Footer
items={_initialItems.length}
length={$q._data?.[0]?.body.meta.count ?? 0}
onFirstVisible={() => $q.setSize($q.size + 1)}
/>
}
{...props}
>
{children
? (props) => (
<DropzoneContainerContext.Provider value={props}>
{children}
</DropzoneContainerContext.Provider>
)
: undefined}
</Dropzone>
</div>
<Dropzone
key={id + key}
getUploadInfo={getUploadInfo}
handleDelete={handleDelete}
onUploaded={refresh}
onDeleted={refresh}
autoUpload
initialItems={_initialItems}
footer={
<Footer
items={_initialItems.length}
length={$q._data?.[0]?.body.meta.count ?? 0}
onFirstVisible={() => $q.setSize($q.size + 1)}
/>
}
{...props}
>
{children
? (props) => (
<DropzoneContainerContext.Provider value={props}>
{children}
</DropzoneContainerContext.Provider>
)
: undefined}
</Dropzone>
);
}