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}>