aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/main.css76
-rw-r--r--assets/main.js11
2 files changed, 75 insertions, 12 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)