Fix emissions table column width (#465)

* fix issue w emissions column with and minor refactoring * minor cleanup * Prevent overflow for elements only used for screen readers * Prevent overflow on the smallest screens --------- Co-authored-by: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com>
Klimatbyran · Apr 17, 2024 · 2e6fef2 · 2e6fef2
1 parent 5ef9189
commit 2e6fef2
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 117 deletions.
diff --git a/components/ComparisonTable.tsx b/components/ComparisonTable.tsx
@@ -24,47 +24,48 @@ const StyledTable = styled.table`
     font-size: 0.8em;
   }
 
-  .data-header {
-    text-align: right;
-  }
-
   #first-header {
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
   }
 
-  #last-header {
+  #third-header {
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
   }
 
+  .data-header {
+    text-align: right;
+  }
+
   .data-column {
     color: ${({ theme }) => theme.darkYellow};
     text-align: right;
   }
 `
 
 const TableData = styled.td`
-  padding: 1rem;
-  overflow: hidden;
+  padding: 8px 6px;
+  max-width: 80px;
   border-bottom: 1px solid ${({ theme }) => theme.midGreen};
-  max-width: 150px;
 
-  @media only screen and (${devices.mobile}) {
-    padding: 0.75rem;
-    max-width: 50px;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  @media only screen and (${devices.tablet}) {
+    padding: 16px;
   }
 `
 
 const TableHeader = styled.th`
-  padding: 1rem;
+  padding: 12px 6px;
   background: ${({ theme }) => theme.black};
   position: sticky;
   top: 0;
   font-weight: bold;
   text-align: left;
+  cursor: pointer;
+
+  @media only screen and (${devices.tablet}) {
+    padding: 16px 8px 16px 12px;
+  }
 `
 
 const TableRow = styled.tr`
@@ -86,16 +87,10 @@ function ComparisonTable<T extends object>({ data, columns }: TableProps<T>) {
   const [resizeCount, setResizeCount] = useState(0)
 
   useEffect(() => {
-    const handleResize = () => {
-      setResizeCount((prevCount) => prevCount + 1)
-    }
-
+    const handleResize = () => setResizeCount((count) => count + 1)
     window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, []) // Empty dependency array ensures this effect runs once when the component mounts
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
 
   const table = useReactTable({
     data,
@@ -113,34 +108,22 @@ function ComparisonTable<T extends object>({ data, columns }: TableProps<T>) {
     router.push(route)
   }
 
-  const renderHeader = (header: Header<T, unknown>, index: number) => (
-    <TableHeader
-      key={header.id}
-      colSpan={header.colSpan}
-      className={header.index > 1 ? 'data-header' : ''}
-      id={
-        // eslint-disable-next-line no-nested-ternary
-        index === 0
-          ? 'first-header'
-          : index === header.headerGroup.headers.length - 1
-            ? 'last-header'
-            : ''
-      }
-    >
-      {header.isPlaceholder ? null : (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        <div
-          {...{
-            className: header.column.getCanSort() ? 'cursor-pointer select-none' : '',
-            onClick: header.column.getToggleSortingHandler(),
-            onKeyDown: header.column.getToggleSortingHandler(),
-          }}
-        >
-          {flexRender(header.column.columnDef.header, header.getContext())}
-        </div>
-      )}
-    </TableHeader>
-  )
+  const renderHeader = (header: Header<T, unknown>, index: number) => {
+    const lastOrMiddleHeader = index === header.headerGroup.headers.length - 1 ? 'third-header' : 'second-header'
+
+    return (
+      <TableHeader
+        key={header.id}
+        colSpan={header.colSpan}
+        className={header.index > 1 ? 'data-header' : ''}
+        id={index === 0 ? 'first-header' : lastOrMiddleHeader}
+        onClick={header.column.getToggleSortingHandler()}
+        onKeyDown={header.column.getToggleSortingHandler()}
+      >
+        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+      </TableHeader>
+    )
+  }
 
   return (
     <StyledTable key={resizeCount}>

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -66,6 +66,10 @@ const LogoContainer = styled.div`
     align-self: end;
     order: 1;
   }
+
+  & img {
+    max-height: 56px;
+  }
 `
 
 const SocialLinksContainer = styled.div`
