Merge pull request #80 from Tumao727/bugfix/safari-style

fix style problem on Safari

client/src/components/customTabList/CustomTabList.tsx

@@ -22,6 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginRight: theme.spacing(3),
   },
   tabPanel: {
+    flexBasis: 0,
     flexGrow: 1,
     marginTop: theme.spacing(2),
   },

client/src/components/grid/Table.tsx

@@ -17,10 +17,10 @@ import LoadingTable from './LoadingTable';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    // minHeight: '29vh',
     width: '100%',
     flexGrow: 1,
-    // flexBasis: 0,
+    /* set flex basis to make child item height 100% work on Safari */
+    flexBasis: 0,
 
     // change scrollbar style
     '&::-webkit-scrollbar': {

client/src/components/layout/Layout.tsx

@@ -3,10 +3,10 @@ import Header from './Header';
 import { makeStyles, Theme, createStyles } from '@material-ui/core';
 import NavMenu from '../menu/NavMenu';
 import { NavMenuItem } from '../menu/Types';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import icons from '../icons/Icons';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { authContext } from '../../context/Auth';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -41,18 +41,26 @@ const useStyles = makeStyles((theme: Theme) =>
 const Layout = (props: any) => {
   const history = useHistory();
   const { isAuth } = useContext(authContext);
-  const { t } = useTranslation('nav');
+  const { t: navTrans } = useTranslation('nav');
   const classes = useStyles();
+  const location = useLocation();
+  const defaultActive = useMemo(
+    () =>
+      location.pathname.includes('collection')
+        ? navTrans('collection')
+        : navTrans('overview'),
+    [location, navTrans]
+  );
 
   const menuItems: NavMenuItem[] = [
     {
       icon: icons.navOverview,
-      label: t('overview'),
+      label: navTrans('overview'),
       onClick: () => history.push('/'),
     },
     {
       icon: icons.navCollection,
-      label: t('collection'),
+      label: navTrans('collection'),
       onClick: () => history.push('/collections'),
     },
   ];
@@ -65,9 +73,9 @@ const Layout = (props: any) => {
             <NavMenu
               width="200px"
               data={menuItems}
-              defaultActive={t('overview')}
+              defaultActive={defaultActive}
               // used for nested child menu
-              defaultOpen={{ [t('overview')]: true }}
+              defaultOpen={{ [navTrans('overview')]: true }}
             />
           )}
 

client/src/i18n/cn/common.ts

@@ -1,6 +1,6 @@
 const commonTrans = {
   milvus: {
-    admin: 'Milvus Admin',
+    admin: 'Milvus Insight',
     address: 'Milvus Address',
   },
   status: {

client/src/i18n/en/common.ts

@@ -1,6 +1,6 @@
 const commonTrans = {
   milvus: {
-    admin: 'Milvus Admin',
+    admin: 'Milvus Insight',
     address: 'Milvus Address',
   },
   status: {

client/src/pages/collections/CreateFields.tsx

@@ -25,9 +25,14 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexWrap: 'nowrap',
     alignItems: 'center',
-    gap: '10px',
+    // only Safari 14.1+ support flexbox gap
+    // gap: '10px',
     width: '100%',
 
+    '& > *': {
+      marginLeft: '10px',
+    },
+
     '& .dimension': {
       maxWidth: '160px',
     },
@@ -37,10 +42,18 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   primaryInput: {
     maxWidth: '160px',
+
+    '&:first-child': {
+      marginLeft: 0,
+    },
   },
   select: {
     width: '160px',
     marginBottom: '22px',
+
+    '&:first-child': {
+      marginLeft: 0,
+    },
   },
   descInput: {
     minWidth: '270px',
@@ -50,6 +63,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     textTransform: 'uppercase',
   },
   iconBtn: {
+    marginLeft: 0,
+
     padding: 0,
     width: '20px',
     height: '20px',

client/src/pages/overview/collectionCard/CollectionCard.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginBottom: theme.spacing(2),
   },
   rowCount: {
-    marginLeft: theme.spacing(3),
+    marginLeft: theme.spacing(1),
   },
   divider: {
     marginBottom: theme.spacing(2),

client/src/styles/common.css

@@ -21,6 +21,9 @@ fieldset {
 
 /* used for fill remaining height of page */
 .page-wrapper {
+  /* set flex basis to make child item height 100% work on Safari */
+  flex-basis: 0;
+
   flex-grow: 1;
   display: flex;
   flex-direction: column;