From 9430b3e7794a702b108b1e06563abfb7cc03a4bd Mon Sep 17 00:00:00 2001 From: Jaka Daneu Date: Mon, 14 Oct 2024 19:13:11 +0200 Subject: [PATCH] =?UTF-8?q?refactor(analytics):=20=E2=99=BB=EF=B8=8F=20don?= =?UTF-8?q?e=20with=20style=20optimization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RenderOnViewportEntry.module.css | 7 ++ .../RenderOnViewportEntry/index.jsx | 4 +- src/pages/Analytics/ChartCard/index.jsx | 3 +- src/pages/Analytics/Footer/index.jsx | 7 +- src/pages/Analytics/IconButton.module.css | 20 +++++ .../{analytics.css => Layout.module.css} | 78 ++++++------------- .../Analytics/Sidebar/Sidebar.module.css | 1 + src/pages/Analytics/dev/layout-visualizer.jsx | 41 +++++----- src/pages/Analytics/index.jsx | 5 +- 9 files changed, 85 insertions(+), 81 deletions(-) create mode 100644 src/components/RenderOnViewportEntry/RenderOnViewportEntry.module.css create mode 100644 src/pages/Analytics/IconButton.module.css rename src/pages/Analytics/{analytics.css => Layout.module.css} (62%) diff --git a/src/components/RenderOnViewportEntry/RenderOnViewportEntry.module.css b/src/components/RenderOnViewportEntry/RenderOnViewportEntry.module.css new file mode 100644 index 00000000..b017e425 --- /dev/null +++ b/src/components/RenderOnViewportEntry/RenderOnViewportEntry.module.css @@ -0,0 +1,7 @@ +.RenderOnViewportEntry { + min-height: 300px; +} + +.RenderOnViewportEntry { + margin-bottom: 2em; +} diff --git a/src/components/RenderOnViewportEntry/index.jsx b/src/components/RenderOnViewportEntry/index.jsx index 476058d1..4615adcf 100644 --- a/src/components/RenderOnViewportEntry/index.jsx +++ b/src/components/RenderOnViewportEntry/index.jsx @@ -5,6 +5,8 @@ import PropTypes from 'prop-types'; import { Suspense, useRef } from 'react'; import useFirstViewportEntry from 'hooks/useFirstViewportEntry'; +import styles from './RenderOnViewportEntry.module.css'; + /** * Component that renders its children only when it enters the viewport. * @@ -26,7 +28,7 @@ const RenderOnViewportEntry = function RenderOnViewportEntry({ const hasEntered = useFirstViewportEntry(ref, { threshold, root, rootMargin }); return ( -
+
{!hasEntered ? srOnlyComponentsBeforeEntered : null} {hasEntered ? Loading....
}>{children} : null}
diff --git a/src/pages/Analytics/ChartCard/index.jsx b/src/pages/Analytics/ChartCard/index.jsx index 1c8a6ce1..d249c7fc 100644 --- a/src/pages/Analytics/ChartCard/index.jsx +++ b/src/pages/Analytics/ChartCard/index.jsx @@ -22,6 +22,7 @@ import CustomSeriesButtons from '../CustomSeriesButtons'; import Popover from '../CustomPopover'; import styles from './ChartCard.module.css'; +import stylesIconButton from '../IconButton.module.css'; // accessibility(Highcharts); exporting(Highcharts); @@ -67,7 +68,7 @@ const ChartCard = function ChartCard({ id = undefined, options }) { -
+
+
@@ -73,7 +74,7 @@ const Footer = function Footer({ lng }) {
-
+
© 2021-{new Date().getFullYear()} Sledilnik.org diff --git a/src/pages/Analytics/IconButton.module.css b/src/pages/Analytics/IconButton.module.css new file mode 100644 index 00000000..6a4a5da5 --- /dev/null +++ b/src/pages/Analytics/IconButton.module.css @@ -0,0 +1,20 @@ +.IconButton { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.2em; + font-size: 1rem; + background: transparent; + border-radius: 50%; + border: 1px solid ButtonText; + transform: all 0.3s ease; +} + +.IconButton:hover { + background: #f4f8f8; +} + +.IconButton:focus-visible { + outline: 2px solid #333; +} diff --git a/src/pages/Analytics/analytics.css b/src/pages/Analytics/Layout.module.css similarity index 62% rename from src/pages/Analytics/analytics.css rename to src/pages/Analytics/Layout.module.css index 12e5de9e..3b4dcaa5 100644 --- a/src/pages/Analytics/analytics.css +++ b/src/pages/Analytics/Layout.module.css @@ -1,13 +1,9 @@ -button { - cursor: pointer; -} - -.analytics-layout > *, -.full-width > * { +.AnalyticsLayout > *, +.FullWidth > * { grid-column: content; } -.analytics-layout, -.full-width { +.AnalyticsLayout, +.FullWidth { --minimum-content-padding: 2rem; /** TRACK WIDTHS **/ @@ -42,93 +38,65 @@ button { } /** CLASSES **/ -.full { +.Full { grid-column: full; } -.full-start { +.FullStart { grid-column-start: full-start; } -.full-end { +.FullEnd { grid-column-end: full-end; } -.popout { +.Popout { grid-column: popout; } -.popout-start { +.PopoutStart { grid-column-start: popout-start; } -.popout-end { +.PopoutEnd { grid-column-end: popout-end; } -.content { +.Content { grid-column: content; } -.content-start { +.ContentStart { grid-column-start: content-start; } -.content-end { +.ContentEnd { grid-column-end: content-end; } -.narrow { +.Narrow { grid-column: narrow; } -.narrow-start { +.NarrowStart { grid-column-start: narrow-start; } -.narrow-end { +.NarrowEnd { grid-column-end: narrow-end; } -.full-width { +.FullWidth { grid-column: full; } -.full-content, -.full-content-nopad { +.FullContent, +.FullContentNopad { grid-column: full; } -.full-content { +.FullContent { padding-inline: var(--minimum-content-padding); } -/** Additional layout classes for specific sections **/ +/* utility classes */ -.analytics-main { +.MinHeightNoHeader { min-height: calc(100dvh - 56px); } @media screen and (width >= 600px) { - .analytics-main { + .MinHeightNoHeader { min-height: calc(100dvh - 64px); } } - -.icon-button { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.2em; - font-size: 1rem; - background: transparent; - border-radius: 50%; - border: 1px solid ButtonText; - transform: all 0.3s ease; -} - -.icon-button:hover { - background: #f4f8f8; -} - -.icon-button:focus-visible { - outline: 2px solid #333; -} - -.render-on-viewport-entry { - min-height: 300px; -} - -.render-on-viewport-entry { - margin-bottom: 2em; -} diff --git a/src/pages/Analytics/Sidebar/Sidebar.module.css b/src/pages/Analytics/Sidebar/Sidebar.module.css index c27783e6..4c26cb4b 100644 --- a/src/pages/Analytics/Sidebar/Sidebar.module.css +++ b/src/pages/Analytics/Sidebar/Sidebar.module.css @@ -9,6 +9,7 @@ } .Sidebar > button { + cursor: pointer; width: 100%; height: 100%; border-radius: 50%; diff --git a/src/pages/Analytics/dev/layout-visualizer.jsx b/src/pages/Analytics/dev/layout-visualizer.jsx index 4aaafe37..8742d515 100644 --- a/src/pages/Analytics/dev/layout-visualizer.jsx +++ b/src/pages/Analytics/dev/layout-visualizer.jsx @@ -1,63 +1,66 @@ -// parent has to have className "analytics-layout" +import styles from '../Layout.module.css'; const LayoutVisualizer = function LayoutVisualizer() { return ( - <> -
+
+
FULL
-
+
FULL START
-
+
FULL END
-
+
POPUT
-
+
POPUT START
-
+
POPUT END
-
+
CONTENT
-
+
CONTENT START
+
+ CONTENT END +
-
+
NARROW
NARROW START
NARROW END
-
+
FULL WIDTH
-
+
FULL CONTENT
FULL CONTENT NO PAD
- +
); }; diff --git a/src/pages/Analytics/index.jsx b/src/pages/Analytics/index.jsx index 3c3133a4..1587b4cf 100644 --- a/src/pages/Analytics/index.jsx +++ b/src/pages/Analytics/index.jsx @@ -4,11 +4,12 @@ import { useParams } from 'react-router'; import * as SEO from 'components/SEO'; import { t } from 'i18next'; -import './analytics.css'; import RenderOnViewportEntry from 'components/RenderOnViewportEntry'; import Footer from './Footer'; import Sidebar from './Sidebar'; +import styles from './Layout.module.css'; + const LineChartExample = lazy(() => import('./Charts/examples/LineChartExample')); const ColumnChartExample = lazy(() => import('./Charts/examples/ColumnChartExample')); const DrilldownChartExample = lazy(() => import('./Charts/examples/DrilldownChartExample')); @@ -20,7 +21,7 @@ const Analytics = function Analytics() { <> -
+

{t('SEO.title.analytics')}