fix(style): overview network cards in viewports below 400 (#243)

DefGuard · Jul 13, 2023 · 01612c3 · 01612c3
1 parent f1a22d8
commit 01612c3
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 206 deletions.
diff --git a/web/index.html b/web/index.html
@@ -40,163 +40,12 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/src/pwa/icons/app/180.png" />
     <link rel="apple-touch-icon" sizes="256x256" href="/src/pwa/icons/app/256.png" />
     <link rel="apple-touch-icon" sizes="512x512" href="/src/pwa/icons/app/512.png" />
-
-    <!--Fonts-->
-    <!--Roboto-->
+     <!-- FONTS FIXME: should be loaded from assets files instead -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-300.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-300italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-regular.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-500.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-500italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-700.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-700italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/roboto/roboto-v30-latin-900.woff2"
-      crossorigin
-    />
-    <!--Poppins-->
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-300.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-300italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-regular.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-500.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-500italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-600.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-600italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-700.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-700italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-800.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-800italic.woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="/src/shared/fonts/poppins/poppins-v20-latin-900.woff2"
-      crossorigin
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,700&family=Source+Code+Pro&display=swap"
+      rel="stylesheet"
     />
   </head>
   <body>

diff --git a/web/src/components/App/App.tsx b/web/src/components/App/App.tsx
@@ -1,5 +1,4 @@
 import './App.scss';
-import '../../shared/scss/fonts.scss';
 import 'react-loading-skeleton/dist/skeleton.css';
 
 import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';

diff --git a/web/src/components/Navigation/components/ApplicationVersion/ApplicationVersion.tsx b/web/src/components/Navigation/components/ApplicationVersion/ApplicationVersion.tsx
@@ -2,12 +2,14 @@ import './style.scss';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
 import { useAppStore } from '../../../../shared/hooks/store/useAppStore';
-import { useNavigationStore } from '../../hooks/useNavigationStore';
 
-export const ApplicationVersion = () => {
+type Props = {
+  isOpen: boolean;
+};
+
+export const ApplicationVersion = ({ isOpen }: Props) => {
   const version = useAppStore((store) => store.appInfo?.version);
   const { LL } = useI18nContext();
-  const isOpen = useNavigationStore((state) => state.isOpen);
 
   return (
     <div className="app-version">

diff --git a/web/src/components/Navigation/components/NavigationBar/NavigationBar.tsx b/web/src/components/Navigation/components/NavigationBar/NavigationBar.tsx
@@ -56,7 +56,7 @@ export const NavigationBar = ({ navItems, onLogout, isOpen }: Props) => {
           </button>
         </div>
       </div>
-      <ApplicationVersion />
+      <ApplicationVersion isOpen={isOpen} />
     </nav>
   );
 };
diff --git a/web/src/components/Navigation/components/NavigationMobile/style.scss b/web/src/components/Navigation/components/NavigationMobile/style.scss
@@ -1,12 +1,12 @@
 @use '@scssutils' as *;
 
 .nav-mobile {
-  height: 57px;
+  height: 60px;
   position: fixed;
   inset: 0;
   width: 100%;
   box-sizing: border-box;
-  padding: 13px 20px 0 20px;
+  padding: 0 20px;
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 40px 1fr 40px;

diff --git a/web/src/pages/overview/OverviewConnectedUsers/UserConnectionCard/style.scss b/web/src/pages/overview/OverviewConnectedUsers/UserConnectionCard/style.scss
@@ -6,7 +6,7 @@
   position: relative;
   border: 1px solid var(--white);
   box-sizing: border-box;
-  width: 370px;
+  width: 100%;
   overflow: hidden;
   position: relative;
   display: grid;
@@ -71,6 +71,7 @@
         height: 100%;
         max-height: 100%;
         overflow: hidden;
+        column-gap: 10px;
       }
     }
   }
@@ -80,12 +81,17 @@
     grid-column: 1 / 2;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 40px 50px;
+    grid-template-rows: 40px 100px;
     row-gap: 20px;
     overflow: hidden;
     width: 100%;
     box-sizing: border-box;
     padding: 20px;
+
+    @media (min-width: 400px) {
+      grid-template-rows: 40px 50px;
+    }
+
     & > .upper {
       width: 100%;
       max-width: 100%;
@@ -112,12 +118,36 @@
       width: 100%;
 
       display: grid;
-      grid-template-rows: 1fr;
-      grid-template-columns: 2fr 3fr 120px;
+      grid-template-rows: 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
+      row-gap: 10px;
+      grid-template-areas:
+        'time devices'
+        'usage usage';
       column-gap: 10px;
       align-items: center;
       justify-items: start;
       justify-content: space-evenly;
+
+      @media (min-width: 400px) {
+        grid-template-rows: 1fr;
+        grid-template-columns: 100px 100px 1fr;
+        grid-template-areas: 'time devices usage';
+        row-gap: 0;
+        column-gap: 10px;
+      }
+
+      .connection-time {
+        grid-area: time;
+      }
+
+      .active-devices {
+        grid-area: devices;
+      }
+
+      .network-usage-summary {
+        grid-area: usage;
+      }
     }
   }
 

