rebased onto main

bento-platform · Oct 16, 2024 · df3459e · df3459e
1 parent 312347f
commit df3459e
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 30 deletions.
diff --git a/src/js/components/ResponsiveContext.tsx b/src/js/components/ResponsiveContext.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import React, { createContext, useState, useContext, useEffect } from 'react';
+
+interface ResponsiveContextType {
+  isMobile: boolean;
+}
+
+const ResponsiveContext = createContext<ResponsiveContextType | undefined>(undefined);
+
+interface ResponsiveProviderProps {
+  children: ReactNode;
+}
+
+export const ResponsiveProvider = ({ children }: ResponsiveProviderProps) => {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768); // Adjust this breakpoint as needed
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return <ResponsiveContext.Provider value={{ isMobile }}>{children}</ResponsiveContext.Provider>;
+};
+
+export const useResponsive = (): ResponsiveContextType => {
+  const context = useContext(ResponsiveContext);
+  if (context === undefined) {
+    throw new Error('useResponsive must be used within a ResponsiveProvider');
+  }
+  return context;
+};
diff --git a/src/js/components/SiteHeader.tsx b/src/js/components/SiteHeader.tsx
@@ -15,6 +15,7 @@ import { DEFAULT_TRANSLATION, LNG_CHANGE, LNGS_FULL_NAMES } from '@/constants/co
 import { CLIENT_NAME, PORTAL_URL, TRANSLATED } from '@/config';
 
 import ScopePickerModal from './Scope/ScopePickerModal';
+import { useResponsive } from '@/components/ResponsiveContext';
 
 const { Header } = Layout;
 
