aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/main.css92
-rw-r--r--assets/main.js34
2 files changed, 70 insertions, 56 deletions
diff --git a/assets/main.css b/assets/main.css
index 4c286da..6a0be98 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -7,6 +7,7 @@
--color-green: #9FD2A5;
--color-blue: #6CA2A4;
--color-gray: #EEEEEE;
+ --color-gray-light: #F8F8F8;
--color-yellow: #FFF09E;
/* Sizes */
@@ -25,9 +26,9 @@
/* Reset */
-html { box-sizing: border-box; }
+html { box-sizing: border-box; height: 100%; }
*, *:before, *:after { box-sizing: inherit; }
-body { margin: 0; }
+body { margin: 0; height: 100%; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
h1 { font-size: inherit; font-weight: normal; margin: 0; }
@@ -62,9 +63,6 @@ body {
.g-Header {
width: 100%;
-}
-
-.g-Header__Primary {
display: flex;
align-items: center;
justify-content: space-between;
@@ -92,37 +90,52 @@ body {
text-decoration: underline;
}
-.g-Header__Secondary {
+.g-Nav {
+ width: 100%;
display: flex;
background-color: var(--color-red);
color: white;
overflow-y: auto;
}
-.g-Header__Link {
+.g-Nav__Link {
padding: var(--size-mouse) var(--size-dog);
}
-.g-Header__Link:hover {
+.g-Nav__Link:hover {
background-color: var(--color-brown);
}
-.g-Header__Link:focus {
+.g-Nav__Link:focus {
background-color: var(--color-brown);
}
-.g-Header__Link--Current {
+.g-Nav__Link--Current {
background-color: var(--color-brown);
}
.g-Main {
display: flex;
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+}
+
+.g-Aside {
+ height: 100%;
+ display: flex;
flex-direction: column;
- align-items: center;
+ background-color: var(--color-gray-light);
+ border-right: 2px solid #DDDDDD;
+ padding: var(--size-horse) var(--size-bear);
+}
+
+.g-Section {
+ display: flex;
width: 100%;
- padding: 0 var(--size-bear);
+ flex-direction: column;
+ align-items: center;
margin: var(--size-horse) 0;
- overflow-x: hidden;
}
.g-Title {
@@ -229,10 +242,11 @@ body {
.g-Form__Label {
margin-bottom: var(--size-mouse);
+ position: relative;
}
.g-Form__Input {
- margin-bottom: var(--size-lion);
+ margin: var(--size-mouse) 0 var(--size-lion);
background-color: white;
border: 1px solid black;
height: var(--size-camel);
@@ -245,7 +259,7 @@ body {
}
.g-Form__Select {
- margin-bottom: var(--size-lion);
+ margin: var(--size-mouse) 0 var(--size-lion);
background-color: white;
border: 1px solid black;
height: var(--size-camel);
@@ -253,6 +267,13 @@ body {
width: 100%;
}
+.g-Form__ResetSelect {
+ cursor: pointer;
+ position: absolute;
+ top: -3px;
+ right: 0;
+}
+
.g-Form__Error {
color: var(--color-red);
text-align: center;
@@ -261,18 +282,6 @@ body {
/* Buttons */
-.g-Button__Search {
- cursor: pointer;
- background-color: var(--color-gray);
- color: white;
- border: none;
- height: var(--size-camel);
- padding: 0 var(--size-dog);
- border-top: 1px solid black;
- border-right: 1px solid black;
- border-bottom: 1px solid black;
-}
-
.g-Button__Validate {
display: flex;
align-items: center;
@@ -338,33 +347,9 @@ body {
}
}
-.g-Payments__FrequenciesAndSearch {
- display: flex;
- align-items: center;
-}
-
-.g-Payments__Search {
- display: flex;
- margin: 0 var(--size-bear) 0 0;
-}
-
-.g-Payments__SearchInput {
- margin-bottom: 0;
- width: 150px;
-}
-
-.g-Payments__Frequencies {
+.g-Payments__Filters {
display: flex;
- margin: 0 var(--size-dog);
-}
-
-.g-Payments__Frequency {
- margin: 0 var(--size-mouse);
-}
-
-.g-Payments__Frequency--Selected {
- color: var(--color-red);
- font-weight: bold;
+ flex-direction: column;
}
@media screen and (max-width: 500px) {
@@ -383,6 +368,7 @@ body {
background-color: var(--color-green);
border-radius: var(--size-bee);
color: white;
+ padding: var(--size-bee);
margin-bottom: var(--size-bear);
text-align: center;
}
diff --git a/assets/main.js b/assets/main.js
index aee4862..3dd4b6e 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -6,6 +6,10 @@ if (path == '/login') {
trim_inputs_on_blur()
+} else if (path == '/') { // Payment table
+
+ allow_select_reset()
+
} else if (path == '/payment') { // Payment creation
trim_inputs_on_blur()
@@ -53,10 +57,34 @@ function trim_inputs_on_blur() {
})
}
+function allow_select_reset() {
+ document.querySelectorAll('select').forEach(select => {
+ const canBeReset = Array.from(select.options).find(option => option.disabled)
+ if (canBeReset) {
+ const button = document.createElement('input')
+ button.type = 'button'
+ button.value = 'Effacer'
+ button.className = 'g-Form__ResetSelect'
+ button.onclick = function() {
+ select.selectedIndex = 0
+ }
+ if (select.selectedIndex === 0) {
+ button.style = 'visibility: hidden'
+ }
+ select.onchange = function() {
+ button.style = 'visibility: visible'
+ }
+ select.parentNode.appendChild(button)
+ }
+ })
+}
+
function control_remove_button() {
- const removeInput = document.getElementById('remove-input')
+ const removeInput = document.getElementsByName('remove-input')[0]
const removeButton = document.getElementById('remove-button')
+ console.log(removeInput, removeButton)
+
if (removeInput && removeButton) {
removeInput.addEventListener('input', () => {
if (removeInput.value.trim() == removeInput.getAttribute('data-name')) {
@@ -69,8 +97,8 @@ function control_remove_button() {
}
function auto_fill_category() {
- const name = document.getElementById('name')
- const category = document.getElementById('category_id')
+ const name = document.getElementsByName('name')[0]
+ const category = document.getElementsByName('category_id')[0]
function onNameChange() {
const query = name.value.trim()