Fix mobile view for billing section.

Adding media query for the top section.
Setup the table statement view for mobile.

diff --git a/css/admin.css b/css/admin.css
index 6843554..aee9833 100644 (file)
--- 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 (file)
--- 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'}