admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: batch mobile layout fixes (#1641)

Browse Source
This commit is contained in:
Yuhao
2023-11-28 20:05:19 +08:00
committed by GitHub
parent cf0ba794d7
commit 3c37fd37fa
11 changed files with 42 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/app/components/explore/app-card/index.tsx
View File

@@ -30,31 +30,29 @@ const AppCard = ({
const { t } = useTranslation()
const { app: appBasicInfo } = app
return (
<div className={s.wrap}>
<div className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<AppIcon size='small' icon={app.app.icon} background={app.app.icon_background} />
<div className='relative h-8 text-sm font-medium leading-8 grow'>
<div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
</div>
<div className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<AppIcon size='small' icon={app.app.icon} background={app.app.icon_background} />
<div className='relative h-8 text-sm font-medium leading-8 grow'>
<div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
</div>
<div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
<div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
<div className={s.mode}>
<AppModeLabel mode={appBasicInfo.mode} />
</div>
<div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
<Button type='primary' className='grow flex items-center !h-7' onClick={() => onAddToWorkspace(appBasicInfo.id)}>
<PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
</div>
<div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
<div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
<div className={s.mode}>
<AppModeLabel mode={appBasicInfo.mode} />
</div>
<div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
<Button type='primary' className='grow flex items-center !h-7' onClick={() => onAddToWorkspace(appBasicInfo.id)}>
<PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
</Button>
{canCreate && (
<Button className='grow flex items-center !h-7 space-x-1' onClick={onCreate}>
{CustomizeBtn}
<span className='text-xs'>{t('explore.appCard.customize')}</span>
</Button>
{canCreate && (
<Button className='grow flex items-center !h-7 space-x-1' onClick={onCreate}>
{CustomizeBtn}
<span className='text-xs'>{t('explore.appCard.customize')}</span>
</Button>
)}
</div>
)}
</div>
</div>
</div>

4
web/app/components/explore/app-card/style.module.css
View File

@@ -1,7 +1,3 @@
.wrap {
min-width: 312px;
}
.mode {
display: flex;
height: 28px;