From b0f1d7468f23de9fc6b9226e8532c9f07738dd6d Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sat, 2 May 2020 18:42:44 +0200
Subject: [PATCH] Client - update style to make tables more responsive

---
 .../src/components/Admin/AdminSports.jsx      | 25 +++++++++--
 .../src/components/Admin/AdminUsers.jsx       | 29 +++++++++++--
 fittrackee_client/src/components/App.css      | 42 +++++++++++++++++++
 3 files changed, 90 insertions(+), 6 deletions(-)

diff --git a/fittrackee_client/src/components/Admin/AdminSports.jsx b/fittrackee_client/src/components/Admin/AdminSports.jsx
index 4746182e..7083cf80 100644
--- a/fittrackee_client/src/components/Admin/AdminSports.jsx
+++ b/fittrackee_client/src/components/Admin/AdminSports.jsx
@@ -25,7 +25,7 @@ class AdminSports extends React.Component {
               <div className="card-header">{t('administration:Sports')}</div>
               <div className="card-body">
                 {sports.length > 0 && (
-                  <table className="table table-borderless">
+                  <table className="table">
                     <thead>
                       <tr>
                         <th>{t('administration:id')}</th>
@@ -38,16 +38,32 @@ class AdminSports extends React.Component {
                     <tbody>
                       {sports.map(sport => (
                         <tr key={sport.id}>
-                          <th scope="row">{sport.id}</th>
                           <td>
+                            <span className="heading-span">
+                              {t('administration:id')}
+                            </span>
+                            {sport.id}
+                          </td>
+                          <td>
+                            <span className="heading-span">
+                              {t('administration:Image')}
+                            </span>
                             <img
                               className="admin-img"
                               src={sport.img ? sport.img : '/img/photo.png'}
                               alt="sport logo"
                             />
                           </td>
-                          <td>{t(`sports:${sport.label}`)}</td>
                           <td>
+                            <span className="heading-span">
+                              {t('administration:Label')}
+                            </span>
+                            {t(`sports:${sport.label}`)}
+                          </td>
+                          <td>
+                            <span className="heading-span">
+                              {t('administration:Active')}
+                            </span>
                             {sport.is_active ? (
                               <i
                                 className="fa fa-check-square-o custom-fa"
@@ -63,6 +79,9 @@ class AdminSports extends React.Component {
                             )}
                           </td>
                           <td>
+                            <span className="heading-span">
+                              {t('administration:Actions')}
+                            </span>
                             <input
                               type="submit"
                               className={`btn btn-${
diff --git a/fittrackee_client/src/components/Admin/AdminUsers.jsx b/fittrackee_client/src/components/Admin/AdminUsers.jsx
index 590a73cd..52348e98 100644
--- a/fittrackee_client/src/components/Admin/AdminUsers.jsx
+++ b/fittrackee_client/src/components/Admin/AdminUsers.jsx
@@ -120,7 +120,7 @@ class AdminUsers extends React.Component {
                       </label>
                     </div>
                   </div>
-                  <table className="table table-borderless">
+                  <table className="table">
                     <thead>
                       <tr>
                         <th>#</th>
@@ -136,6 +136,7 @@ class AdminUsers extends React.Component {
                       {users.map(user => (
                         <tr key={user.username}>
                           <td>
+                            <span className="heading-span">#</span>
                             {user.picture === true ? (
                               <img
                                 alt="Avatar"
@@ -152,19 +153,38 @@ class AdminUsers extends React.Component {
                             )}
                           </td>
                           <td>
+                            <span className="heading-span">
+                              {t('user:Username')}
+                            </span>
                             <Link to={`/users/${user.username}`}>
                               {user.username}
                             </Link>
                           </td>
-                          <td>{user.email}</td>
                           <td>
+                            <span className="heading-span">
+                              {t('user:Email')}
+                            </span>
+                            {user.email}
+                          </td>
+                          <td>
+                            <span className="heading-span">
+                              {t('user:Registration Date')}
+                            </span>
                             {format(
                               new Date(user.created_at),
                               'dd/MM/yyyy HH:mm'
                             )}
                           </td>
-                          <td>{user.nb_activities}</td>
                           <td>
+                            <span className="heading-span">
+                              {t('activities:Activities')}
+                            </span>
+                            {user.nb_activities}
+                          </td>
+                          <td>
+                            <span className="heading-span">
+                              {t('user:Admin')}
+                            </span>
                             {user.admin ? (
                               <i
                                 className="fa fa-check-square-o custom-fa"
@@ -180,6 +200,9 @@ class AdminUsers extends React.Component {
                             )}
                           </td>
                           <td>
+                            <span className="heading-span">
+                              {t('administration:Actions')}
+                            </span>
                             <input
                               type="submit"
                               className={`btn btn-${
diff --git a/fittrackee_client/src/components/App.css b/fittrackee_client/src/components/App.css
index bef034f2..d7a82f24 100644
--- a/fittrackee_client/src/components/App.css
+++ b/fittrackee_client/src/components/App.css
@@ -527,6 +527,48 @@ label {
   margin-bottom: 5px;
 }
 
+
+
+/* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
+.heading-span {
+    background: #eee;
+    color: dimgrey;
+    display: none;
+    font-size: 10px;
+    font-weight: bold;
+    padding: 5px;
+    position: absolute;
+    text-transform: uppercase;
+    top: 0;
+    left: 0;
+}
+
+@media(max-width: 1024px) {
+    table thead {
+        left: -9999px;
+        position: absolute;
+        visibility: hidden;
+    }
+    table tr {
+        border-bottom: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 40px;
+    }
+    table td {
+        border: 1px solid lightgrey;
+        margin: 0 -1px -1px 0;
+        padding-top: 35px !important;
+        position: relative;
+        text-align: center;
+        width: 50%;
+    }
+    .heading-span  {
+        display: block;
+    }
+}
+
 .weather-img {
   max-width: 35px;
   max-height: 35px;