Make frontend more responsive (#371)

evroon · Dec 2, 2023 · c817760 · c817760 · vercel · Dec 2, 2023
1 parent ac53331
commit c817760
Show file tree

Hide file tree

Showing 20 changed files with 277 additions and 155 deletions.
diff --git a/frontend/src/components/modals/player_create_modal.tsx b/frontend/src/components/modals/player_create_modal.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Group, Modal, Tabs, TextInput } from '@mantine/core';
+import { Button, Checkbox, Modal, Tabs, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { IconUser, IconUserPlus, IconUsers } from '@tabler/icons-react';
 import { useState } from 'react';
@@ -135,14 +135,11 @@ export default function PlayerCreateModal({
         </Tabs>
       </Modal>
 
-      <Group justify="right">
-        <SaveButton
-          onClick={() => setOpened(true)}
-          leftSection={<IconUserPlus size={24} />}
-          title="Add Player"
-          mt="1.5rem"
-        />
-      </Group>
+      <SaveButton
+        onClick={() => setOpened(true)}
+        leftSection={<IconUserPlus size={24} />}
+        title="Add Player"
+      />
     </>
   );
 }
diff --git a/frontend/src/components/modals/team_create_modal.tsx b/frontend/src/components/modals/team_create_modal.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Group, Modal, MultiSelect, Tabs, TextInput } from '@mantine/core';
+import { Button, Checkbox, Modal, MultiSelect, Tabs, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { IconUser, IconUsers, IconUsersPlus } from '@tabler/icons-react';
 import { useState } from 'react';
@@ -150,14 +150,12 @@ export default function TeamCreateModal({
         </Tabs>
       </Modal>
 
-      <Group justify="right">
-        <SaveButton
-          onClick={() => setOpened(true)}
-          leftSection={<IconUsersPlus size={24} />}
-          title="Add Team"
-          mt="1.5rem"
-        />
-      </Group>
+      <SaveButton
+        onClick={() => setOpened(true)}
+        leftSection={<IconUsersPlus size={24} />}
+        title="Add Team"
+        mb={0}
+      />
     </>
   );
 }
diff --git a/frontend/src/components/modals/tournament_modal.tsx b/frontend/src/components/modals/tournament_modal.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   Checkbox,
   Grid,
-  Group,
   Image,
   Modal,
   NumberInput,
@@ -186,13 +185,12 @@ export default function TournamentModal({
           clubs={clubs}
         />
       </Modal>
-      <Group justify="right">
-        <SaveButton
-          onClick={() => setOpened(true)}
-          leftSection={<GoPlus size={24} />}
-          title={operation_text}
-        />
-      </Group>
+      <SaveButton
+        fullWidth
+        onClick={() => setOpened(true)}
+        leftSection={<GoPlus size={24} />}
+        title={operation_text}
+      />
     </>
   );
 }
diff --git a/frontend/src/components/navbar/_brand.tsx b/frontend/src/components/navbar/_brand.tsx
@@ -6,7 +6,7 @@ export function Brand() {
   const router = useRouter();
 
   return (
-    <Center style={{ height: '50px' }}>
+    <Center mr="1rem">
       <UnstyledButton
         onClick={async () => {
           await router.push('/');

diff --git a/frontend/src/components/navbar/_main_links.module.css b/frontend/src/components/navbar/_main_links.module.css
@@ -33,3 +33,25 @@
     }
   }
 }
+
+
+.mobileLink {
+  &:hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-blue-light);
+      color: var(--mantine-color-blue-light-color);
+    }
+  }
+}
+
+
+
+.mobileLinkGroup {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
diff --git a/frontend/src/components/navbar/_main_links.tsx b/frontend/src/components/navbar/_main_links.tsx
@@ -1,7 +1,13 @@
-import { Tooltip, UnstyledButton } from '@mantine/core';
+import { Center, Divider, Group, Tooltip, UnstyledButton } from '@mantine/core';
 import {
   Icon,
+  IconBook,
+  IconBrandGithub,
+  IconBrowser,
   IconCalendar,
+  IconDots,
+  IconHome,
+  IconLogout,
   IconSettings,
   IconSoccerField,
   IconTournament,
@@ -12,30 +18,104 @@ import {
 import { NextRouter, useRouter } from 'next/router';
 import React from 'react';
 
+import { getBaseApiUrl } from '../../services/adapter';
 import classes from './_main_links.module.css';
 
 interface MainLinkProps {
   icon: Icon;
   label: string;
-  endpoint: string;
-  router: NextRouter;
+  link: string;
+  links?: MainLinkProps[] | null;
 }
 
-function MainLink({ item, pathName }: { item: MainLinkProps; pathName: String }) {
+function MainLinkMobile({
+  router,
+  item,
+  pathName,
+}: {
+  router: NextRouter;
+  item: MainLinkProps;
+  pathName: String;
+}) {
   return (
-    <Tooltip position="right" label={item.label} transitionProps={{ duration: 0 }}>
+    <>
       <UnstyledButton
-        onClick={() => item.router.push(item.endpoint)}
-        className={classes.link}
-        data-active={pathName === item.endpoint || undefined}
+        hiddenFrom="sm"
+        className={classes.mobileLink}
+        style={{ width: '100%' }}
+        onClick={() => router.push(item.link)}
+        data-active={pathName === item.link || undefined}
       >
-        <item.icon stroke={1.5} />
+        <Group className={classes.mobileLinkGroup}>
+          <item.icon stroke={1.5} />
+          <p style={{ marginLeft: '0.5rem' }}>{item.label}</p>
+        </Group>
+        <Divider />
       </UnstyledButton>
-    </Tooltip>
+    </>
+  );
+}
+
+function MainLink({
+  router,
+  item,
+  pathName,
+}: {
+  router: NextRouter;
+  item: MainLinkProps;
+  pathName: String;
+}) {
+  return (
+    <>
+      <Tooltip position="right" label={item.label} transitionProps={{ duration: 0 }}>
+        <UnstyledButton
+          visibleFrom="sm"
+          onClick={() => router.push(item.link)}
+          className={classes.link}
+          data-active={pathName === item.link || undefined}
+        >
+          <item.icon stroke={1.5} />
+        </UnstyledButton>
+      </Tooltip>
+      <MainLinkMobile router={router} item={item} pathName={pathName} />
+    </>
   );
 }
 
-export function MainLinks({ tournament_id }: any) {
+export function getBaseLinksDict() {
+  return [
+    { link: '/clubs', label: 'Clubs', links: [], icon: IconUsers },
+    { link: '/', label: 'Tournaments', links: [], icon: IconHome },
+    {
+      link: '/user',
+      label: 'User',
+      links: [{ link: '/user', label: 'Logout', icon: IconLogout }],
+      icon: IconUser,
+    },
+    {
+      icon: IconDots,
+      link: '',
+      label: 'More',
+      links: [
+        { link: 'https://evroon.github.io/bracket/', label: 'Website', icon: IconBrowser },
+        { link: 'https://github.com/evroon/bracket', label: 'GitHub', icon: IconBrandGithub },
+        { link: `${getBaseApiUrl()}/docs`, label: 'API docs', icon: IconBook },
+      ],
+    },
+  ];
+}
+
+export function getBaseLinks() {
+  const router = useRouter();
+  const pathName = router.pathname.replace(/\/+$/, '');
+  return getBaseLinksDict()
+    .filter((link) => link.links.length < 1)
+    .map((link) => (
+      <MainLinkMobile router={router} key={link.label} item={link} pathName={pathName} />
+    ));
+}
+
+export function TournamentLinks({ tournament_id }: any) {
   const router = useRouter();
   const tm_prefix = `/tournaments/${tournament_id}`;
   const pathName = router.pathname.replace('[id]', tournament_id).replace(/\/+$/, '');
@@ -44,47 +124,50 @@ export function MainLinks({ tournament_id }: any) {
     {
       icon: IconTournament,
       label: 'Schedule',
-      endpoint: `${tm_prefix}`,
-      router,
+      link: `${tm_prefix}`,
     },
     {
       icon: IconUser,
       label: 'Players',
-      endpoint: `${tm_prefix}/players`,
-      router,
+      link: `${tm_prefix}/players`,
     },
     {
       icon: IconUsers,
       label: 'Teams',
-      endpoint: `${tm_prefix}/teams`,
-      router,
+      link: `${tm_prefix}/teams`,
     },
     {
       icon: IconSoccerField,
       label: 'Courts',
-      endpoint: `${tm_prefix}/courts`,
-      router,
+      link: `${tm_prefix}/courts`,
     },
     {
       icon: IconTrophy,
       label: 'Stages',
-      endpoint: `${tm_prefix}/stages`,
-      router,
+      link: `${tm_prefix}/stages`,
     },
     {
       icon: IconCalendar,
       label: 'Planning',
-      endpoint: `${tm_prefix}/schedule`,
-      router,
+      link: `${tm_prefix}/schedule`,
     },
     {
       icon: IconSettings,
       label: 'Tournament Settings',
-      endpoint: `${tm_prefix}/settings`,
-      router,
+      link: `${tm_prefix}/settings`,
     },
   ];
 
-  const links = data.map((link) => <MainLink key={link.label} item={link} pathName={pathName} />);
-  return <div>{links}</div>;
+  const links = data.map((link) => (
+    <MainLink router={router} key={link.label} item={link} pathName={pathName} />
+  ));
+  return (
+    <>
+      <Center hiddenFrom="sm">
+        <h2>Tournament</h2>
+      </Center>
+      <Divider hiddenFrom="sm" />
+      {links}
+    </>
+  );
 }
diff --git a/frontend/src/components/tables/players.tsx b/frontend/src/components/tables/players.tsx
@@ -104,7 +104,7 @@ export default function PlayersTable({
   if (rows.length < 1) return <EmptyTableInfo entity_name="players" />;
 
   return (
-    <TableLayout>
+    <TableLayout miw={900}>
       <Table.Thead>
         <Table.Tr>
           <ThSortable state={tableState} field="active">

diff --git a/frontend/src/components/tables/standings.tsx b/frontend/src/components/tables/standings.tsx
@@ -53,7 +53,7 @@ export default function StandingsTable({ swrTeamsResponse }: { swrTeamsResponse:
   if (rows.length < 1) return <EmptyTableInfo entity_name="teams" />;
 
   return (
-    <TableLayoutLarge display_mode="presentation">
+    <TableLayoutLarge display_mode="presentation" miw={850}>
       <Table.Thead>
         <Table.Tr>
           <ThNotSortable>#</ThNotSortable>

diff --git a/frontend/src/components/tables/table.tsx b/frontend/src/components/tables/table.tsx
@@ -81,12 +81,19 @@ export function ThNotSortable({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default function TableLayout({ children }: any) {
+export default function TableLayout(props: any) {
   return (
     <>
       <ScrollArea>
-        <Table horizontalSpacing="md" verticalSpacing="xs" striped highlightOnHover>
-          {children}
+        <Table
+          horizontalSpacing="md"
+          verticalSpacing="xs"
+          striped
+          highlightOnHover
+          layout="fixed"
+          {...props}
+        >
+          {props.children}
         </Table>
       </ScrollArea>
     </>

diff --git a/frontend/src/components/tables/teams.tsx b/frontend/src/components/tables/teams.tsx
@@ -62,7 +62,7 @@ export default function TeamsTable({
   if (rows.length < 1) return <EmptyTableInfo entity_name="teams" />;
 
   return (
-    <TableLayout>
+    <TableLayout miw={850}>
       <Table.Thead>
         <Table.Tr>
           <ThSortable state={tableState} field="active">

diff --git a/frontend/src/components/tables/tournaments.tsx b/frontend/src/components/tables/tournaments.tsx
@@ -62,7 +62,7 @@ export default function TournamentsTable({
   if (rows.length < 1) return <EmptyTableInfo entity_name="tournaments" />;
 
   return (
-    <TableLayout>
+    <TableLayout miw={550}>
       <Table.Thead>
         <Table.Tr>
           <ThSortable state={tableState} field="name">

diff --git a/frontend/src/components/tables/upcoming_matches.tsx b/frontend/src/components/tables/upcoming_matches.tsx
@@ -90,7 +90,7 @@ export default function UpcomingMatchesTable({
   if (rows.length < 1) return <EmptyTableInfo entity_name="upcoming matches" />;
 
   return (
-    <TableLayout>
+    <TableLayout miw={850}>
       <Table.Thead>
         <Table.Tr>
           <ThSortable state={tableState} field="is_recommended">

diff --git a/frontend/src/components/utility.module.css b/frontend/src/components/utility.module.css
@@ -0,0 +1,5 @@
+.fullWithMobile {
+  @media (max-width: $mantine-breakpoint-sm) {
+      width: 100%;
+  }
+}