ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: mobile UX friendly

Browse Source
This commit is contained in:
Tristan Yang
2023-02-15 10:04:26 +08:00
parent 476ffc344d
commit 56bd1557db
28 changed files with 71 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/FileMessage/VideoMessage.tsx
+4 -4
View File
@@ -37,17 +37,17 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
};
const tipClass = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
return (
<div className='w-64 h-32 md:w-96 md:h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'>
<div className='w-60 h-32 md:w-96 md:h-52 relative rounded-md border border-solid border-gray-300 dark:border-gray-700 overflow-hidden group'>
<div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
<div className="absolute top-0 left-0 w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20">
<div className="flex gap-2 ">
<IconVideo className="w-9 h-auto" />
<IconVideo className="hidden md:block w-9 h-auto" />
<div className="flex flex-col gap-1 text-sm text-white">
<span title={name} className='font-bold w-[240px] truncate'>{name}</span>
<span title={name} className='font-bold w-56 md:w-[240px] truncate'>{name}</span>
<span>{_size}</span>
</div>
</div>
<a href={download} className="mt-2"><IconDownload className="fill-white" /></a>
<a href={download} className="hidden md:block mt-2"><IconDownload className="fill-white" /></a>
</div>
{!canPlay ?
<div className={tipClass}>
src/common/component/FileMessage/index.tsx
+3 -3
View File
@@ -155,12 +155,12 @@ const FileMessage: FC<Props> = ({
/>
);
return (
<div className={clsx(`file_message bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border w-[370px] rounded-md`, sending && "opacity-90")}>
<div className={clsx(`bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border md:w-[370px] rounded-md`, sending && "opacity-90")}>
<div className="px-2 py-3 flex items-center justify-between gap-2">
{icon}
<div className="flex flex-col gap-1 w-full overflow-hidden">
<span className="font-semibold text-sm text-gray-800 dark:text-gray-100 truncate">{name}</span>
<span className="whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 flex gap-4">
<span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
{sending ? (
<Progress value={progress} width={"80%"} />
) : (
@@ -179,7 +179,7 @@ const FileMessage: FC<Props> = ({
{sending ? (
<IconClose className="cursor-pointer" onClick={handleCancel} />
) : (
<a className="whitespace-nowrap" download={name} href={`${content}&download=true`}>
<a className="hidden md:block whitespace-nowrap" download={name} href={`${content}&download=true`}>
<IconDownload className="fill-gray-500 dark:fill-gray-400" />
</a>
)}