Client - add Sport administration

fittrackee_client/src/scss/base.scss

@@ -231,3 +231,83 @@ button {
     }
   }
 }
+
+.responsive-table {
+  margin-bottom: 15px;
+  /* responsive table, adapted from: */
+  /* https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
+  table {
+    width: 100%;
+    padding: $default-padding;
+    font-size: 0.9em;
+    border-collapse: collapse;
+
+    thead th {
+      vertical-align: center;
+      padding: $default-padding;
+      border-bottom: 2px solid var(--card-border-color);
+    }
+
+    tbody {
+      font-size: 0.95em;
+      td {
+        padding: $default-padding;
+        border-bottom: 1px solid var(--card-border-color);
+      }
+      tr:last-child td {
+        border: none;
+      }
+    }
+    .cell-heading {
+      background: var(--cell-heading-bg-color);
+      color: var(--cell-heading-color);
+      display: none;
+      font-size: 10px;
+      font-weight: bold;
+      padding: 5px;
+      position: absolute;
+      text-transform: uppercase;
+      top: 0;
+      left: 0;
+    }
+  }
+  @media screen and (max-width: $small-limit) {
+    table {
+      thead {
+        left: -9999px;
+        position: absolute;
+        visibility: hidden;
+      }
+      tr {
+        border-bottom: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 40px;
+      }
+      td {
+        border: 1px solid var(--card-border-color);
+        margin: 0 -1px -1px 0;
+        padding-top: 25px !important;
+        position: relative;
+        text-align: center;
+        width: 45%;
+      }
+      tbody {
+        tr:last-child td {
+          border: 1px solid var(--card-border-color);
+        }
+      }
+      .cell-heading {
+        display: flex;
+      }
+    }
+  }
+  @media screen and (max-width: $x-small-limit) {
+    table {
+      td {
+        width: 100%;
+      }
+    }
+  }
+}