Made mails and reports table responsive for small screens

Author: cry-inc

ui/components/mailtable.js

@@ -59,20 +59,20 @@ export class MailTable extends LitElement {
             <table>
                 <tr>
                     <th>Subject</th>
-                    <th>Sender</th>
-                    <th>Date</th>
-                    <th class="help" title="Size of E-Mail in Bytes">Size</th>
-                    <th class="help" title="Number of XML files in the Mail">XMLs</th>
-                    <th class="help" title="Did the Mail cause DMARC Parsing Errors?">Errors</th>
+                    <th class="sm-hidden">Sender</th>
+                    <th class="md-hidden">Date</th>
+                    <th class="xs-hidden help" title="Size of E-Mail in Bytes">Size</th>
+                    <th class="md-hidden help" title="Number of XML files in the Mail">XMLs</th>
+                    <th class="xs-hidden help" title="Did the Mail cause DMARC Parsing Errors?">Errors</th>
                 </tr>
                 ${this.mails.length !== 0 ? this.mails.map((mail) =>
                     html`<tr> 
                         <td><a href="#/mails/${mail.uid}">${this.prepareSubject(mail.subject)}</a></td>    
-                        <td><a href="#/mails?sender=${encodeURIComponent(mail.sender)}">${mail.sender}</a></td>
-                        <td>${new Date(mail.date * 1000).toLocaleString()}</td>
-                        <td>${this.prepareSize(mail)}</td>
-                        <td>${this.prepareXmlFileCount(mail)}</td>
-                        <td>${this.prepareParsingError(mail)}</td>
+                        <td class="sm-hidden"><a href="#/mails?sender=${encodeURIComponent(mail.sender)}">${mail.sender}</a></td>
+                        <td class="md-hidden">${new Date(mail.date * 1000).toLocaleString()}</td>
+                        <td class="xs-hidden">${this.prepareSize(mail)}</td>
+                        <td class="md-hidden">${this.prepareXmlFileCount(mail)}</td>
+                        <td class="xs-hidden">${this.prepareParsingError(mail)}</td>
                     </tr>`
                 ) : html`<tr>
                         <td colspan="4">No mails found.</td>

ui/components/reporttable.js

@@ -13,6 +13,15 @@ export class ReportTable extends LitElement {
         this.reports = [];
     }
 
+    prepareId(id) {
+        const limit = 25;
+        if (id.length <= limit) {
+            return id;
+        } else {
+            return id.substring(0, limit) + "...";
+        }
+    }
+
     renderProblemsBadge(problems) {
         if (problems) {
             return html`<span class="badge badge-negative">Yes</span>`;
@@ -26,22 +35,22 @@ export class ReportTable extends LitElement {
             <table>
                 <tr>
                     <th>ID</th>
-                    <th>Organization</th>
-                    <th>Domain</th>
+                    <th class="xs-hidden">Organization</th>
+                    <th class="sm-hidden">Domain</th>
                     <th class="help" title="Reports that indicate possible problems">Problems</th>
-                    <th>Records</th>
-                    <th>Begin</th>
-                    <th>End</th>
+                    <th class="sm-hidden">Records</th>
+                    <th class="md-hidden">Begin</th>
+                    <th class="md-hidden">End</th>
                 </tr>
                 ${this.reports.length !== 0 ? this.reports.map((report) =>
                     html`<tr>
-                            <td><a href="#/reports/${report.hash}">${report.id}</a></td>
-                            <td><a href="#/reports?org=${encodeURIComponent(report.org)}">${report.org}</a></td>
-                            <td><a href="#/reports?domain=${encodeURIComponent(report.domain)}">${report.domain}</a></td>
+                            <td><a href="#/reports/${report.hash}" title="${report.id}">${this.prepareId(report.id)}</a></td>
+                            <td class="xs-hidden"><a href="#/reports?org=${encodeURIComponent(report.org)}">${report.org}</a></td>
+                            <td class="sm-hidden"><a href="#/reports?domain=${encodeURIComponent(report.domain)}">${report.domain}</a></td>
                             <td>${this.renderProblemsBadge(report.flagged)}</td>
-                            <td>${report.records}</td>
-                            <td>${new Date(report.date_begin * 1000).toLocaleString()}</td>
-                            <td>${new Date(report.date_end * 1000).toLocaleString()}</td>
+                            <td class="sm-hidden">${report.records}</td>
+                            <td class="md-hidden">${new Date(report.date_begin * 1000).toLocaleString()}</td>
+                            <td class="md-hidden">${new Date(report.date_end * 1000).toLocaleString()}</td>
                         </tr>`
 
                 ) : html`<tr>

ui/components/style.js

@@ -91,6 +91,7 @@ export const globalStyle = css`
         color: white;
         border-radius: 3px;
         background-color: rgb(108, 117, 125);
+        margin-bottom: 3px;
     }
 
     .button:hover {
@@ -101,4 +102,22 @@ export const globalStyle = css`
     .ml {
         margin-left: 10px;
     }
+
+    @media only screen and (max-width: 1100px) {
+        .md-hidden {
+            display: none;
+        }
+    }
+
+    @media only screen and (max-width: 800px) {
+        .sm-hidden {
+            display: none;
+        }
+    }
+    
+    @media only screen and (max-width: 600px) {
+        .xs-hidden {
+            display: none;
+        }
+    }
 `;