From 79ec3ae4d687e79d3239bcb2217abff89012dc45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?oriol=20carbonell=20pujol=C3=A0s?= <info@oriolcarbonell.cat>
Date: Tue, 23 May 2023 23:13:21 +0200
Subject: [PATCH] Improve the CSS and general design

---
 web/static/invoice.css                |   4 +-
 web/static/numerus.css                | 108 +++++++++++++++++++++++---
 web/template/contacts/edit.gohtml     |   8 +-
 web/template/contacts/new.gohtml      |   9 ++-
 web/template/expenses/edit.gohtml     |   6 +-
 web/template/expenses/new.gohtml      |   8 +-
 web/template/invoices/edit.gohtml     |   8 +-
 web/template/invoices/index.gohtml    |   2 +-
 web/template/invoices/new.gohtml      |   7 +-
 web/template/invoices/products.gohtml |   2 +-
 web/template/products/edit.gohtml     |   6 +-
 web/template/products/new.gohtml      |   8 +-
 12 files changed, 137 insertions(+), 39 deletions(-)

diff --git a/web/static/invoice.css b/web/static/invoice.css
index 3ac113a..8829767 100644
--- a/web/static/invoice.css
+++ b/web/static/invoice.css
@@ -57,7 +57,7 @@
 
 .invoice .notes, .invoice .payment-instructions {
     white-space: pre-line;
-    text-align: right;
+    text-align: left;
 }
 
 .invoice .notes + .payment-instructions {
@@ -150,7 +150,7 @@
     .invoice header {
         height: 260mm;
     }
-    
+
     .invoice .legal {
         position: absolute;
         width: 40em;
diff --git a/web/static/numerus.css b/web/static/numerus.css
index 14b2ebb..0382025 100644
--- a/web/static/numerus.css
+++ b/web/static/numerus.css
@@ -193,11 +193,22 @@ p, h1, h2, h3, h4, h5, h6 {
     overflow-wrap: break-word;
 }
 
+input[type="radio"] {
+   accent-color: var(--numerus--color--black);
+}
+
+input[type=file] {
+  padding: 2rem 1rem 0 1rem;
+}
+
 input[type="submit"], button, .button {
     min-width: 34rem;
     background-color: var(--numerus--color--white);
     border: 2px solid var(--numerus--color--black);
     text-transform: uppercase;
+    display: inline-block;
+    text-align: center;
+    padding: 1rem;
 }
 
 input[type="submit"]:hover, button:hover {
@@ -220,7 +231,6 @@ button.icon {
     background-color: var(--numerus--color--black);
     color: var(--numerus--color--white);
     text-decoration: none;
-    padding: 1rem;
     cursor: default;
 }
 
@@ -236,10 +246,16 @@ button.icon {
 table {
     width: 100%;
     border-collapse: collapse;
+    margin: 2rem 0 0 0;
 }
 
-.no-padding td {
-    padding: 0;
+
+td {
+  padding: 0 1rem;
+}
+
+#invoice-list td {
+    padding: 0 1rem;
 }
 
 tbody tr:nth-child(even) {
@@ -310,6 +326,7 @@ main {
 
 .input {
     margin-top: 2rem;
+    flex: 1;
 }
 
 .input:not(.radio) {
@@ -322,7 +339,8 @@ input[type="text"], input[type="search"], input[type="password"], input[type="em
     border: 1px solid var(--numerus--color--black);
     border-radius: 0;
     padding: 1rem 2rem;
-    min-width: 30rem;
+    width: 100%;
+    height: 6rem;
 }
 
 input.width-2x {
@@ -389,7 +407,7 @@ fieldset {
     border: none;
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
+    gap: 1rem;
 }
 
 fieldset:not(.radio) {
@@ -543,8 +561,20 @@ main > nav {
 }
 
 /* Invoice */
+
+.new-invoice-product input {
+  width: 100%;
+}
+
+.new-invoice-product {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
 .new-invoice-product .input:nth-of-type(5) {
-    flex: 1;
+    grid-column-start: 1;
+    grid-column-end: 4;
+
 }
 
 .new-invoice-product textarea {
@@ -618,9 +648,50 @@ main > nav {
     right: 0;
 }
 
+.invoice-data, .product-data, .expenses-data {
+	display: grid;
+	grid-template-columns: repeat(4 , 1fr);
+  gap: 1rem;
+}
+
+.invoice-data .input:last-child {
+  grid-column-start: 1;
+  grid-column-end: 5;
+}
+
+#invoice-summary th {
+  text-align: left;
+  padding: 0 0 0 1rem;
+}
+
+.button-bar button {
+  flex: 1
+}
+
+/* expenses */
+
+.expenses-data div:last-child {
+  grid-column-start: 3;
+  grid-column-end: 5;
+}
+
+/* product */
+.product-data div:last-child {
+  grid-column-start: 1;
+  grid-column-end: 5;
+}
+
+/* contact */
+.contact-data {
+	display: grid;
+	gap: 1rem;
+	grid-template-columns: repeat(3, 1fr);
+}
+
 /* Multiselect, tags */
-[is="numerus-multiselect"] {
-    max-width: 35rem;
+
+.tag {
+  padding: 0 0 0 .5rem;
 }
 
 [is="numerus-multiselect"] .tags, [is="numerus-tags"] .tags,
@@ -639,17 +710,21 @@ main > nav {
     gap: 1rem;
     position: relative;
     min-width: 20rem;
+    align-items: center;
+    min-height: 6rem;
 }
 
 [is="numerus-multiselect"] .tags {
     padding: 1rem 4rem 1rem 2rem;
     cursor: pointer;
-    min-height: calc(1.5em + 2rem);
 }
 
 [is="numerus-tags"] .tags {
     padding: 1rem 2rem;
-    max-width: 40rem;
+}
+
+[is="numerus-tags"] .tags input, [is="numerus-multiselect"] .tags input {
+  height: initial;
 }
 
 [is="numerus-multiselect"] .tags:after {
@@ -673,6 +748,7 @@ main > nav {
     cursor: pointer;
     background: transparent;
     min-width: initial;
+    padding: 0 .5rem;
 }
 
 [is="numerus-multiselect"] .tag button:hover, [is="numerus-tags"] .tag button:hover {
@@ -834,10 +910,21 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 }
 
 /* Dashboard */
+
+.filters {
+  display: flex;
+  gap: 1rem;
+}
+
 #dashboard-filters {
     display: flex;
 }
 
+#dashboard-filters fieldset {
+  display: flex;
+  justify-content: space-between;
+}
+
 #dashboard-filters .radio {
     margin-top: 0;
     flex: 1;
@@ -10098,4 +10185,3 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 .ri-zzz-line:before {
     content: '\f2df';
 }
-
diff --git a/web/template/contacts/edit.gohtml b/web/template/contacts/edit.gohtml
index a4a3f0c..6224658 100644
--- a/web/template/contacts/edit.gohtml
+++ b/web/template/contacts/edit.gohtml
@@ -16,25 +16,27 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editContactPage*/ -}}
-    <section class="dialog-content" id="edit-contact-dialog-content" data-hx-target="main">
+    <section id="edit-contact-dialog-content" data-hx-target="main">
         <h2>{{printf (pgettext "Edit Contact “%s”" "title") .ContactName }}</h2>
         <form method="POST" action="{{ companyURI "/contacts/" }}{{ .Slug }}" data-hx-boost="true">
             {{ csrfToken }}
             {{ putMethod }}
 
             {{ with .Form }}
+            <div class="contact-data">
                 {{ template "input-field" .BusinessName }}
                 {{ template "input-field" .VATIN }}
                 {{ template "input-field" .TradeName }}
                 {{ template "input-field" .Phone }}
                 {{ template "input-field" .Email }}
                 {{ template "input-field" .Web }}
-                {{ template "input-field" .Address | addInputAttr `class="width-2x"` }}
+                {{ template "input-field" .Address }}
                 {{ template "input-field" .City }}
                 {{ template "input-field" .Province }}
                 {{ template "input-field" .PostalCode }}
-                {{ template "select-field" .Country | addSelectAttr `class="width-fixed"` }}
+                {{ template "select-field" .Country }}
                 {{ template "tags-field" .Tags }}
+            </div>
             {{ end }}
 
             <fieldset>
diff --git a/web/template/contacts/new.gohtml b/web/template/contacts/new.gohtml
index cce3e05..8bc2dfe 100644
--- a/web/template/contacts/new.gohtml
+++ b/web/template/contacts/new.gohtml
@@ -15,22 +15,25 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.contactForm*/ -}}
-    <section class="dialog-content" id="new-contact-dialog-content" data-hx-target="main">
+    <section id="new-contact-dialog-content" data-hx-target="main">
         <h2>{{(pgettext "New Contact" "title")}}</h2>
         <form method="POST" action="{{ companyURI "/contacts" }}" data-hx-boost="true">
             {{ csrfToken }}
+
+            <div class="contact-data">
             {{ template "input-field" .BusinessName | addInputAttr "autofocus" }}
             {{ template "input-field" .VATIN }}
             {{ template "input-field" .TradeName }}
             {{ template "input-field" .Phone }}
             {{ template "input-field" .Email }}
             {{ template "input-field" .Web }}
-            {{ template "input-field" .Address | addInputAttr `class="width-2x"` }}
+            {{ template "input-field" .Address }}
             {{ template "input-field" .City }}
             {{ template "input-field" .Province }}
             {{ template "input-field" .PostalCode }}
-            {{ template "select-field" .Country | addSelectAttr `class="width-fixed"` }}
+            {{ template "select-field" .Country }}
             {{ template "tags-field" .Tags }}
+            </div>
 
             <fieldset>
                 <button class="primary" type="submit">{{( pgettext "New contact" "action" )}}</button>
diff --git a/web/template/expenses/edit.gohtml b/web/template/expenses/edit.gohtml
index 777b7a1..a5b866e 100644
--- a/web/template/expenses/edit.gohtml
+++ b/web/template/expenses/edit.gohtml
@@ -16,20 +16,22 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editExpensePage*/ -}}
-    <section class="dialog-content" id="new-expense-dialog-content" data-hx-target="main">
+    <section id="new-expense-dialog-content" data-hx-target="main">
         <h2>{{ printf (pgettext "Edit Expense “%s”" "title") .Slug }}</h2>
         <form enctype="multipart/form-data" method="POST" action="{{ companyURI "/expenses/" }}{{ .Slug }}" data-hx-boost="true">
             {{ csrfToken }}
             {{ putMethod }}
 
             {{ with .Form -}}
+          <div class="expenses-data">
                 {{ template "select-field" .Invoicer }}
                 {{ template "input-field" .InvoiceNumber }}
                 {{ template "input-field" .InvoiceDate }}
                 {{ template "input-field" .Amount }}
                 {{ template "select-field" .Tax }}
-                {{ template "file-field" .File }}
                 {{ template "tags-field" .Tags }}
+                {{ template "file-field" .File }}
+          </div>
             {{- end }}
 
             <fieldset>
diff --git a/web/template/expenses/new.gohtml b/web/template/expenses/new.gohtml
index 43ea5cc..0b50a17 100644
--- a/web/template/expenses/new.gohtml
+++ b/web/template/expenses/new.gohtml
@@ -16,19 +16,19 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.expenseForm*/ -}}
-    <section class="dialog-content" id="new-expense-dialog-content" data-hx-target="main">
+    <section id="new-expense-dialog-content" data-hx-target="main">
         <h2>{{(pgettext "New Expense" "title")}}</h2>
         <form enctype="multipart/form-data" method="POST" action="{{ companyURI "/expenses" }}" data-hx-boost="true">
             {{ csrfToken }}
-
+          <div class="expenses-data">
             {{ template "select-field" .Invoicer }}
             {{ template "input-field" .InvoiceNumber }}
             {{ template "input-field" .InvoiceDate }}
             {{ template "input-field" .Amount }}
             {{ template "select-field" .Tax }}
-            {{ template "file-field" .File }}
             {{ template "tags-field" .Tags }}
-
+            {{ template "file-field" .File }}
+          </div>
             <fieldset>
                 <button class="primary" type="submit">{{( pgettext "New expense" "action" )}}</button>
             </fieldset>
diff --git a/web/template/invoices/edit.gohtml b/web/template/invoices/edit.gohtml
index 0108a72..a6a1c66 100644
--- a/web/template/invoices/edit.gohtml
+++ b/web/template/invoices/edit.gohtml
@@ -15,18 +15,20 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editInvoicePage*/ -}}
-    <section class="dialog-content" id="invoice-dialog-content" data-hx-target="main">
+    <section id="invoice-dialog-content" data-hx-target="main">
         <h2>{{ printf (pgettext "Edit Invoice “%s”" "title") .Number }}</h2>
         <form method="POST" action="{{ companyURI "/invoices/" }}{{ .Slug }}" data-hx-boost="true">
             {{ csrfToken }}
 
             {{ with .Form -}}
