diff --git a/public/locales/en/invoice-controls.json b/public/locales/en/invoice-controls.json
index 956ab56..7f9ca8b 100644
--- a/public/locales/en/invoice-controls.json
+++ b/public/locales/en/invoice-controls.json
@@ -1,6 +1,9 @@
{
"back": "Back",
"book": "Book",
+ "density": "Density",
+ "compact": "Compact",
+ "comfortable": "Comfortable",
"download_pdf": "Download PDF",
"delete": "Delete",
"delete_modal": {
diff --git a/src/assets/scss/components/_invoice.scss b/src/assets/scss/components/_invoice.scss
index 9834ab2..80e1a5f 100644
--- a/src/assets/scss/components/_invoice.scss
+++ b/src/assets/scss/components/_invoice.scss
@@ -1,15 +1,36 @@
-.invoice-container {
- overflow-x: auto;
-}
+.invoice {
+ &-container {
+ overflow-x: auto;
+ }
-.invoice-box {
- margin: auto;
- padding: 30px;
- min-width: var(--breakpoint-md);
- box-shadow: $box-shadow-light-1;
- font-size: 16px;
- line-height: 24px;
- font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
+ &-box {
+ margin: auto;
+ padding: 30px;
+ min-width: var(--breakpoint-md);
+ box-shadow: $box-shadow-light-1;
+ font-size: 16px;
+ line-height: 24px;
+ font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
+ }
+
+ &__row {
+ &-control {
+ position: absolute;
+ top: 12px;
+ right: -30px;
+ }
+ }
+
+ &__rows {
+ &--compact {
+ th, td {
+ padding: 4px 16px;
+ }
+ .invoice__row-control {
+ top: 0;
+ }
+ }
+ }
}
@page {
@@ -30,9 +51,3 @@
box-shadow: none;
}
}
-
-.remove-invoice-row {
- position: absolute;
- right: -30px;
- top: 10px;
-}
diff --git a/src/components/invoices/InvoiceControls.vue b/src/components/invoices/InvoiceControls.vue
index b4fc634..b6138d4 100644
--- a/src/components/invoices/InvoiceControls.vue
+++ b/src/components/invoices/InvoiceControls.vue
@@ -20,7 +20,13 @@
more_vert
- {{ $t('download_pdf') }}
+
+
+ {{ invoice.is_compact ? $t('comfortable') : $t('compact') }}
+
+
+
+ {{ $t('download_pdf') }}
{{ $t('delete') }}
@@ -31,14 +37,17 @@