Make user management table responsive (#1882)

* Make user management table responsive

* Make responsive table ready for translation

src/Ombi/ClientApp/app/usermanagement/usermanagement.component.html

@@ -4,7 +4,7 @@
 
 <button type="button" class="btn btn-success-outline" [routerLink]="['/usermanagement/add']">Add User</button>
 <!-- Table -->
-<table class="table table-striped table-hover table-responsive table-condensed">
+<table class="table table-striped table-hover table-responsive table-condensed table-usermanagement">
     <thead>
         <tr>
             <th>
@@ -44,28 +44,28 @@
     </thead>
     <tbody>
         <tr *ngFor="let u of users">
-            <td>
+            <td class="td-labelled" data-label="Select:">
                 <input type="checkbox" [(ngModel)]="u.checked">
             </td>
-            <td>
+            <td class="td-labelled" data-label="Username:">
                 {{u.userName}}
             </td>
-            <td>
+            <td class="td-labelled" data-label="Alias:">
                 {{u.alias}}
             </td>
-            <td>
+            <td class="td-labelled" data-label="Email:">
                 {{u.emailAddress}}
             </td>
-            <td>
+            <td class="td-labelled" data-label="Roles:">
                 <div *ngFor="let claim of u.claims">
                     <span *ngIf="claim.enabled">{{claim.value}}</span>
                 </div>
 
             </td>
-            <td>
+            <td class="td-labelled" data-label="Last Logged In:">
                 {{u.lastLoggedIn | date: 'short'}}
             </td>
-            <td>
+            <td class="td-labelled" data-label="User Type:">
                 <span *ngIf="u.userType === 1">Local User</span>
                 <span *ngIf="u.userType === 2">Plex User</span>
                 <span *ngIf="u.userType === 3">Emby User</span>

src/Ombi/ClientApp/styles/base.scss

@@ -858,4 +858,47 @@ a > h4:hover {
 
 .card {
     padding-top:15px;
+}
+
+@media only screen and (max-width: 768px) {
+
+    .table-usermanagement {
+        /* Force table to not be like tables anymore */
+        display: block;
+
+        thead, tbody, th, td, tr {
+            display: block;
+        }
+
+        /* Hide table headers (but not display: none;, for accessibility) */
+        thead tr {
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+        }
+
+        td {
+            /* Behave  like a "row" */
+            border: none;
+            border-bottom: 1px solid #eee;
+            position: relative;
+            padding-left: 50% $i;
+            min-height: 25px;
+        }
+
+        td:before {
+            /* Now like a table header */
+            position: absolute;
+            /* Top/left values mimic padding */
+            top: 6px;
+            left: 6px;
+            width: 45%;
+            padding-right: 10px;
+            white-space: nowrap;
+        }
+        /* Label the data */
+        .td-labelled:before {
+            content: attr(data-label)
+        }
+    }
 }