+            <div class="invoice-data">
                 {{ template "select-field" .Customer }}
                 {{ template "hidden-field" .Date }}
                 {{ template "tags-field" .Tags }}
                 {{ template "select-field" .PaymentMethod }}
                 {{ template "select-field" .InvoiceStatus }}
                 {{ template "input-field" .Notes }}
+            </div>
 
                 {{- range $product := .Products }}
                     {{ template "invoice-product-form" . }}
@@ -52,7 +54,7 @@
                 </tbody>
             </table>
 
-            <fieldset>
+            <fieldset class="button-bar">
                 <button formnovalidate formaction="{{ companyURI "/invoices" }}/{{ .Slug }}/edit"
                         name="action" value="select-products"
                         data-hx-get="{{ companyURI "/invoices/product-form" }}"
@@ -70,7 +72,7 @@
 
         </form>
     </section>
-       
+
     <script>
         document.body.addEventListener('recompute', function () {
             document.getElementById('recompute-button').click();
diff --git a/web/template/invoices/index.gohtml b/web/template/invoices/index.gohtml
index a5e188e..c58f9f1 100644
--- a/web/template/invoices/index.gohtml
+++ b/web/template/invoices/index.gohtml
@@ -42,7 +42,7 @@
             </noscript>
         </form>
     </div>
-    <table class="no-padding">
+    <table id="invoice-list">
         <thead>
         <tr>
             <th>{{( pgettext "All" "invoice" )}}</th>
diff --git a/web/template/invoices/new.gohtml b/web/template/invoices/new.gohtml
index 2291fec..ee84785 100644
--- a/web/template/invoices/new.gohtml
+++ b/web/template/invoices/new.gohtml
@@ -15,19 +15,20 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newInvoicePage*/ -}}
-    <section class="dialog-content" id="invoice-dialog-content" data-hx-target="main">
+    <section id="invoice-dialog-content" data-hx-target="main">
         <h2>{{(pgettext "New Invoice" "title")}}</h2>
         <form method="POST" action="{{ companyURI "/invoices" }}" data-hx-boost="true">
             {{ csrfToken }}
 
             {{ with .Form -}}
