Fix payments page on narrow devices

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

5 files changed, 85 insertions, 14 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)
diff --git a/src/main.rs b/src/main.rs
index 502f608..2371644 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -26,7 +26,7 @@ use model::config::Config;
 #[derive(StructOpt)]
 #[structopt()]
 struct Opt {
-    #[structopt(short, long, default_value = "127.0.0.1:3000")]
+    #[structopt(short, long, default_value = "0.0.0.0:3000")]
     address: SocketAddr,
 
     #[structopt(short, long, default_value = "config.json")]
diff --git a/templates/payment/table.html b/templates/payment/table.html
index 72ac59c..fc69b2d 100644
--- a/templates/payment/table.html
+++ b/templates/payment/table.html
@@ -41,6 +41,12 @@
       {% if query.frequency != "Monthly" %} ponctuel {% else %} mensuel {% endif %}
     </a>
 
+    <div class="g-ShowSearch">
+      <button class="g-Button__Secondary">
+        Rechercher
+      </button>
+    </div>
+
     {% if payments %}
       <div class="g-Table">
         <div class="g-Table__Row g-Table__Row--Header">
diff --git a/templates/payment/table/search.html b/templates/payment/table/search.html
index e46b582..0ae2589 100644
--- a/templates/payment/table/search.html
+++ b/templates/payment/table/search.html
@@ -1,5 +1,4 @@
 <form action="/" method="GET" class="g-Payments__Filters">
-
   <label class="g-Form__Label">
     Fréquence
     <select name="frequency" class="g-Form__Select">
@@ -85,4 +84,7 @@
 
   <input type="submit" class="g-Button__Validate" value="Rechercher">
 
+  <div class="g-Payments__CloseFilters">
+    <input type="button" class="g-Button__Secondary" value="Annuler" />
+  </div>
 </form>