tandem
/
numerus
2
0
Fork 0
Code Issues 37 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Improve the CSS and general design

This commit is contained in:
oriol carbonell pujolàs 2023-05-23 23:13:21 +02:00
parent bf2796190f
commit 79ec3ae4d6
12 changed files with 137 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/static/invoice.css
View File

@ -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;

108
web/static/numerus.css
View File

@ -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';
}

8
web/template/contacts/edit.gohtml
View File

@ -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>

9
web/template/contacts/new.gohtml
View File

@ -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>

6
web/template/expenses/edit.gohtml
View File

@ -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>

8
web/template/expenses/new.gohtml
View File

@ -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>

8
web/template/invoices/edit.gohtml
View File

@ -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();

2
web/template/invoices/index.gohtml
View File

@ -42,7 +42,7 @@
</noscript>
</form>
</div>
<table class="no-padding">
<table id="invoice-list">
<thead>
<tr>
<th>{{( pgettext "All" "invoice" )}}</th>

7
web/template/invoices/new.gohtml
View File

@ -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" }}"

2
web/template/invoices/products.gohtml
View File

@ -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 }}

6
web/template/products/edit.gohtml
View File

@ -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>

8
web/template/products/new.gohtml
View File

@ -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>