+            <div class="invoice-data">
                 {{ template "hidden-select-field" .InvoiceStatus }}
                 {{ template "select-field" .Customer }}
                 {{ template "input-field" .Date }}
                 {{ template "tags-field" .Tags }}
                 {{ template "select-field" .PaymentMethod }}
                 {{ template "input-field" .Notes }}
-
+            </div>
                 {{- range $product := .Products }}
                     {{ template "invoice-product-form" . }}
                 {{- end }}
@@ -52,7 +53,7 @@
                 </tbody>
             </table>
 
-            <fieldset>
+            <fieldset class="button-bar">
                 <button formnovalidate formaction="{{ companyURI "/invoices/new" }}"
                         name="action" value="select-products"
                         data-hx-get="{{ companyURI "/invoices/product-form" }}"
diff --git a/web/template/invoices/products.gohtml b/web/template/invoices/products.gohtml
index a11a3ad..e0e90ba 100644
--- a/web/template/invoices/products.gohtml
+++ b/web/template/invoices/products.gohtml
@@ -19,7 +19,7 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newInvoiceProductsPage*/ -}}
-    <section class="dialog-content" id="invoice-dialog-content" data-hx-target="this">
+    <section id="invoice-dialog-content" data-hx-target="this">
         <h2>{{(pgettext "Add Products to Invoice" "title")}}</h2>
         <form method="POST" action="{{ .Action }}" data-hx-boost="true" data-hx-select="#invoice-dialog-content">
             {{ csrfToken }}
