🐛 Fix all ui bugs

idurar · Oct 29, 2023 · d35c51a · d35c51a
1 parent ff1bd88
commit d35c51a
Show file tree

Hide file tree

Showing 15 changed files with 96 additions and 88 deletions.
diff --git a/frontend/src/app/HeaderContent/index.jsx b/frontend/src/app/HeaderContent/index.jsx
@@ -116,6 +116,7 @@ export default function HeaderContent() {
             backgroundColor: !srcImgProfile ? '#fde3cf' : 'none',
             float: 'right',
           }}
+          size="large"
         >
           {currentAdmin?.name.charAt(0).toUpperCase()}
         </Avatar>
@@ -128,6 +129,7 @@ export default function HeaderContent() {
           dispatch(translateAction.translate('zh_cn'));
         }}
         style={{ float: 'right' }}
+        size="large"
       />
 
       <SelectLanguage />

diff --git a/frontend/src/app/index.jsx b/frontend/src/app/index.jsx
@@ -16,6 +16,7 @@ import { selectAuth } from '@/redux/auth/selectors';
 import { selectLangCode } from '@/redux/translate/selectors';
 
 import HeaderContent from '@/app/HeaderContent';
+import { useAppContext } from '@/context/appContext';
 // import { useNetworkState } from "react-use";
 
 function App() {
@@ -38,6 +39,9 @@ function App() {
   const [locale, setLocal] = useState(enUS);
   const [direction, setDirection] = useState('ltr');
 
+  const { state: stateApp, appContextAction } = useAppContext();
+  const { isNavMenuClose } = stateApp;
+
   useEffect(() => {
     if (langCode === 'fr_fr') {
       setDirection('ltr');
@@ -70,19 +74,16 @@ function App() {
         <Layout hasSider>
           <Navigation />
           <Layout
-            className="site-layout"
-            style={{
-              marginLeft: 230,
-            }}
+            className={isNavMenuClose ? 'smallNavigation site-layout' : 'wideNavigation layout'}
           >
             <HeaderContent />
             <Content
               style={{
                 margin: '60px auto 30px',
                 overflow: 'initial',
                 width: '100%',
-                maxWidth: '1100px',
               }}
+              className={isNavMenuClose ? 'wideAppContainer' : 'appContainer'}
             >
               <Router isLoggedIn={true} />
             </Content>

diff --git a/frontend/src/components/CollapseBox/index.jsx b/frontend/src/components/CollapseBox/index.jsx
@@ -44,13 +44,13 @@ export default function CollapseBox({
 }) {
   const collapsed = isCollapsed ? 'collapsed' : '';
   return (
-    <div className="panelBox">
+    <>
       <TopCollapseBox isOpen={isCollapsed}>{topContent}</TopCollapseBox>
       <div className={'collapseBox ' + collapsed}>
         <CollapseBoxButton title={buttonTitle} onChange={onCollapse} />
         <div className="whiteBg"></div>
         <BottomCollapseBox isOpen={isCollapsed}>{bottomContent}</BottomCollapseBox>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/frontend/src/components/SelectLanguage/index.jsx b/frontend/src/components/SelectLanguage/index.jsx
@@ -23,7 +23,7 @@ const SelectLanguage = () => {
       showSearch
       placeholder={translate('select language')}
       defaultValue={langCode}
-      style={{ width: '120px', float: 'right' }}
+      style={{ width: '120px', float: 'right', marginTop: '5px' }}
       optionFilterProp="children"
       filterOption={(input, option) => (option?.label ?? '').includes(input)}
       filterSort={(optionA, optionB) =>

diff --git a/frontend/src/components/SidePanel/index.jsx b/frontend/src/components/SidePanel/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useCrudContext } from '@/context/crud';
 import { useAppContext } from '@/context/appContext';
-import { Grid, Layout } from 'antd';
+import { Grid, Layout, Drawer } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
 import CollapseBox from '../CollapseBox';
 
@@ -20,9 +20,9 @@ export default function SidePanel({ config, topContent, bottomContent, fixHeader
   const [opacitySider, setOpacitySider] = useState(0);
   const [paddingTopSider, setPaddingTopSider] = useState('20px');
 
-  const { state: stateApp, appContextAction } = useAppContext();
-  const { isNavMenuClose } = stateApp;
-  const { navMenu } = appContextAction;
+  // const { state: stateApp, appContextAction } = useAppContext();
+  // const { isNavMenuClose } = stateApp;
+  // const { navMenu } = appContextAction;
 
   useEffect(() => {
     let timer = [];
@@ -41,9 +41,6 @@ export default function SidePanel({ config, topContent, bottomContent, fixHeader
         setOpacitySider(1);
         setPaddingTopSider(0);
       }, 200);
-      if (!isNavMenuClose) {
-        navMenu.close();
-      }
     }
 
     return () => clearTimeout(timer);
@@ -58,20 +55,12 @@ export default function SidePanel({ config, topContent, bottomContent, fixHeader
   };
 
   return (
-    <Sider
-      width={screens.md ? '400px' : '95%'}
-      collapsed={isSidePanelClose}
-      collapsedWidth={'0px'}
-      onCollapse={collapsePanel}
-      className="sidePanel"
-      zeroWidthTriggerStyle={{
-        right: '-50px',
-        top: '15px',
-      }}
-      style={{
-        left: leftSider,
-        zIndex: '100',
-      }}
+    <Drawer
+      title={config.PANEL_TITLE}
+      placement="right"
+      onClose={collapsePanel}
+      open={!isPanelClose}
+      width={450}
     >
       <div
         className="sidePanelContent"
@@ -89,6 +78,23 @@ export default function SidePanel({ config, topContent, bottomContent, fixHeader
           bottomContent={bottomContent}
         ></CollapseBox>
       </div>
-    </Sider>
+    </Drawer>
+    // <Sider
+    //   width={screens.md ? '400px' : '95%'}
+    //   collapsed={isSidePanelClose}
+    //   collapsedWidth={'0px'}
+    //   onCollapse={collapsePanel}
+    //   className="sidePanel"
+    //   zeroWidthTriggerStyle={{
+    //     right: '-50px',
+    //     top: '15px',
+    //   }}
+    //   style={{
+    //     left: leftSider,
+    //     zIndex: '100',
+    //   }}
+    // >
+
+    // </Sider>
   );
 }
diff --git a/frontend/src/context/appContext/reducer.jsx b/frontend/src/context/appContext/reducer.jsx
@@ -8,17 +8,14 @@ export function contextReducer(state, action) {
   switch (action.type) {
     case actionTypes.OPEN_NAV_MENU:
       return {
-        ...state,
         isNavMenuClose: false,
       };
     case actionTypes.CLOSE_NAV_MENU:
       return {
-        ...state,
         isNavMenuClose: true,
       };
     case actionTypes.COLLAPSE_NAV_MENU:
       return {
-        ...state,
         isNavMenuClose: !state.isNavMenuClose,
       };
 

diff --git a/frontend/src/lang/fr_fr.js b/frontend/src/lang/fr_fr.js
@@ -245,7 +245,7 @@ const lang = {
   interested: 'Intéressé',
   last_name: 'Nom de famille',
   manager_first_name: 'Prénom du responsable',
-  manager_last_name: 'Nom de famille du responsable',
+  manager_last_name: 'Nom de responsable',
   money_format_settings: 'Paramètres de format monétaire',
   new: 'Nouveau',
   not_interested: 'Pas intéressé',

diff --git a/frontend/src/layout/CrudLayout/index.jsx b/frontend/src/layout/CrudLayout/index.jsx
@@ -13,7 +13,7 @@ const ContentBox = ({ children }) => {
   const { state: stateCrud, crudContextAction } = useCrudContext();
   const { state: stateApp } = useAppContext();
   const { isPanelClose } = stateCrud;
-  const { isNavMenuClose } = stateApp;
+  // const { isNavMenuClose } = stateApp;
   const { panel } = crudContextAction;
 
   const [isSidePanelClose, setSidePanel] = useState(isPanelClose);
@@ -31,18 +31,18 @@ const ContentBox = ({ children }) => {
     return () => clearTimeout(timer);
   }, [isPanelClose]);
 
-  useEffect(() => {
-    if (!isNavMenuClose) {
-      panel.close();
-    }
-  }, [isNavMenuClose]);
+  // useEffect(() => {
+  //   if (!isNavMenuClose) {
+  //     panel.close();
+  //   }
+  // }, [isNavMenuClose]);
   return (
     <Content
       className="whiteBox shadow layoutPadding"
       style={{
-        margin: '100px auto',
-        width: isSidePanelClose ? '100%' : '830px',
-        maxWidth: '1000px',
+        margin: '30px auto',
+        width: '100%',
+        maxWidth: '100%',
         flex: 'none',
       }}
     >
@@ -61,17 +61,14 @@ export default function CrudLayout({
   return (
     <>
       <DefaultLayout>
-        <Layout style={{ minHeight: '100vh' }}>
-          <SidePanel
-            config={config}
-            topContent={sidePanelTopContent}
-            bottomContent={sidePanelBottomContent}
-            fixHeaderPanel={fixHeaderPanel}
-          ></SidePanel>
-          <Layout>
-            <ContentBox> {children}</ContentBox>
-          </Layout>
-        </Layout>
+        <SidePanel
+          config={config}
+          topContent={sidePanelTopContent}
+          bottomContent={sidePanelBottomContent}
+          fixHeaderPanel={fixHeaderPanel}
+        ></SidePanel>
+
+        <ContentBox> {children}</ContentBox>
       </DefaultLayout>
     </>
   );

diff --git a/frontend/src/layout/DashboardLayout/index.jsx b/frontend/src/layout/DashboardLayout/index.jsx
@@ -5,5 +5,13 @@ import { Layout } from 'antd';
 const { Content } = Layout;
 
 export default function DashboardLayout({ children }) {
-  return { children };
+  return (
+    <div
+      style={{
+        marginLeft: 140,
+      }}
+    >
+      {children}
+    </div>
+  );
 }
diff --git a/frontend/src/layout/ErpLayout/index.jsx b/frontend/src/layout/ErpLayout/index.jsx
@@ -13,7 +13,7 @@ export default function ErpLayout({ children, config }) {
         <Content
           className="whiteBox shadow layoutPadding"
           style={{
-            margin: '100px auto',
+            margin: '30px auto',
             width: '100%',
             maxWidth: '1100px',
             minHeight: '600px',

diff --git a/frontend/src/layout/SettingsLayout/index.jsx b/frontend/src/layout/SettingsLayout/index.jsx
@@ -18,7 +18,7 @@ const TopCard = ({ title, cardContent }) => {
       }}
     >
       <div className="pad20 strong" style={{ textAlign: 'center', justifyContent: 'center' }}>
-        <h2 style={{ color: '#22075e', marginBottom: 0 }}>{title}</h2>
+        <h2 style={{ color: '#22075e', marginBottom: 0, marginTop: 0 }}>{title}</h2>
       </div>
       {/* <Divider style={{ padding: 0, margin: 0 }}></Divider>
       <div className="pad15" style={{ textAlign: 'center', justifyContent: 'center' }}>
@@ -39,7 +39,7 @@ export default function SettingsLayout({
       <Content
         style={{
           padding: '30px 40px',
-          margin: '70px auto',
+          margin: '0px auto',
           width: '100%',
           maxWidth: '1100px',
         }}
@@ -53,9 +53,7 @@ export default function SettingsLayout({
             lg={{ span: 18 }}
           >
             <div className="whiteBox shadow" style={{ minHeight: '480px' }}>
-
               <Row className="pad40" gutter={[0, 0]}>
-
                 <Col span={24}>{children}</Col>
               </Row>
             </div>

diff --git a/frontend/src/modules/CrudModule/index.jsx b/frontend/src/modules/CrudModule/index.jsx
@@ -99,30 +99,14 @@ function FixHeaderPanel({ config }) {
   };
 
   return (
-    <div className="box">
-      <Row gutter={12}>
-        <Col className="gutter-row" span={22}>
-          <h1 style={{ fontSize: 20, marginBottom: 20 }}>{config.PANEL_TITLE}</h1>
-        </Col>
-        <Col className="gutter-row" span={2}>
-          <Button
-            type="text"
-            onClick={collapsePanel}
-            icon={<MenuFoldOutlined />}
-            block={true}
-            size="middle"
-          ></Button>
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col className="gutter-row" span={21}>
-          <SearchItem config={config} />
-        </Col>
-        <Col className="gutter-row" span={3}>
-          <Button onClick={addNewItem} block={true} icon={<PlusOutlined />}></Button>
-        </Col>
-      </Row>
-    </div>
+    <Row gutter={8}>
+      <Col className="gutter-row" span={21}>
+        <SearchItem config={config} />
+      </Col>
+      <Col className="gutter-row" span={3}>
+        <Button onClick={addNewItem} block={true} icon={<PlusOutlined />}></Button>
+      </Col>
+    </Row>
   );
 }
 

diff --git a/frontend/src/style/app.css b/frontend/src/style/app.css
@@ -2,6 +2,7 @@
 
 @import './partials/rest';
 @import './partials/customAntd';
+@import './partials/layout';
 @import './partials/core';
 
 @import './partials/dashboard';

diff --git a/frontend/src/style/partials/collapseBox.css b/frontend/src/style/partials/collapseBox.css
@@ -3,9 +3,9 @@
   transition: all 0.3s ease;
 }
 .collapseBoxHeader {
-  width: 100%;
+  /* width: 100%; */
   padding: 17px 30px;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
   text-align: center;
   font-size: 14px;
   text-transform: uppercase;
@@ -20,12 +20,11 @@
   padding: 20px;
 }
 .BottomCollapseBox {
-  padding: 20px;
+  /* padding: 20px; */
   opacity: 1;
 }
 .TopCollapseBox {
   min-height: 450px;
-  padding: 0px 20px 20px;
   opacity: 1;
 }
 .collapseBox {

diff --git a/frontend/src/style/partials/layout.css b/frontend/src/style/partials/layout.css
@@ -0,0 +1,15 @@
+.wideAppContainer {
+  max-width: 1200px;
+}
+
+.appContainer {
+  max-width: 1100px;
+}
+
+.smallNavigation {
+  margin-left: 80px;
+}
+
+.wideNavigation {
+  margin-left: 220px;
+}