From c0efb018031612f2dbc592c35d31eac25b44ed41 Mon Sep 17 00:00:00 2001
From: Martin Berka <martin.berka@radbuza.net>
Date: Sat, 29 Jul 2023 10:43:00 +0200
Subject: [PATCH] =?UTF-8?q?Zp=C5=99ehledn=C4=9Bn=C3=AD=20tabulky=20v=C3=BD?=
 =?UTF-8?q?b=C4=9Bru?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.css | 21 ++++++++++++++-
 client/src/App.tsx | 64 ++++++++++++++++++++++++++--------------------
 2 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index af56180..fa663fd 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -67,10 +67,29 @@
   justify-content: flex-end;
 }
 
-.trash-icon {
+.table {
+  margin-bottom: 0;
+}
+
+.table> :not(caption) .trash-icon {
   color: rgb(0, 89, 255);
   cursor: pointer;
   margin-left: 10px;
+  padding: 0;
+}
+
+.table ul {
+  padding: 0;
+  margin-left: 20px;
+  margin-bottom: 0;
+}
+
+.table td {
+  vertical-align: top;
+}
+
+.table>tbody>tr>td>table>tbody>tr>td {
+  border: none;
 }
 
 .qr-code {
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 67d403c..7caae96 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -257,7 +257,7 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>Ne.</li>
+              <li>Přehlednější zobrazení tabulky</li>
             </ul>
           </Alert>
           <h1 className='title'>Dnes je {data.date}</h1>
@@ -287,7 +287,7 @@ function App() {
                 </Form.Select>
               </>}
               {Object.keys(data.choices).length > 0 ?
-                <Table striped bordered hover className='results-table mt-5'>
+                <Table bordered className='mt-5'>
                   <tbody>
                     {Object.keys(data.choices).map((locationKey: string) => {
                       const locationName = Object.values(Locations)[Number(locationKey)];
@@ -295,32 +295,40 @@ function App() {
                       return (
                         <tr key={locationKey}>
                           <td>{locationName}</td>
-                          <td>
-                            <ul>
-                              {locationLoginList.map((entry: [string, number[]], index) => {
-                                const login = entry[0];
-                                const userChoices = entry[1];
-                                return <li key={index}>{login} {login === auth.login && <FontAwesomeIcon onClick={() => {
-                                  doRemoveChoices(locationKey);
-                                }} title='Odstranit, včetně případných podřízených jídel' className='trash-icon' icon={faTrashCan} />}
-                                  {userChoices?.length && food ? <ul>
-                                    {userChoices.map(foodIndex => {
-                                      const locationsKey = Object.keys(Locations)[Number(locationKey)]
-                                      const restaurantKey = Object.keys(Restaurants).indexOf(locationsKey);
-                                      const restaurant = Object.values(Restaurants)[restaurantKey];
-                                      const foodName = food[restaurant][foodIndex].name;
-                                      return <li key={foodIndex}>
-                                        {foodName}
-                                        {login === auth.login && <FontAwesomeIcon onClick={() => {
-                                          doRemoveFoodChoice(locationKey, foodIndex);
-                                        }} title={`Odstranit ${foodName}`} className='trash-icon' icon={faTrashCan} />}
-                                      </li>
-                                    })}
-                                  </ul> : null}
-                                </li>
-                              }
-                              )}
-                            </ul>
+                          <td className='p-0'>
+                            <Table>
+                              <tbody>
+                                {locationLoginList.map((entry: [string, number[]], index) => {
+                                  const login = entry[0];
+                                  const userChoices = entry[1];
+                                  return <tr key={index}>
+                                    <td className='text-nowrap'>
+                                      {login}
+                                      {login === auth.login && <FontAwesomeIcon onClick={() => {
+                                        doRemoveChoices(locationKey);
+                                      }} title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`} className='trash-icon' icon={faTrashCan} />}
+                                    </td>
+                                    {userChoices?.length && food ? <td className='w-100'>
+                                      <ul>
+                                        {userChoices.map(foodIndex => {
+                                          const locationsKey = Object.keys(Locations)[Number(locationKey)]
+                                          const restaurantKey = Object.keys(Restaurants).indexOf(locationsKey);
+                                          const restaurant = Object.values(Restaurants)[restaurantKey];
+                                          const foodName = food[restaurant][foodIndex].name;
+                                          return <li key={foodIndex}>
+                                            {foodName}
+                                            {login === auth.login && <FontAwesomeIcon onClick={() => {
+                                              doRemoveFoodChoice(locationKey, foodIndex);
+                                            }} title={`Odstranit ${foodName}`} className='trash-icon' icon={faTrashCan} />}
+                                          </li>
+                                        })}
+                                      </ul>
+                                    </td> : null}
+                                  </tr>
+                                }
+                                )}
+                              </tbody>
+                            </Table>
                           </td>
                         </tr>)
                     }