Total widget in invoice editor

This commit is contained in:
Peter Papp
2021-05-19 16:22:41 +02:00
parent 3fbf0ca093
commit 147f82e9a8
2 changed files with 65 additions and 4 deletions
@@ -328,6 +328,10 @@
<div id="loader" v-if="isLoadingPage"> <div id="loader" v-if="isLoadingPage">
<Spinner /> <Spinner />
</div> </div>
<div v-if="!isLoadingPage && total > 0" class="total-wrapper bg-theme-100">
<b>{{ $t('in.doc.sum_to_pay') }}:</b>
<b>{{ formatCurrency(total) }}</b>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -797,7 +801,7 @@
} }
&.row-summary { &.row-summary {
border-top: 1px solid $light_mode_border; //border-top: 1px solid $light_mode_border;
padding-bottom: 0; padding-bottom: 0;
b { b {
@@ -834,12 +838,37 @@
@media only screen and (max-width: 970px) { @media only screen and (max-width: 970px) {
.content-page { .content-page {
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin-bottom: 30px; margin-bottom: 80px;
gap: 0; gap: 0;
} }
.total-wrapper {
box-shadow: 0 0 20px 5px hsla(220, 36%, 16%, 0.06);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
display: flex;
justify-content: space-between;
padding: 15px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
background: white;
b {
@include font-size(14);
}
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.total-wrapper {
background: $dark_mode_foreground;
box-shadow: 0 0 20px 5px hsla(0, 0%, 0%, 0.25);
}
.summary-list { .summary-list {
background: $dark_mode_foreground; background: $dark_mode_foreground;
@@ -239,6 +239,10 @@
<div id="loader" v-if="isLoadingPage"> <div id="loader" v-if="isLoadingPage">
<Spinner /> <Spinner />
</div> </div>
<div v-if="!isLoadingPage && total > 0" class="total-wrapper bg-theme-100">
<b>{{ $t('in.doc.sum_to_pay') }}:</b>
<b>{{ formatCurrency(total) }}</b>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -590,6 +594,10 @@
@import '@assets/vuefilemanager/_mixins'; @import '@assets/vuefilemanager/_mixins';
@import '@assets/vuefilemanager/_forms'; @import '@assets/vuefilemanager/_forms';
.total-wrapper {
display: none;
}
#page-content { #page-content {
max-width: 1100px; max-width: 1100px;
} }
@@ -654,7 +662,7 @@
} }
&.row-summary { &.row-summary {
border-top: 1px solid $light_mode_border; //border-top: 1px solid $light_mode_border;
padding-bottom: 0; padding-bottom: 0;
b { b {
@@ -691,12 +699,36 @@
@media only screen and (max-width: 970px) { @media only screen and (max-width: 970px) {
.content-page { .content-page {
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin-bottom: 30px; margin-bottom: 80px;
gap: 0; gap: 0;
} }
.total-wrapper {
box-shadow: 0 0 20px 5px hsla(220, 36%, 16%, 0.06);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
display: flex;
justify-content: space-between;
padding: 15px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
background: white;
b {
@include font-size(14);
}
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.total-wrapper {
background: $dark_mode_foreground;
box-shadow: 0 0 20px 5px hsla(0, 0%, 0%, 0.25);
}
.summary-list { .summary-list {
background: $dark_mode_foreground; background: $dark_mode_foreground;