2 files changed, 75 insertions, 12 deletions

diff --git a/assets/main.css b/assets/main.css
index 52dc3f0..e5d8218 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -97,6 +97,7 @@ body {
     background-color: var(--color-red);
     color: white;
     overflow-y: auto;
+    flex-shrink: 0;
 }
 
 .g-Nav__Link {
@@ -131,6 +132,45 @@ body {
     padding: var(--size-horse) var(--size-bear);
 }
 
+.g-ShowSearch {
+    display: none;
+    margin-bottom: var(--size-dog);
+}
+
+.g-Payments__CloseFilters {
+    display: none;
+    margin-top: var(--size-dog);
+}
+
+.g-Payments__CloseFilters > * {
+    width: 100%;
+}
+
+@media screen and (max-width: 900px) {
+    .g-Aside {
+        display: none;
+    }
+
+    .g-Aside--Show {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow-y: scroll;
+    }
+
+    .g-ShowSearch {
+        display: block;
+    }
+
+    .g-Payments__CloseFilters {
+        display: block;
+    }
+}
+
 .g-Section {
     display: flex;
     width: 100%;
@@ -221,6 +261,7 @@ body {
 .g-Paging {
     display: flex;
     justify-content: center;
+    padding-bottom: var(--size-dog);
 }
 
 .g-Paging__Link {
@@ -292,6 +333,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
     cursor: pointer;
     background-color: var(--color-green);
     color: white;
@@ -299,14 +341,35 @@ body {
     height: var(--size-camel);
     padding: 0 var(--size-dog);
     border-radius: var(--size-bee);
+    font-size: inherit;
 }
 
 .g-Button__Validate:hover {
     text-decoration: underline;
 }
 
+.g-Button__Secondary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    border: 1px solid var(--color-green);
+    background-color: transparent;
+    color: var(--color-green);
+    height: var(--size-camel);
+    padding: 0 var(--size-dog);
+    border-radius: var(--size-bee);
+    font-size: inherit;
+}
+
+.g-Button__Secondary:hover {
+    text-decoration: underline;
+}
+
 .g-Button__Danger {
     cursor: pointer;
+    flex-shrink: 0;
     background-color: var(--color-red);
     color: white;
     border: none;
@@ -350,21 +413,10 @@ body {
     align-items: center;
 }
 
-@media screen and (max-width: 500px) {
-    .g-Payments__Header {
-        flex-direction: column;
-    }
-}
-
 .g-Payments__Filters {
     display: flex;
     flex-direction: column;
-}
-
-@media screen and (max-width: 500px) {
-    .g-Payments__New {
-        margin-top: var(--size-dog);
-    }
+    max-width: 300px;
 }
 
 .g-Payments__Refund {
diff --git a/assets/main.js b/assets/main.js
index 1b5620f..4f72add 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -8,6 +8,7 @@ if (path == '/login') {
 
 } else if (path == '/') { // Payment table
 
+  show_hide_search()
   allow_select_reset()
   allow_date_reset()
 
@@ -58,6 +59,16 @@ function trim_inputs_on_blur() {
   })
 }
 
+function show_hide_search() {
+  document.querySelector('.g-ShowSearch button').addEventListener('click', () => {
+    document.querySelector('.g-Aside').classList.add('g-Aside--Show')
+  })
+
+  document.querySelector('.g-Payments__CloseFilters').addEventListener('click', () => {
+    document.querySelector('.g-Aside').classList.remove('g-Aside--Show')
+  })
+}
+
 function allow_select_reset() {
   document.querySelectorAll('select').forEach(select => {
     const canBeReset = Array.from(select.options).find(option => option.disabled)