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

feat: fe mobile responsive next (#1609)

Browse Source
This commit is contained in:
Yuhao
2023-11-27 11:47:48 +08:00
committed by GitHub
parent 3cc697832a
commit a9c1c7d239
89 changed files with 768 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/components/datasets/settings/form/index.tsx
View File

@@ -24,13 +24,13 @@ import { useModalContext } from '@/context/modal-context'
import { useProviderContext } from '@/context/provider-context'
import { ensureRerankModelSelected, isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
const rowClass = `
flex justify-between py-4
flex justify-between py-4 flex-wrap gap-y-2
`
const labelClass = `
flex items-center w-[168px] h-9
`
const inputClass = `
w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none
w-full max-w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none
`
const useInitialValue: <T>(depend: T, dispatch: Dispatch<T>) => void = (depend, dispatch) => {
useEffect(() => {
@@ -118,14 +118,14 @@ const Form = () => {
useInitialValue<DataSet['indexing_technique'] | undefined>(currentDataset?.indexing_technique, setIndexMethod)
return (
<div className='w-[800px] px-16 py-6'>
<div className='w-full sm:w-[800px] p-4 sm:px-16 sm:py-6'>
<div className={rowClass}>
<div className={labelClass}>
<div>{t('datasetSettings.form.name')}</div>
</div>
<input
disabled={!currentDataset?.embedding_available}
className={cn(inputClass, !currentDataset?.embedding_available && 'opacity-60')}
className={cn(inputClass, !currentDataset?.embedding_available && 'opacity-60', 'h-9')}
value={name}
onChange={e => setName(e.target.value)}
/>
@@ -134,7 +134,7 @@ const Form = () => {
<div className={labelClass}>
<div>{t('datasetSettings.form.desc')}</div>
</div>
<div>
<div className='w-full max-w-[480px]'>
<textarea
disabled={!currentDataset?.embedding_available}
className={cn(`${inputClass} block mb-2 h-[120px] py-2 resize-none`, !currentDataset?.embedding_available && 'opacity-60')}
@@ -152,7 +152,7 @@ const Form = () => {
<div className={labelClass}>
<div>{t('datasetSettings.form.permissions')}</div>
</div>
<div className='w-[480px]'>
<div className='w-full sm:w-[480px]'>
<PermissionsRadio
disable={!currentDataset?.embedding_available}
value={permission}
@@ -167,7 +167,7 @@ const Form = () => {
<div className={labelClass}>
<div>{t('datasetSettings.form.indexMethod')}</div>
</div>
<div className='w-[480px]'>
<div className='w-full sm:w-[480px]'>
<IndexMethodRadio
disable={!currentDataset?.embedding_available}
value={indexMethod}

4
web/app/components/datasets/settings/index-method-radio/index.tsx
View File

@@ -5,7 +5,7 @@ import s from './index.module.css'
import type { DataSet } from '@/models/datasets'
const itemClass = `
w-[234px] p-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
w-full sm:w-[234px] p-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
`
const radioClass = `
w-4 h-4 border-[2px] border-gray-200 rounded-full
@@ -40,7 +40,7 @@ const IndexMethodRadio = ({
]
return (
<div className={classNames(s.wrapper, 'flex justify-between w-full')}>
<div className={classNames(s.wrapper, 'flex justify-between w-full flex-wrap gap-y-2')}>
{
options.map(option => (
<div

4
web/app/components/datasets/settings/permissions-radio/index.tsx
View File

@@ -5,7 +5,7 @@ import s from './index.module.css'
import type { DataSet } from '@/models/datasets'
const itemClass = `
flex items-center w-[234px] h-12 px-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
flex items-center w-full sm:w-[234px] h-12 px-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
`
const radioClass = `
w-4 h-4 border-[2px] border-gray-200 rounded-full
@@ -36,7 +36,7 @@ const PermissionsRadio = ({
]
return (
<div className={classNames(s.wrapper, 'flex justify-between w-full')}>
<div className={classNames(s.wrapper, 'flex justify-between w-full flex-wrap gap-y-2')}>
{
options.map(option => (
<div