fix: modal and layout for big screens (#306)

Etimo · Sep 14, 2023 · 11be571 · 11be571
1 parent 003c426
commit 11be571
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 35 deletions.
diff --git a/frontend-typescript/src/components/Inputs/Select.tsx b/frontend-typescript/src/components/Inputs/Select.tsx
@@ -1,25 +1,20 @@
-import { FC, memo, useCallback, useState } from 'react';
+import { FC, memo } from 'react';
 
 type SelectProps = {
   label: string;
   value: number | string;
-  options: {label:string, value: string}[];
+  options: { label: string; value: string }[];
   onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 };
 
-export const Select: FC<SelectProps> = memo(props => {
+export const Select: FC<SelectProps> = memo((props) => {
   const { label, value, options, onChange } = props;
-  //const [selectedValue, setSelectedValue] = useState(value);
-
-  // const handleOnChange = useCallback(() => {
-  //   onChange();
-  // }, [onChange]);
 
   return (
     <div className="flex flex-col">
       <label className="text-label">{label}</label>
       <select
-        className="border border-gray-800 rounded-md w-full max-w-[200px] p-1"
+        className="border border-gray-800 rounded-md w-full max-w-[200px] h-8 p-1"
         value={value}
         onChange={onChange}
       >
@@ -31,5 +26,5 @@ export const Select: FC<SelectProps> = memo(props => {
       </select>
     </div>
   );
-}); 
+});
 Select.displayName = 'Select';
diff --git a/frontend-typescript/src/components/Modal.tsx b/frontend-typescript/src/components/Modal.tsx
@@ -0,0 +1,22 @@
+export const Modal = ({ children }: React.PropsWithChildren) => {
+  return (
+    <div
+      className="relative z-10"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+            <div className="bg-white dark:bg-gray-800 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <div className="sm:flex sm:items-start">{children}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend-typescript/src/components/Rules.tsx b/frontend-typescript/src/components/Rules.tsx
@@ -1,5 +1,6 @@
 import { FC, memo } from 'react';
 import { IRules, useBoardConfig } from '../hooks/useBoardConfig';
+import { Modal } from './Modal';
 
 type RulesProps = {
   onClose: () => void;
@@ -9,16 +10,14 @@ type RulesProps = {
 
 export const Rules: FC<RulesProps> = memo((props) => {
   const { visible, seasonId, onClose } = props;
-  const rules = true;
-
   const seasonRules: IRules = useBoardConfig(seasonId);
 
   return visible ? (
-    <div className="modal-wrapper">
-      <div className="relative">
-        <h1 className="text-xl mb-3">Season rules</h1>
+    <Modal>
+      <div>
+        <h1 className="text-xl 3xl:text-2xl mb-3">Season rules</h1>
 
-        {rules ? (
+        {seasonRules ? (
           <>
             <label className="text-label mb-0">Grid size</label>
             <p className="mt-0 mb-2">{seasonRules.gridSize}</p>
@@ -47,7 +46,7 @@ export const Rules: FC<RulesProps> = memo((props) => {
       <button className="modal-button" onClick={() => onClose()}>
         x
       </button>
-    </div>
+    </Modal>
   ) : (
     <></>
   );

diff --git a/frontend-typescript/src/components/SideMenu/SideMenu.tsx b/frontend-typescript/src/components/SideMenu/SideMenu.tsx
@@ -52,7 +52,7 @@ export const SideMenu: FC<SideMenuProps> = memo((props) => {
         <div className="mt-2">
           <button
             onClick={() => setRulesVisible(true)}
-            className="font-sans text-etimo dark:text-slate-400 text-xs font-normal"
+            className="font-sans text-etimo dark:text-slate-400 text-xs 4xl:text-lg font-normal"
           >
             Season rules
           </button>

diff --git a/frontend-typescript/src/components/Teams.tsx b/frontend-typescript/src/components/Teams.tsx
@@ -1,25 +1,32 @@
+import useFetch from '../hooks/useFetch';
 import { useFetchRepeatedly } from '../hooks/useFetchRepeatedly';
+import { HighScoreTable } from './HighScoreTable';
 import { Table } from './Table';
 
 const url: string = 'api/teams';
 const delay: number = 60000; // 1 min
 
 export const Teams = () => {
   const teams = useFetchRepeatedly(url, delay, []) as ITeam[];
+  const { response: currentSeason } = useFetch('api/seasons/current', '0');
+
   return (
-    <div className="flex justify-center">
-      <div className="w-1/2">
-        <Table
-          label="Teams"
-          cols={['Name', 'Abbreviation', 'Icon']}
-          data={teams.map((team) => {
-            return {
-              name: team.name,
-              abbreviation: team.abbreviation,
-              icon: <img src={team.logotypeUrl} alt="school-logo"></img>,
-            };
-          })}
-        />
+    <div className="flex flex-col justify-center mx-auto">
+      <div className="mx-4">
+        <div className="mb-10">
+          <Table
+            label="Teams"
+            cols={['Name', 'Abbreviation', 'Icon']}
+            data={teams.map((team) => {
+              return {
+                name: team.name,
+                abbreviation: team.abbreviation,
+                icon: <img src={team.logotypeUrl} alt="school-logo" />,
+              };
+            })}
+          />
+        </div>
+        <HighScoreTable seasonId={currentSeason.id} />
       </div>
     </div>
   );

diff --git a/frontend-typescript/src/index.css b/frontend-typescript/src/index.css
@@ -17,12 +17,12 @@
 
   .text-label {
     @apply font-sans not-italic font-bold mb-1;
-    @apply text-sm text-etimo dark:text-slate-400 block;
+    @apply text-sm 4xl:text-xl text-etimo dark:text-slate-400 block;
   }
 
   .text-body {
     @apply font-sans not-italic mb-1;
-    @apply text-sm text-etimo dark:text-slate-400 block;
+    @apply text-sm 4xl:text-lg text-etimo dark:text-slate-400 block;
   }
 
   a,
@@ -53,7 +53,7 @@
   }
 
   .modal-button {
-    @apply absolute top-[6px] right-[12px];
+    @apply absolute text-2xl top-[6px] right-[12px];
   }
 }
 

diff --git a/frontend-typescript/tailwind.config.cjs b/frontend-typescript/tailwind.config.cjs
@@ -12,7 +12,13 @@ module.exports = {
       },
     },
     fontFamily: { sans: ['Quattrocento Sans', ...defaultSans] },
-    extend: { colors: { etimo: '#2c3e50', 'etimo-light': '#375b7d' } },
+    extend: {
+      colors: { etimo: '#2c3e50', 'etimo-light': '#375b7d' },
+      screens: {
+        '3xl': '1700px',
+        '4xl': '2300px',
+      },
+    },
   },
   plugins: [],
 };