Better responsiveness for slate topbar and margins

crosshare-org · Nov 27, 2023 · 4399353 · 4399353
1 parent e544e8d
commit 4399353
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/app/components/Page.tsx b/app/components/Page.tsx
@@ -39,13 +39,17 @@ const clueAreaCss = css({
   },
 });
 
+export const SLATE_PADDING_SMALL = 5;
+export const SLATE_PADDING_MED = 20;
+export const SLATE_PADDING_LARGE = 50;
+
 const slateClueAreaCss = css({
-  width: 'calc(100vw - 100px)',
+  width: `calc(100vw - ${2 * SLATE_PADDING_SMALL}px)`,
   [SMALL_AND_UP]: {
-    width: 'calc(34vw - 100px)',
+    width: `calc(34vw - ${2 * SLATE_PADDING_MED}px)`,
   },
   [LARGE_AND_UP]: {
-    width: 'calc(50vw - 100px)',
+    width: `calc(50vw - ${2 * SLATE_PADDING_LARGE}px)`,
   },
 });
 
@@ -132,7 +136,9 @@ export const SquareAndCols = (props: SquareAndColsProps) => {
           css={{
             flex: '0',
             width: '100vw',
-            ...(isSlate && { width: 'calc(100vw - 100px)' }),
+            ...(isSlate && {
+              width: `calc(100vw - ${2 * SLATE_PADDING_SMALL}px)`,
+            }),
             [SMALL_AND_UP]: {
               width: '66vw',
             },

diff --git a/app/components/Puzzle.tsx b/app/components/Puzzle.tsx
@@ -92,7 +92,13 @@ import {
   TopBarDropDown,
   TopBarDropDownLinkSimpleA,
 } from './TopBar';
-import { SquareAndCols, TwoCol } from './Page';
+import {
+  SLATE_PADDING_LARGE,
+  SLATE_PADDING_MED,
+  SLATE_PADDING_SMALL,
+  SquareAndCols,
+  TwoCol,
+} from './Page';
 import {
   usePersistedBoolean,
   useMatchMedia,
@@ -110,6 +116,8 @@ import type { User } from 'firebase/auth';
 import { Emoji } from './Emoji';
 import {
   FULLSCREEN_CSS,
+  LARGE_AND_UP,
+  SMALL_AND_UP,
   SMALL_AND_UP_RULES,
   SQUARE_HEADER_HEIGHT,
 } from '../lib/style';
@@ -247,6 +255,10 @@ const AboveTheGridClue = memo(function AboveTheGridClue({
   );
 });
 
+const SlateButtonMargin = () => {
+  return <div css={{ flexGrow: 1, maxWidth: '1.5rem' }}></div>;
+};
+
 interface PuzzleProps extends PuzzlePageResultProps {
   play: PlayWithoutUserT | null;
   loadingPlayState: boolean;
@@ -928,6 +940,7 @@ export const Puzzle = ({
             </>
           )}
         </TopBarDropDown>
+        {isSlate ? <SlateButtonMargin /> : ''}
         {!state.autocheck ? (
           <TopBarDropDown
             icon={isSlate ? <Check /> : <FaCheck />}
@@ -1194,7 +1207,13 @@ export const Puzzle = ({
               backgroundColor: 'var(--bg)',
               border: '1px solid var(--slate-container-border)',
               borderRadius: '0.25rem',
-              padding: '50px',
+              padding: SLATE_PADDING_SMALL,
+              [SMALL_AND_UP]: {
+                padding: SLATE_PADDING_MED,
+              },
+              [LARGE_AND_UP]: {
+                padding: SLATE_PADDING_LARGE,
+              },
             }),
           }}
         >
@@ -1229,7 +1248,7 @@ export const Puzzle = ({
                           <strong
                             css={{
                               verticalAlign: 'middle',
-                              marginRight: '0.5em',
+                              marginRight: '0.75rem',
                             }}
                           >
                             {timeString(state.displaySeconds, true)}
@@ -1250,9 +1269,10 @@ export const Puzzle = ({
                           dispatch({ type: 'PAUSEACTION' });
                           writePlayToDBIfNeeded();
                         }}
-                        keepText={true}
+                        keepText={!isSlate}
                       />
                     </div>
+                    {isSlate ? <SlateButtonMargin /> : ''}
                     <TopBarLink
                       icon={
                         state.clueView ? (
@@ -1275,7 +1295,9 @@ export const Puzzle = ({
                         dispatch(a);
                       }}
                     />
+                    {isSlate ? <SlateButtonMargin /> : ''}
                     {checkRevealMenus}
+                    {isSlate ? <SlateButtonMargin /> : ''}
                     {moreMenu}
                   </>
                 ) : (

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
@@ -241,8 +241,11 @@ const TopBarLinkContents = (props: TopBarLinkCommonProps) => {
       <span
         css={{
           verticalAlign: isSlate ? 'middle' : 'baseline',
-          fontSize: isSlate ? 20 : HEADER_HEIGHT - 10,
-          ...(isSlate && { display: 'inline-block', marginRight: '0.25rem' }),
+          fontSize: isSlate ? 15 : HEADER_HEIGHT - 10,
+          ...(isSlate && {
+            display: 'inline-block',
+            [SMALL_AND_UP]: { fontSize: 20, marginRight: '0.25rem' },
+          }),
         }}
       >
         {props.icon}
@@ -276,19 +279,11 @@ const SlateButtonCss = css({
   color: 'var(--slate-button-text)',
   backgroundColor: 'var(--slate-button-bg)',
   border: '1px solid var(--slate-button-border)',
-  margin: '0 0.75rem',
-  '&:last-child': {
-    marginRight: 0,
-  },
-  '&:first-child': {
-    marginLeft: 0,
-  },
   borderRadius: '3px',
-  padding: '0 0.45rem 0.2rem',
+  padding: '0 0.45rem',
   '&:hover, &:focus': {
     backgroundColor: 'var(--slate-button-bg-hover)',
   },
-  lineHeight: '1.75rem',
 });
 
 export const TopBarLink = (props: TopBarLinkProps) => {
@@ -411,7 +406,7 @@ export const TopBar = ({
       <>
         <header
           css={{
-            height: HEADER_HEIGHT,
+            height: isSlate ? 30 : HEADER_HEIGHT,
             background: 'var(--primary)',
             color: 'var(--onprimary)',
             /* Pride month */
@@ -437,7 +432,11 @@ export const TopBar = ({
               }),
             ...(isSlate && {
               background: 'none',
-              marginBottom: '2rem',
+              marginBottom: '1rem',
+              [SMALL_AND_UP]: {
+                height: HEADER_HEIGHT,
+                marginBottom: '2rem',
+              },
             }),
           }}
         >