refactor(analytics): ♻️ done with style optimization

sledilnik · Oct 14, 2024 · 9430b3e · 9430b3e
1 parent 0ee46bf
commit 9430b3e
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 81 deletions.
diff --git a/src/components/RenderOnViewportEntry/RenderOnViewportEntry.module.css 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
@@ -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 (
-    <div ref={ref} className="render-on-viewport-entry" {...divProps}>
+    <div ref={ref} className={styles.RenderOnViewportEntry} {...divProps}>
       {!hasEntered ? srOnlyComponentsBeforeEntered : null}
       {hasEntered ? <Suspense fallback={<div>Loading....</div>}>{children}</Suspense> : null}
     </div>

diff --git 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 }) {
 
         <Popover
           placement="bottom-start"
-          triggerClassname="icon-button"
+          triggerClassname={stylesIconButton.IconButton}
           options={[
             isRequestFullscreenSupported
               ? {

diff --git a/src/pages/Analytics/Footer/index.jsx b/src/pages/Analytics/Footer/index.jsx
@@ -4,11 +4,12 @@ import { t } from 'i18next';
 import * as Icons from 'components/Shared/Icons';
 
 import styles from './Footer.module.css';
+import stylesLayout from '../Layout.module.css';
 
 const Footer = function Footer({ lng }) {
   return (
-    <footer className={`analytics-layout ${styles.Footer}`}>
-      <div className={`full-content ${styles.FooterTopContainer}`}>
+    <footer className={`${stylesLayout.AnalyticsLayout} ${styles.Footer}`}>
+      <div className={`${stylesLayout.FullContent} ${styles.FooterTopContainer}`}>
         <div className={styles.FooterContent}>
           <Icons.Icon id="zdravniki-sledilnik-logo-footer" name="Logo" className={styles.Logo} />
         </div>
@@ -73,7 +74,7 @@ const Footer = function Footer({ lng }) {
           </nav>
         </div>
       </div>
-      <div className={`full-content  ${styles.SledilnikInfo}`}>
+      <div className={`${stylesLayout.FullContent} ${styles.SledilnikInfo}`}>
         <div className={styles.SledilnikContent}>
           <div>
             © 2021-{new Date().getFullYear()} <strong>Sledilnik.org</strong>

diff --git a/src/pages/Analytics/IconButton.module.css 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 → src/pages/Analytics/Layout.module.css b/src/pages/Analytics/analytics.css → 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
@@ -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
@@ -1,63 +1,66 @@
-// parent has to have className "analytics-layout"
+import styles from '../Layout.module.css';
 
 const LayoutVisualizer = function LayoutVisualizer() {
   return (
-    <>
-      <div className="full" style={{ background: 'rgba(255, 0, 0, 1)' }}>
+    <div className={styles.AnalyticsLayout}>
+      <div className={styles.Full} style={{ background: 'rgba(255, 0, 0, 1)' }}>
         FULL
       </div>
-      <div className="full-start" style={{ background: 'rgba(255, 0, 0, 0.8)' }}>
+      <div className={styles.FullStart} style={{ background: 'rgba(255, 0, 0, 0.8)' }}>
         FULL START
       </div>
-      <div className="full-end" style={{ background: 'rgba(255, 0, 0, 0.6)' }}>
+      <div className={styles.FullEnd} style={{ background: 'rgba(255, 0, 0, 0.6)' }}>
         FULL END
       </div>
-      <div className="popout" style={{ background: 'rgba(255, 255, 0, 1)' }}>
+      <div className={styles.Popout} style={{ background: 'rgba(255, 255, 0, 1)' }}>
         POPUT
       </div>
-      <div className="popout-start" style={{ background: 'rgba(255, 255, 0, 0.8)' }}>
+      <div className={styles.PopoutStart} style={{ background: 'rgba(255, 255, 0, 0.8)' }}>
         POPUT START
       </div>
-      <div className="popout-end" style={{ background: 'rgba(255, 255, 0, 0.6)' }}>
+      <div className={styles.PopoutEnd} style={{ background: 'rgba(255, 255, 0, 0.6)' }}>
         POPUT END
       </div>
-      <div className="content" style={{ background: 'rgba(0, 255, 0, 1)' }}>
+      <div className={styles.Content} style={{ background: 'rgba(0, 255, 0, 1)' }}>
         CONTENT
       </div>
-      <div className="content-start" style={{ background: 'rgba(0, 255, 0, 0.8)' }}>
+      <div className={styles.ContentStart} style={{ background: 'rgba(0, 255, 0, 0.8)' }}>
         CONTENT START
       </div>
+      <div className={styles.ContentEnd} style={{ background: 'rgba(0, 255, 0, 0.6)' }}>
+        CONTENT END
+      </div>
 
-      <div className="narrow" style={{ background: 'rgba(0, 255, 255, 1)' }}>
+      <div className={styles.Narrow} style={{ background: 'rgba(0, 255, 255, 1)' }}>
         NARROW
       </div>
       <div
-        className="narrow-start"
-        style={{ background: 'rgba(0, 255, 255, 0.8)', display: 'grid', placeItems: 'center' }}
+        className={styles.NarrowStart}
+        style={{ background: 'rgba(0, 255, 255, 0.8)', display: 'grid' }}
       >
         NARROW START
       </div>
       <div
-        className="narrow-end"
-        style={{ background: 'rgba(0, 255, 255, 0.6)', display: 'grid', placeItems: 'center' }}
+        className={styles.NarrowEnd}
+        style={{ background: 'rgba(0, 255, 255, 0.6)', display: 'grid' }}
       >
         NARROW END
       </div>
-      <div className="full-width" style={{ background: 'rgba(0, 0, 255, 1)' }}>
+      <div className={styles.FullWidth} style={{ background: 'rgba(0, 0, 255, 1)' }}>
         FULL WIDTH
       </div>
-      <div className="full-content" style={{ background: 'rgba(0, 0, 255, 0.8)' }}>
+      <div className={styles.FullContent} style={{ background: 'rgba(0, 0, 255, 0.8)' }}>
         FULL CONTENT
       </div>
       <div
-        className="full-content-nopad"
+        className={styles.FullContentNoPad}
         style={{
           background: 'rgba(0, 0, 255, 0.6)',
         }}
       >
         FULL CONTENT NO PAD
       </div>
-    </>
+    </div>
   );
 };
 

diff --git 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() {
     <>
       <SEO.Dynamic title={t('SEO.title.analytics')} lang={lng} />
 
-      <main id="main-content" className="analytics-layout analytics-main">
+      <main id="main-content" className={`${styles.AnalyticsLayout} ${styles.MinHeightNoHeader}`}>
         <h1 className="content" style={{ marginTop: '1em' }}>
           {t('SEO.title.analytics')}
         </h1>