diff --git a/web/template/products/edit.gohtml b/web/template/products/edit.gohtml
index 6c859ff..b068727 100644
--- a/web/template/products/edit.gohtml
+++ b/web/template/products/edit.gohtml
@@ -16,18 +16,20 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editProductPage*/ -}}
-    <section class="dialog-content" id="edit-product-dialog-content" data-hx-target="main">
+    <section id="edit-product-dialog-content" data-hx-target="main">
         <h2>{{printf (pgettext "Edit Product “%s”" "title") .ProductName }}</h2>
         <form method="POST" action="{{ companyURI "/products/" }}{{ .Slug }}" data-hx-boost="true">
             {{ csrfToken }}
             {{ putMethod }}
 
             {{ with .Form }}
+              <div class="product-data">
                 {{ template "input-field" .Name | addInputAttr "autofocus" }}
-                {{ template "input-field" .Description }}
                 {{ template "input-field" .Price }}
                 {{ template "select-field" .Tax }}
                 {{ template "tags-field" .Tags }}
+                {{ template "input-field" .Description }}
+              </div>
             {{ end }}
 
             <fieldset>
diff --git a/web/template/products/new.gohtml b/web/template/products/new.gohtml
index ffbd434..787f61b 100644
--- a/web/template/products/new.gohtml
+++ b/web/template/products/new.gohtml
@@ -15,17 +15,17 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.productForm*/ -}}
-    <section class="dialog-content" id="new-product-dialog-content" data-hx-target="main">
+    <section id="new-product-dialog-content" data-hx-target="main">
         <h2>{{(pgettext "New Product" "title")}}</h2>
         <form method="POST" action="{{ companyURI "/products" }}" data-hx-boost="true">
             {{ csrfToken }}
-
+          <div class="product-data">
             {{ template "input-field" .Name | addInputAttr "autofocus" }}
-            {{ template "input-field" .Description }}
             {{ template "input-field" .Price }}
             {{ template "select-field" .Tax }}
             {{ template "tags-field" .Tags }}
-
+            {{ template "input-field" .Description }}
+          </div>
             <fieldset>
                 <button class="primary" type="submit">{{( pgettext "New product" "action" )}}</button>
             </fieldset>