More CSS modules work

crosshare-org · Apr 30, 2024 · 309e593 · 309e593
1 parent d0748ed
commit 309e593
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 102 deletions.
diff --git a/app/components/FeatureList.module.css b/app/components/FeatureList.module.css
@@ -0,0 +1,33 @@
+@value huge-and-up from '../lib/definitions.module.css';
+@value max-width from '../lib/definitions.module.css';
+
+.featureList {
+  columns: 3 300px;
+  column-gap: 1em;
+  margin: 1em;
+}
+
+/* stylelint-disable-next-line media-feature-name-no-unknown */
+@media (huge-and-up) {
+  .featureList {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    max-width: max-width;
+    margin: 1em auto;
+  }
+}
+
+.item {
+  display: inline-block;
+  width: 100%;
+  margin: 0 0 1em;
+}
+
+.itemBody {
+  display: flex;
+  align-items: flex-start;
+}
+
+.icon {
+  margin-right: 0.5em;
+  font-size: 200%;
+}
diff --git a/app/components/FeatureList.tsx b/app/components/FeatureList.tsx
@@ -1,22 +1,8 @@
-import { ReactNode } from 'react';
-import { HUGE_AND_UP, MAX_WIDTH } from '../lib/style';
+import type { ReactNode } from 'react';
+import styles from './FeatureList.module.css';
 
 export function FeatureList(props: { children: ReactNode }) {
-  return (
-    <div
-      css={{
-        margin: '1em',
-        [HUGE_AND_UP]: {
-          maxWidth: MAX_WIDTH,
-          margin: '1em auto',
-        },
-        columns: '3 300px',
-        columnGap: '1em',
-      }}
-    >
-      {props.children}
-    </div>
-  );
+  return <div className={styles.featureList}>{props.children}</div>;
 }
 
 export function FeatureListItem(props: {
@@ -25,21 +11,10 @@ export function FeatureListItem(props: {
   text: string;
 }) {
   return (
-    <div
-      css={{
-        display: 'inline-block',
-        margin: '0 0 1em',
-        width: '100%',
-      }}
-    >
+    <div className={styles.item}>
       <h3 className="textAlignCenter">{props.heading}</h3>
-      <div
-        css={{
-          display: 'flex',
-          alignItems: 'flex-start',
-        }}
-      >
-        <div css={{ marginRight: '0.5em', fontSize: '200%' }}>{props.icon}</div>
+      <div className={styles.itemBody}>
+        <div className={styles.icon}>{props.icon}</div>
         <p className="flex1">{props.text}</p>
       </div>
     </div>

diff --git a/app/components/PuzzleStats.module.css b/app/components/PuzzleStats.module.css
@@ -0,0 +1,52 @@
+@value small-and-up from '../lib/definitions.module.css';
+
+.metaTable :global(.cell) {
+  overflow: hidden;
+  display: block !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.main {
+  flex: none;
+  padding-top: 0.5em;
+}
+
+/* stylelint-disable-next-line media-feature-name-no-unknown */
+@media (small-and-up) {
+  .stats {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .col {
+    width: 48%;
+  }
+
+  .stats[data-is-meta='true'] .col {
+    width: 31%;
+  }
+}
+
+.switcher {
+  padding-top: 1em;
+  text-align: center;
+}
+
+.submissionsList {
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.statsArea {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 auto;
+}
diff --git a/app/components/PuzzleStats.tsx b/app/components/PuzzleStats.tsx
@@ -12,9 +12,9 @@ import { getDocRef } from '../lib/firebaseWrapper';
 import { entryAndCrossAtPosition } from '../lib/gridBase';
 import { useMatchMedia } from '../lib/hooks';
 import { markdownToHast } from '../lib/markdown/markdown';
-import { SMALL_AND_UP, SMALL_AND_UP_RULES } from '../lib/style';
+import { SMALL_AND_UP_RULES } from '../lib/style';
 import { Direction, PuzzleResult, fromKeyboardEvent } from '../lib/types';
-import { isMetaSolution, logAsyncErrors, timeString } from '../lib/utils';
+import { clsx, isMetaSolution, logAsyncErrors, timeString } from '../lib/utils';
 import {
   fromCells,
   getClueMap,
@@ -33,6 +33,7 @@ import { Emoji } from './Emoji';
 import { GridView } from './Grid';
 import { Overlay } from './Overlay';
 import { SquareAndCols } from './Page';
+import styles from './PuzzleStats.module.css';
 import { useSnackbar } from './Snackbar';
 import { DefaultTopBar, TopBarLink } from './TopBar';
 
@@ -182,14 +183,7 @@ const MetaSubmissionList = (props: MetaSubmissionListProps) => {
       </p>
       <div className="margin1em">
         <Table
-          css={{
-            '& .cell': {
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
-              display: 'block !important',
-            },
-          }}
+          className={styles.metaTable}
           data={subs}
           columns={columns}
           onSort={onSort}
@@ -361,13 +355,7 @@ export const StatsPage = ({
       <Head>
         <title>{`Stats | ${puzzle.title} | Crosshare`}</title>
       </Head>
-      <div
-        css={{
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100%',
-        }}
-      >
+      <div className={styles.page}>
         <div className="flexNone">
           <DefaultTopBar>
             {!hideShare && stats?.sct ? (
@@ -402,60 +390,29 @@ export const StatsPage = ({
             )}
           </DefaultTopBar>
         </div>
-        <div
-          css={{
-            paddingTop: '0.5em',
-            flex: 'none',
-          }}
-        >
+        <div className={styles.main}>
           {stats ? (
             <>
               <h3 className="width100">
                 Stats for <b>{puzzle.title}</b>
               </h3>
-              <div
-                css={{
-                  [SMALL_AND_UP]: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                  },
-                }}
-              >
-                <div
-                  css={{
-                    [SMALL_AND_UP]: {
-                      width: isMeta ? '31%' : '48%',
-                    },
-                  }}
-                >
+              <div data-is-meta={isMeta} className={styles.stats}>
+                <div className={styles.col}>
                   <div>Total completions: {stats.n}</div>
                   <div>
                     Average completion time:{' '}
                     {stats.n && timeString(stats.nt / stats.n, true)}
                   </div>
                 </div>
-                <div
-                  css={{
-                    [SMALL_AND_UP]: {
-                      width: isMeta ? '31%' : '48%',
-                    },
-                  }}
-                >
+                <div className={styles.col}>
                   <div>Completions without helpers: {stats.s}</div>
                   <div>
                     Average time without helpers:{' '}
                     {stats.s && timeString(stats.st / stats.s, true)}
                   </div>
                 </div>
                 {isMeta ? (
-                  <div
-                    css={{
-                      [SMALL_AND_UP]: {
-                        width: '31%',
-                      },
-                    }}
-                  >
+                  <div className={styles.col}>
                     <div>
                       Correct contest submissions:{' '}
                       {stats.ct_subs?.filter((sub) =>
@@ -471,7 +428,7 @@ export const StatsPage = ({
                   ''
                 )}
               </div>
-              <div css={{ paddingTop: '1em', textAlign: 'center' }}>
+              <div className={styles.switcher}>
                 <ButtonAsLink
                   className="marginRight0-5em"
                   disabled={mode === StatsMode.AverageTime}
@@ -481,10 +438,10 @@ export const StatsPage = ({
                   text="Time to Correct"
                 />
                 <ButtonAsLink
-                  css={{
-                    marginLeft: '0.5em',
-                    marginRight: isMeta ? '0.5em' : 0,
-                  }}
+                  className={clsx(
+                    'marginLeft0-5em',
+                    isMeta && 'marginRight0-5em'
+                  )}
                   disabled={mode === StatsMode.AverageEditCount}
                   onClick={() => {
                     setMode(StatsMode.AverageEditCount);
@@ -515,22 +472,11 @@ export const StatsPage = ({
         </div>
         {stats ? (
           mode === StatsMode.MetaSubmissions ? (
-            <div
-              css={{
-                flex: '1 1 auto',
-                position: 'relative',
-              }}
-            >
+            <div className={styles.submissionsList}>
               <MetaSubmissionList puzzle={puzzle} stats={stats} />
             </div>
           ) : (
-            <div
-              css={{
-                flex: '1 1 auto',
-                overflow: 'hidden',
-                position: 'relative',
-              }}
-            >
+            <div className={styles.statsArea}>
               <PuzzleStats puzzle={puzzle} stats={stats} mode={mode} />
             </div>
           )