Mobile style for scoring

cqb13 · Sep 14, 2023 · 2a633c9 · 2a633c9
1 parent ee546c4
commit 2a633c9
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/components/general/button.tsx b/components/general/button.tsx
@@ -10,7 +10,7 @@ export default function Button({ title, onClick, selected }: Props) {
   return (
     <button
       type='button'
-      className={`inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-lightest text-sm font-medium text-gray-700 hover:shadow-card active:shadow-bar ${
+      className={`inline-flex items-center justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-lightest text-sm font-medium text-gray-700 hover:shadow-card active:shadow-bar ${
         selected ? "border-highlight" : ""
       }`}
       onClick={onClick}

diff --git a/components/scoring/scoreSetupMenu.tsx b/components/scoring/scoreSetupMenu.tsx
@@ -32,7 +32,7 @@ export default function ScoreSetupMenu(props: ScoreSetupMenuProps) {
         items={["Indoor", "Outdoor"]}
         setSelected={updateLocation}
       />
-      <div className='flex gap-2 items-center'>
+      <div className='flex gap-2 items-center max-smSm:flex-col'>
         <Slider
           title='Distance'
           jump={1}

diff --git a/components/scoring/scoringChart.tsx b/components/scoring/scoringChart.tsx
@@ -147,7 +147,7 @@ export default function ScoringChart(props: Props) {
       ) : null}
       <table className='shadow-card block rounded-md p-10 border border-gray-300'>
         <thead className=''>
-          {window.innerWidth > 768 ? <th>End</th> : null}
+          <th>End</th>
           {Array.from(Array(props.arrowsPerEnd), (x, i) => i + 1).map(
             (_, columnIndex) => (
               <th key={columnIndex}>Arrow {columnIndex + 1}</th>
@@ -160,17 +160,15 @@ export default function ScoringChart(props: Props) {
         </thead>
         <tbody>
           {data[currentSplit]?.map((row: number[], rowIndex: number) => (
-            <tr key={rowIndex}>
-              {window.innerWidth < 768 && props.arrowsPerEnd > 3 ? null : (
+            <tr key={rowIndex} className="w-full">
                 <td>{rowIndex + 1}</td>
-              )}
               {row.map((column: number, columnIndex: number) => (
                 <td key={columnIndex}>
                   <input
                     type='text'
                     id={`${columnIndex + 1}-${rowIndex + 1}`}
                     pattern='[0-9mxMX]*'
-                    className='bg-lightest border border-gray-300 rounded-sm outline-none focus:border-highlight px-2'
+                    className='bg-lightest border border-gray-300 rounded-sm outline-none focus:border-highlight px-2 w-11/12'
                     value={column}
                     onChange={(event) =>
                       handleChange(event, rowIndex, columnIndex)