@@ -24,6 +25,7 @@ const SiteHeader = () => {
   const { t, i18n } = useTranslation(DEFAULT_TRANSLATION);
   const navigate = useNavigate();
   const location = useLocation();
+  const { isMobile } = useResponsive();
 
   const { isFetching: openIdConfigFetching } = useOpenIdConfig();
   const { isHandingOffCodeForToken } = useAuthState();
@@ -65,16 +67,25 @@ const SiteHeader = () => {
   return (
     <Header style={{ position: 'fixed', width: '100%', zIndex: 100, top: 0 }}>
       <Flex align="center" justify="space-between">
-        <Space size="middle">
-          <img
-            src="/public/assets/branding.png"
-            alt="logo"
-            style={{ height: '32px', verticalAlign: 'middle', transform: 'translateY(-3px)' }}
-            onClick={() => navigate(`/${i18n.language}${scopeToUrl(scopeObj)}`)}
-          />
+        <Space size={isMobile ? 'small' : 'middle'}>
+          {isMobile ? (
+            <img
+              src="/public/assets/icon_small.png"
+              alt="logo"
+              style={{ height: '32px', verticalAlign: 'middle', transform: 'translateY(-3px)', paddingLeft: '23px' }}
+              onClick={() => navigate(`/${i18n.language}${scopeToUrl(scopeObj)}`)}
+            />
+          ) : (
+            <img
+              src="/public/assets/branding.png"
+              alt="logo"
+              style={{ height: '32px', verticalAlign: 'middle', transform: 'translateY(-3px)', paddingLeft: '50px' }}
+              onClick={() => navigate(`/${i18n.language}${scopeToUrl(scopeObj)}`)}
+            />
+          )}
           <Typography.Title
             level={1}
-            style={{ fontSize: '24px', margin: 0, lineHeight: '64px', color: 'white' }}
+            style={{ fontSize: '1.5em', margin: 0, lineHeight: '64px', color: 'white' }}
             type="secondary"
           >
             {CLIENT_NAME}
@@ -95,28 +106,28 @@ const SiteHeader = () => {
           <ScopePickerModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
         </Space>
 
-        <Space size="small">
+        <Space size={isMobile ? 0 : 'small'}>
           {TRANSLATED && (
             <Button
               type="text"
               className="header-button"
               icon={<RiTranslate style={{ transform: 'translateY(1px)' }} />}
               onClick={changeLanguage}
             >
-              {LNGS_FULL_NAMES[LNG_CHANGE[i18n.language]]}
+              {isMobile ? '' : LNGS_FULL_NAMES[LNG_CHANGE[i18n.language]]}
             </Button>
           )}
           <Button type="text" className="header-button" icon={<LinkOutlined />} onClick={openPortalWindow}>
-            {t('Portal')}
-            <ExportOutlined />
+            {isMobile ? '' : t('Portal')}
+            {isMobile || <ExportOutlined />}
           </Button>
           {isAuthenticated ? (
             <Button type="text" className="header-button" icon={<LogoutOutlined />} onClick={performSignOut}>
-              {t('Sign Out')}
+              {isMobile ? '' : t('Sign Out')}
             </Button>
           ) : (
             <Button type="primary" shape="round" icon={<LoginOutlined />} onClick={performSignIn}>
-              {openIdConfigFetching || isHandingOffCodeForToken ? t('Loading...') : t('Sign In')}
+              {openIdConfigFetching || isHandingOffCodeForToken ? t('Loading...') : isMobile ? '' : t('Sign In')}
             </Button>
           )}
         </Space>

diff --git a/src/js/components/SiteSider.tsx b/src/js/components/SiteSider.tsx
@@ -75,6 +75,7 @@ const SiteSider: React.FC<{
   return (
     <Sider
       collapsible
+      breakpoint="md"
       collapsed={collapsed}
       onCollapse={setCollapsed}
       theme="light"

diff --git a/src/js/index.tsx b/src/js/index.tsx
@@ -30,6 +30,7 @@ import 'leaflet/dist/leaflet.css';
 import 'bento-charts/src/styles.css';
 import './i18n';
 import '../styles.css';
+import { ResponsiveProvider } from '@/components/ResponsiveContext';
 
 const BaseRoutes = () => {
   return (
@@ -51,22 +52,24 @@ const RootApp = () => {
   return (
     <Provider store={store}>
       <BrowserRouter>
-        <BentoAuthContextProvider
-          value={{
-            applicationUrl: PUBLIC_URL_NO_TRAILING_SLASH,
-            openIdConfigUrl: OPENID_CONFIG_URL,
-            clientId: CLIENT_ID,
-            scope: 'openid email',
-            postSignOutUrl: `${PUBLIC_URL_NO_TRAILING_SLASH}/`,
-            authCallbackUrl: AUTH_CALLBACK_URL,
-          }}
-        >
-          <ChartConfigProvider Lng={i18n.language ?? SUPPORTED_LNGS.ENGLISH} theme={NEW_BENTO_PUBLIC_THEME}>
-            <ConfigProvider theme={{ components: { Menu: { iconSize: 20 } } }}>
-              <BaseRoutes />
-            </ConfigProvider>
-          </ChartConfigProvider>
-        </BentoAuthContextProvider>
+        <ResponsiveProvider>
+          <BentoAuthContextProvider
+            value={{
+              applicationUrl: PUBLIC_URL_NO_TRAILING_SLASH,
+              openIdConfigUrl: OPENID_CONFIG_URL,
+              clientId: CLIENT_ID,
+              scope: 'openid email',
+              postSignOutUrl: `${PUBLIC_URL_NO_TRAILING_SLASH}/`,
+              authCallbackUrl: AUTH_CALLBACK_URL,
+            }}
+          >
+            <ChartConfigProvider Lng={i18n.language ?? SUPPORTED_LNGS.ENGLISH} theme={NEW_BENTO_PUBLIC_THEME}>
+              <ConfigProvider theme={{ components: { Menu: { iconSize: 20 } } }}>
+                <BaseRoutes />
+              </ConfigProvider>
+            </ChartConfigProvider>
+          </BentoAuthContextProvider>
+        </ResponsiveProvider>
       </BrowserRouter>
     </Provider>
   );

diff --git a/src/styles.css b/src/styles.css
@@ -27,6 +27,10 @@ body {
   border-right: 1px solid #f0f0f0;
 }
 
+.ant-layout-header {
+  padding: 0 !important;
+}
+
 .select-project-title {
   transition: all 0.2s;
 }
@@ -108,3 +112,10 @@ body {
 }
 
 /* END search results pane */
+
+@media (max-width: 768px) {
+  .ant-layout-content {
+    padding: 10px !important;
+  }
+}
+