aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJoris2022-08-21 14:32:34 +0200
committerJoris2022-08-21 15:02:34 +0200
commit337b2f5ef32ecace699d2225f31caf3257806b44 (patch)
tree98e77d6b0e7bd099227d5d0961893c7359c81105
parentc276e97deabef70daff74bbccac60ff468b5f772 (diff)
downloadbudget-337b2f5ef32ecace699d2225f31caf3257806b44.tar.gz
budget-337b2f5ef32ecace699d2225f31caf3257806b44.tar.bz2
budget-337b2f5ef32ecace699d2225f31caf3257806b44.zip
Fix payments page on narrow devices
After the introduction of filters, the payments table page was not very usable on mobile phones.
-rw-r--r--assets/main.css76
-rw-r--r--assets/main.js11
-rw-r--r--src/main.rs2
-rw-r--r--templates/payment/table.html6
-rw-r--r--templates/payment/table/search.html4
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>