From 1ed9460d99e4497c1d2acc04605aea156ae02be2 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Tue, 14 Aug 2018 12:48:21 -0400
Subject: [PATCH] Fix mobile view for billing section.

Adding media query for the top section.
Setup the table statement view for mobile.
---
 css/admin.css                       | 12 +++-
 views/admin/billing/statements.html | 86 +++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 1 deletion(-)

diff --git a/css/admin.css b/css/admin.css
index 6843554..aee9833 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -11,12 +11,22 @@
 
 .glm-grid-container {
     display: grid;
-    grid-template-columns: 600px 200px;
+    grid-template-columns: 400px 200px;
     grid-gap: 30px;
     /* background-color: #fff; */
     /* color: #444; */
 }
 
+@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
+    .glm-grid-container {
+        display: block !important;
+    }
+    .glm-grid-container .glm-grid-item {
+        float: none;
+        width: 100%;
+    }
+
+}
 .glm-grid-item {
     /* background-color: #444; */
     /* color: #fff; */
diff --git a/views/admin/billing/statements.html b/views/admin/billing/statements.html
index 4dc70f5..63e5311 100644
--- a/views/admin/billing/statements.html
+++ b/views/admin/billing/statements.html
@@ -1,3 +1,86 @@
+<style>
+
+@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
+
+    #wpbody-content #glm-admin-billing-wrapper .wrap {
+        margin-right: 0;
+    }
+
+	/* Force table to not be like tables anymore */
+    #wpbody-content #glm-admin-billing-wrapper table,
+    #wpbody-content #glm-admin-billing-wrapper thead,
+    #wpbody-content #glm-admin-billing-wrapper tbody,
+    #wpbody-content #glm-admin-billing-wrapper th,
+    #wpbody-content #glm-admin-billing-wrapper td,
+    #wpbody-content #glm-admin-billing-wrapper tr {
+		display: block;
+	}
+
+	/* Hide table headers (but not display: none;, for accessibility) */
+	#wpbody-content #glm-admin-billing-wrapper thead tr {
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+	}
+
+	#wpbody-content #glm-admin-billing-wrapper tr { border: 1px solid #ccc; }
+
+	#wpbody-content #glm-admin-billing-wrapper td {
+		/* Behave  like a "row" */
+		border: none;
+		border-bottom: 1px solid #eee;
+		position: relative;
+		padding-left: 25%;
+	}
+
+	#wpbody-content #glm-admin-billing-wrapper td:before {
+		/* Now like a table header */
+		position: absolute;
+		/* Top/left values mimic padding */
+		top: 6px;
+		left: 6px;
+		width: 25%;
+		padding-right: 10px;
+		white-space: nowrap;
+	}
+	/* Label the data */
+	#wpbody-content #glm-admin-billing-wrapper td:nth-of-type(1):before { content: "ID"; }
+	#wpbody-content #glm-admin-billing-wrapper td:nth-of-type(2):before { content: "Date"; }
+	#wpbody-content #glm-admin-billing-wrapper td:nth-of-type(3):before { content: "Due"; }
+	#wpbody-content #glm-admin-billing-wrapper td:nth-of-type(4):before { content: "Type"; }
+	#wpbody-content #glm-admin-billing-wrapper td:nth-of-type(5):before { content: "Items"; }
+    #wpbody-content #glm-admin-billing-wrapper td:nth-of-type(6):before { content: "Amount"; }
+    #wpbody-content #glm-admin-billing-wrapper td:nth-of-type(7):before { content: "Balance"; }
+    #wpbody-content #glm-admin-billing-wrapper td:nth-of-type(8):before { content: "Pay"; }
+    #wpbody-content #glm-admin-billing-wrapper td:nth-of-type(9):before { content: "View"; }
+
+    /* Table styles */
+    #wpbody-content #glm-admin-billing-wrapper .wp-list-table {
+        max-width: 100%;
+    }
+    #wpbody-content #glm-admin-billing-wrapper .wp-list-table tr {
+        padding: 10px 0;
+    }
+    #wpbody-content #glm-admin-billing-wrapper .wp-list-table td:before {
+        top: 1px;
+        font-weight: bold;
+    }
+    #wpbody-content #glm-admin-billing-wrapper .striped>tbody>:nth-child(even) {
+        background-color: #f2ffff;
+    }
+
+    /* Misc */
+    #glm-admin-billing-wrapper .glm-contact-top-buttons {
+        text-align: center;
+    }
+    #glm-admin-billing-wrapper .glm-contact-top-buttons > * {
+        /* margin: 10px auto 10px; */
+        float: none;
+        clear: both;
+    }
+}
+</style>
+
 {if $fromMemberMenu}
     {include file='admin/member/header.html'}
     {include file='admin/billing/memberBillingSubHeader.html'}
@@ -5,6 +88,8 @@
     {include file='admin/billing/header.html'}
 {/if}
 
+<div id="glm-admin-billing-wrapper">
+
     <table class="glm-admin-table wp-list-table striped">
         <thead>
             <tr>
@@ -59,4 +144,5 @@
         </tbody>
     </table>
 
+</div>
 {include file='admin/footer.html'}
-- 
2.17.1