@@ -125,7 +129,8 @@ function Footer() {
             <LogoContainer>
               <img
                 src="/logos/klimatkollen_logo_black.svg"
-                height="56px"
+                width="100%"
+                loading="lazy"
                 alt="Klimatkollen logo"
               />
             </LogoContainer>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 
 import { H1 } from './Typography'
-import VisuallyHidden from './VisuallyHidden'
 import Header from './Header'
 import { devices } from '../utils/devices'
 
@@ -20,9 +19,7 @@ export default function Layout({ children }: { children: JSX.Element }) {
     <>
       <Header />
       <Main>
-        <VisuallyHidden>
-          <H1>Klimatkollen</H1>
-        </VisuallyHidden>
+        <H1 className="sr-only">Klimatkollen</H1>
         {children}
       </Main>
     </>

diff --git a/components/PageWrapper.tsx b/components/PageWrapper.tsx
@@ -13,7 +13,10 @@ const Wrap = styled.div<{ $background: BackgroundColors }>`
 const WrapInner = styled.div`
   width: 100%;
   max-width: 840px;
-  padding: 20px 20px;
+
+  @media only screen and (${devices.mobile}) {
+    padding: 20px 12px;
+  }
 
   @media only screen and (${devices.tablet}) {
     padding: 30px 20px;

diff --git a/components/VisuallyHidden.tsx b/components/VisuallyHidden.tsx
diff --git a/styles/globals.css b/styles/globals.css
@@ -78,6 +78,7 @@ body {
   font-size: 16px;
   line-height: 19px;
   font-weight: 300;
+  position: relative;
 }
 
 html {
@@ -88,3 +89,21 @@ a {
   color: inherit;
   text-decoration: underline;
 }
+
+
+/**
+ * Apply this class to elements that are needed for a11y
+ * but do not fit visually in the UI
+ */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px !important;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  font-size: 16px !important;
+}
diff --git a/utils/createMunicipalityList.tsx b/utils/createMunicipalityList.tsx
@@ -101,7 +101,7 @@ export const listColumns = (
     return firstColumnHeader
   }
 
-  const getFirstColumnClimatePlans = (index: number, dataPoint: string) => (index === -1
+  const firstColumnClimatePlans = (index: number, dataPoint: string) => (index === -1
     ? (
       <a
         href={dataPoint.toString()}
@@ -116,22 +116,53 @@ export const listColumns = (
     : 'Nej'
   )
 
-  return [
-    {
-      header: getFirstColumnHeader(),
-      cell: (row) => {
-        const { index, dataPoint } = row.row.original
+  const getFirstColumnCell = (row: { row: { original: RowData } }) => {
+    const { index, dataPoint } = row.row.original
 
-        if (isClimatePlan) {
-          return getFirstColumnClimatePlans(index, dataPoint as string)
-        }
+    if (isClimatePlan) {
+      return firstColumnClimatePlans(index, dataPoint as string)
+    }
 
-        if (isProcurement) {
-          return requirementsInProcurement(dataPoint as number)
-        }
+    if (isProcurement) {
+      return requirementsInProcurement(dataPoint as number)
+    }
 
-        return row.cell.row.index + 1
-      },
+    return index
+  }
+
+  const getThirdColumnCell = (row: { row: { original: RowData } }) => {
+    const {
+      dataPoint, formattedDataPoint, climatePlanYearAdapted, procurementLink,
+    } = row.row.original
+
+    if (isClimatePlan) {
+      return dataPoint !== climatePlanMissing
+        ? climatePlanYearAdapted
+        : climatePlanMissing
+    }
+
+    if (isProcurement) {
+      return procurementLink !== ''
+        ? (
+          <a
+            href={procurementLink}
+            onClick={(e) => e.stopPropagation()}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Länk
+          </a>
+        )
+        : 'Saknas'
+    }
+
+    return formattedDataPoint
+  }
+
+  return [
+    {
+      header: getFirstColumnHeader(),
+      cell: (row) => getFirstColumnCell(row),
       accessorKey: 'index',
     },
     {
@@ -141,34 +172,7 @@ export const listColumns = (
     },
     {
       header: () => columnHeader,
-      cell: (row) => {
-        const {
-          dataPoint, formattedDataPoint, climatePlanYearAdapted, procurementLink,
-        } = row.row.original
-
-        if (isClimatePlan) {
-          return dataPoint !== climatePlanMissing
-            ? climatePlanYearAdapted
-            : climatePlanMissing
-        }
-
-        if (isProcurement) {
-          return procurementLink !== ''
-            ? (
-              <a
-                href={procurementLink}
-                onClick={(e) => e.stopPropagation()}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Länk
-              </a>
-            )
-            : 'Saknas'
-        }
-
-        return formattedDataPoint
-      },
+      cell: (row) => getThirdColumnCell(row),
       accessorKey: 'dataPoint',
     },
   ]