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 ++++++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 64 insertions(+), 12 deletions(-)

(limited to 'assets/main.css')

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 {
-- 
cgit v1.2.3