diff --git a/web/src/pages/overview/OverviewConnectedUsers/style.scss b/web/src/pages/overview/OverviewConnectedUsers/style.scss
@@ -116,31 +116,25 @@ $column-widths: 250px, 167px, 136px, 168px, 200px;
 
     &.grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, 370px);
-      grid-template-rows: min-content;
       width: 100%;
       gap: 1.5rem;
       overflow: auto;
       box-sizing: border-box;
       position: relative;
       padding-top: 1rem;
       padding-bottom: 4rem;
+      height: auto;
+      grid-template-rows: min-content;
+      grid-template-columns: 1fr;
 
       @include bs.media-breakpoint-down(md) {
         justify-content: center;
       }
-      @include bs.media-breakpoint-down(xl) {
-        padding-top: 1rem;
-        padding-bottom: 1.5rem;
-        margin-right: 1.4rem;
-        width: calc(100% - 1.6rem);
-        overflow: auto;
-        max-height: 100vh;
-        grid-template-columns: 1fr;
-      }
+
       @include bs.media-breakpoint-up(xl) {
         padding-top: 1rem;
         padding-bottom: 4rem;
+        grid-template-columns: repeat(auto-fit, 370px);
       }
     }
   }

diff --git a/web/src/pages/overview/OverviewHeader/OverviewHeader.tsx b/web/src/pages/overview/OverviewHeader/OverviewHeader.tsx
@@ -13,7 +13,6 @@ import { deviceBreakpoints } from '../../../shared/constants';
 import { useNetworkPageStore } from '../../network/hooks/useNetworkPageStore';
 import { useOverviewStore } from '../hooks/store/useOverviewStore';
 import { OverviewStatsFilterSelect } from '../OverviewStatsFilterSelect/OverviewStatsFilterSelect';
-import { OverviewViewSelect } from '../OverviewViewSelect/OverviewViewSelect';
 import { OverViewNetworkSelect } from './OverviewNetworkSelect/OverviewNetworkSelect';
 
 type Props = {
@@ -64,15 +63,13 @@ export const OverviewHeader = ({ loading = false }: Props) => {
           </div>
           <OverViewNetworkSelect />
           <OverviewStatsFilterSelect />
-          <OverviewViewSelect />
         </div>
       )}
       {breakpoint === 'desktop' && (
         <header>
           <h1>{LL.networkOverview.pageTitle()}</h1>
           <div className="controls">
             <OverViewNetworkSelect />
-            <OverviewViewSelect />
             <OverviewStatsFilterSelect />
             {renderEditNetworks()}
           </div>

diff --git a/web/src/pages/overview/OverviewPage.tsx b/web/src/pages/overview/OverviewPage.tsx
@@ -27,11 +27,11 @@ const STATUS_REFETCH_TIMEOUT = 15 * 1000;
 export const OverviewPage = () => {
   const navigate = useNavigate();
   const { breakpoint } = useBreakpoint(deviceBreakpoints);
-  const viewMode = useOverviewStore((state) => state.viewMode);
   const setOverViewStore = useOverviewStore((state) => state.setState);
   const statsFilter = useOverviewStore((state) => state.statsFilter);
   const selectedNetworkId = useOverviewStore((state) => state.selectedNetworkId);
   const resetWizard = useWizardStore((state) => state.resetState);
+  const viewMode = useOverviewStore((state) => state.viewMode);
 
   const {
     network: { getNetworks, getUsersStats, getNetworkStats },
@@ -95,14 +95,12 @@ export const OverviewPage = () => {
     return res;
   }, [networkUsersStats]);
 
+  // FIXME: lockdown viewMode on grid for now
   useEffect(() => {
-    if (breakpoint === 'mobile' && viewMode === OverviewLayoutType.LIST) {
+    if (viewMode !== OverviewLayoutType.GRID) {
       setOverViewStore({ viewMode: OverviewLayoutType.GRID });
     }
-    if (breakpoint === 'tablet' && viewMode === OverviewLayoutType.GRID) {
-      setOverViewStore({ viewMode: OverviewLayoutType.LIST });
-    }
-  }, [viewMode, breakpoint, setOverViewStore]);
+  }, [setOverViewStore, viewMode]);
 
   return (
     <>

diff --git a/web/src/pages/overview/hooks/store/useOverviewStore.ts b/web/src/pages/overview/hooks/store/useOverviewStore.ts
@@ -18,6 +18,7 @@ export const useOverviewStore = create<
       setState: (newValues) => set((state) => ({ ...state, ...newValues })),
     }),
     {
+      version: 0.2,
       name: 'overview-store',
       storage: createJSONStorage(() => sessionStorage),
       partialize: (store) => omit(store, ['setState', 'networks']),