fix: batch mobile layout fixes (#1641)

2024-11-16 11:42:29 +08:00 · 2023-11-28 20:05:19 +08:00 · 2023-11-28 20:05:19 +08:00 · 3c37fd37fa
commit 3c37fd37fa
parent cf0ba794d7
11 changed files with 42 additions and 49 deletions
--- a/web/app/(shareLayout)/layout.tsx
+++ b/web/app/(shareLayout)/layout.tsx
@ -6,11 +6,9 @@ const Layout: FC<{
  children: React.ReactNode
 }> = ({ children }) => {
  return (
-    <div className=''>
-      <div className="min-w-[300px]">
-        <GA gaType={GaType.webapp} />
-        {children}
-      </div>
+    <div className="min-w-[300px] h-full pb-[env(safe-area-inset-bottom)]">
+      <GA gaType={GaType.webapp} />
+      {children}
    </div>
  )
 }
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@ -17,6 +17,7 @@ import ModifyRetrievalModal from './modify-retrieval-modal'
 import type { HitTestingResponse, HitTesting as HitTestingType } from '@/models/datasets'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import Drawer from '@/app/components/base/drawer'
 import Pagination from '@/app/components/base/pagination'
 import FloatRightContainer from '@/app/components/base/float-right-container'
 import { fetchTestingRecords } from '@/service/datasets'
@ -206,7 +207,7 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
          }}
        />}
      </Modal>
-      {isShowModifyRetrievalModal && (
+      <Drawer isOpen={isShowModifyRetrievalModal} onClose={() => setIsShowModifyRetrievalModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
        <ModifyRetrievalModal
          indexMethod={currentDataset?.indexing_technique || ''}
          value={retrievalConfig}
@ -217,7 +218,7 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
            setIsShowModifyRetrievalModal(false)
          }}
        />
-      )}
+      </Drawer>
    </div>
  )
 }
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@ -66,9 +66,8 @@ const ModifyRetrievalModal: FC<Props> = ({

  return (
    <div
-      className='fixed top-16 right-2 flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10'
+      className='w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
      style={{
-        width: 632,
        height: 'calc(100vh - 72px)',
      }}
      ref={ref}
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@ -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>
--- a/web/app/components/explore/app-card/style.module.css
+++ b/web/app/components/explore/app-card/style.module.css
@ -1,7 +1,3 @@
-.wrap {
-  min-width: 312px;
-}
-
 .mode {
  display: flex;
  height: 28px;
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@ -97,14 +97,9 @@ const Apps: FC = () => {
        value={currCategory}
        onChange={setCurrCategory}
      />
-      <div
-        className='flex mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow'
-        style={{
-          maxHeight: 'calc(100vh - 243px)',
-        }}
-      >
+      <div className='flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow'>
        <nav
-          className={`${s.appList} grid content-start gap-4 px-12 shrink-0`}>
+          className={`${s.appList} grid content-start gap-4 px-6 sm:px-12 shrink-0`}>
          {currList.map(app => (
            <AppCard
              key={app.app_id}
--- a/web/app/components/explore/index.tsx
+++ b/web/app/components/explore/index.tsx
@ -33,7 +33,7 @@ const Explore: FC<IExploreProps> = ({
  }, [])

  return (
-    <div className='flex h-full bg-gray-100 border-t border-gray-200'>
+    <div className='flex h-full bg-gray-100 border-t border-gray-200 overflow-hidden'>
      <ExploreContext.Provider
        value={
          {
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@ -141,7 +141,7 @@ export default function AccountSetting({
            {
              menuItems.map(menuItem => (
                <div key={menuItem.key} className='mb-4'>
-                  <div className='px-2 mb-[6px] text-xs font-medium text-gray-500'>{menuItem.name}</div>
+                  <div className='px-2 mb-[6px] text-[10px] sm:text-xs font-medium text-gray-500'>{menuItem.name}</div>
                  <div>
                    {
                      menuItem.items.map(item => (
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@ -19,7 +19,7 @@ import LogoSite from '@/app/components/base/logo/logo-site'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'

 const navClassName = `
-  flex items-center relative mr-3 px-3 h-9 rounded-xl
+  flex items-center relative mr-0 sm:mr-3 px-3 h-9 rounded-xl
  font-medium text-sm
  cursor-pointer
 `
--- a/web/app/components/share/chat/index.tsx
+++ b/web/app/components/share/chat/index.tsx
@ -682,7 +682,7 @@ const Main: FC<IMainProps> = ({
  }

  return (
-    <div className='bg-gray-100 h-full'>
+    <div className='bg-gray-100 h-full flex flex-col'>
      {!isInstalledApp && (
        <Header
          title={siteInfo.title}
@ -719,8 +719,7 @@ const Main: FC<IMainProps> = ({
        )}
        {/* main */}
        <div className={cn(
-          isInstalledApp ? 'h-full' : 'h-[calc(100vh_-_3rem)] tablet:h-screen',
-          'flex-grow flex flex-col overflow-y-auto',
+          'h-full flex-grow flex flex-col overflow-y-auto',
        )
        }>
          <ConfigSence
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@ -8,6 +8,7 @@ import './styles/markdown.scss'

 export const metadata = {
  title: 'Dify',
+  viewport: 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no',
 }

 const LocaleLayout = ({
@ -19,6 +20,12 @@ const LocaleLayout = ({

  return (
    <html lang={locale ?? 'en'} className="h-full">
+      <head>
+        <meta name="theme-color" content="#FFFFFF" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+      </head>
      <body
        className="h-full select-auto"
        data-api-prefix={process.env.NEXT_PUBLIC_API_PREFIX}