From 337b2f5ef32ecace699d2225f31caf3257806b44 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 21 Aug 2022 14:32:34 +0200
Subject: Fix payments page on narrow devices
After the introduction of filters, the payments table page was not very
usable on mobile phones.
---
assets/main.css | 76 +++++++++++++++++++++++++++++++------
assets/main.js | 11 ++++++
src/main.rs | 2 +-
templates/payment/table.html | 6 +++
templates/payment/table/search.html | 4 +-
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 %}
+
+
+
+
{% if payments %}