Fix payments page on narrow devices

After the introduction of filters, the payments table page was not very
usable on mobile phones.

1 files changed, 11 insertions, 0 deletions

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)