Skip to content

Commit 6de1a87

Browse files
fabienSvtrfabienSvtr
committed
[MS] Client Area Responsive + Style Miscellaneous
1 parent 1c8e6cc commit 6de1a87

25 files changed

+723
-262
lines changed

‎client/src/components/client-area/invoices/InvoicesList.vue‎

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
11
<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
22

33
<template>
4-
<!-- row header -->
5-
<ion-list class="invoices-year-header-list ion-no-padding">
6-
<ion-item class="invoices-year-header-list-item invoices-date">
7-
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.date') }}</ion-text>
8-
</ion-item>
9-
<ion-item class="invoices-year-header-list-item invoices-number">
10-
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.number') }}</ion-text>
11-
</ion-item>
12-
<ion-item class="invoices-year-header-list-item invoices-organization">
13-
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.organization') }}</ion-text>
14-
</ion-item>
15-
<ion-item class="invoices-year-header-list-item invoices-amount">
16-
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.price.title') }}</ion-text>
17-
</ion-item>
18-
<ion-item
19-
v-if="invoices.some((invoice: Invoice) => invoice.getType() === InvoiceType.Sellsy)"
20-
class="invoices-year-header-list-item invoices-contract-period"
21-
>
22-
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.contractPeriod.title') }}</ion-text>
23-
</ion-item>
24-
<ion-item class="invoices-year-header-list-item invoices-status">
25-
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.status') }}</ion-text>
26-
</ion-item>
27-
</ion-list>
4+
<div class="invoices-year-content">
5+
<!-- row header -->
6+
<ion-list class="invoices-year-header-list ion-no-padding">
7+
<ion-item class="invoices-year-header-list-item invoices-date">
8+
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.date') }}</ion-text>
9+
</ion-item>
10+
<ion-item class="invoices-year-header-list-item invoices-number">
11+
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.number') }}</ion-text>
12+
</ion-item>
13+
<ion-item class="invoices-year-header-list-item invoices-organization">
14+
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.organization') }}</ion-text>
15+
</ion-item>
16+
<ion-item class="invoices-year-header-list-item invoices-amount">
17+
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.price.title') }}</ion-text>
18+
</ion-item>
19+
<ion-item
20+
v-if="invoices.some((invoice: Invoice) => invoice.getType() === InvoiceType.Sellsy)"
21+
class="invoices-year-header-list-item invoices-contract-period"
22+
>
23+
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.contractPeriod.title') }}</ion-text>
24+
</ion-item>
25+
<ion-item class="invoices-year-header-list-item invoices-status">
26+
<ion-text class="menu-active">{{ $msTranslate('clientArea.invoices.cell.status') }}</ion-text>
27+
</ion-item>
28+
</ion-list>
2829

29-
<!-- row invoices -->
30-
<ion-list class="invoices-year-content-list ion-no-padding">
31-
<invoices-list-item
32-
v-for="invoice in invoices"
33-
:invoice="invoice"
34-
:key="invoice.getId()"
35-
v-show="monthsFilter === undefined || monthsFilter.length === 0 || monthsFilter.includes(invoice.getDate().month)"
36-
/>
37-
</ion-list>
30+
<!-- row invoices -->
31+
<ion-list class="invoices-year-content-list ion-no-padding">
32+
<invoices-list-item
33+
v-for="invoice in invoices"
34+
:invoice="invoice"
35+
:key="invoice.getId()"
36+
v-show="monthsFilter === undefined || monthsFilter.length === 0 || monthsFilter.includes(invoice.getDate().month)"
37+
/>
38+
</ion-list>
39+
</div>
3840
</template>
3941

4042
<script setup lang="ts">
@@ -49,15 +51,22 @@ defineProps<{
4951
</script>
5052

5153
<style lang="scss" scoped>
54+
.invoices-year-content {
55+
display: flex;
56+
flex-direction: column;
57+
width: 100%;
58+
overflow: auto;
59+
}
60+
5261
.invoices-year-header-list {
5362
display: flex;
5463
width: 100%;
55-
background: none;
5664
margin-bottom: 0.5rem;
5765
position: sticky;
58-
top: 0rem;
66+
top: 0;
5967
background: var(--parsec-color-light-secondary-premiere);
6068
z-index: 2;
69+
min-width: 35rem;
6170
6271
&-item {
6372
--padding-start: 0;
@@ -76,33 +85,39 @@ defineProps<{
7685
--ion-safe-area-left: 0;
7786
gap: 0.5rem;
7887
background: none;
88+
min-width: fit-content;
7989
}
8090
8191
// eslint-disable-next-line vue-scoped-css/no-unused-selector
8292
.invoices {
8393
&-date {
8494
width: 100%;
8595
max-width: var(--max-width-date);
96+
min-width: 8rem;
8697
}
8798
8899
&-number {
89100
width: 100%;
90101
max-width: var(--max-width-number);
102+
min-width: 10rem;
91103
}
92104
93105
&-organization {
94106
width: 100%;
95107
max-width: var(--max-width-organization);
108+
min-width: 10rem;
96109
}
97110
98111
&-amount {
99112
width: 100%;
100113
max-width: var(--max-width-amount);
114+
min-width: 10rem;
101115
}
102116
103117
&-contract-period {
104118
width: 100%;
105119
max-width: var(--max-width-contract-period);
120+
min-width: 10rem;
106121
}
107122
108123
&-status {
@@ -111,6 +126,9 @@ defineProps<{
111126
align-items: center;
112127
justify-content: space-between;
113128
gap: 0.5rem;
129+
flex-grow: 1;
130+
flex-basis: var(--max-width-date);
131+
min-width: 12rem;
114132
}
115133
}
116134
</style>

‎client/src/components/client-area/invoices/InvoicesListItem.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ function getCustomOrderStatusInvoiceStep(): Translatable {
122122
.custom-button__icon {
123123
width: 1rem;
124124
--fill-color: var(--parsec-color-light-primary-500);
125+
flex-shrink: 0;
125126
}
126127
127128
&:hover {
@@ -131,7 +132,7 @@ function getCustomOrderStatusInvoiceStep(): Translatable {
131132
}
132133
133134
.custom-button__label {
134-
@include ms.responsive-breakpoint('xl') {
135+
@include ms.responsive-breakpoint('md') {
135136
display: none;
136137
}
137138
}
@@ -182,26 +183,31 @@ function getCustomOrderStatusInvoiceStep(): Translatable {
182183
&-date {
183184
width: 100%;
184185
max-width: var(--max-width-date);
186+
min-width: 8rem;
185187
}
186188
187189
&-number {
188190
width: 100%;
189191
max-width: var(--max-width-number);
192+
min-width: 10rem;
190193
}
191194
192195
&-organization {
193196
width: 100%;
194197
max-width: var(--max-width-organization);
198+
min-width: 10rem;
195199
}
196200
197201
&-amount {
198202
width: 100%;
199203
max-width: var(--max-width-amount);
204+
min-width: 10rem;
200205
}
201206
202207
&-contract-period {
203208
width: 100%;
204209
max-width: var(--max-width-contract-period);
210+
min-width: 10rem;
205211
}
206212
207213
&-status {
@@ -210,6 +216,9 @@ function getCustomOrderStatusInvoiceStep(): Translatable {
210216
align-items: center;
211217
justify-content: space-between;
212218
gap: 0.5rem;
219+
flex-grow: 1;
220+
flex-basis: var(--max-width-date);
221+
min-width: 12rem;
213222
}
214223
}
215224
</style>

‎client/src/components/client-area/invoices/YearInvoicesList.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,10 @@
7878

7979
<!-- invoices -->
8080
<template v-if="invoices.size > 0 || querying">
81-
<div class="invoices-container">
81+
<div
82+
class="invoices-container"
83+
v-show="!querying"
84+
>
8285
<year-invoices-list-item
8386
v-for="year in invoices.keys()"
8487
v-show="selectedYears.length === 0 || selectedYears.includes(year)"
@@ -214,11 +217,12 @@ function removeSelectedMonth(month: number): void {
214217
.invoices-header {
215218
display: flex;
216219
align-items: center;
217-
gap: 0.5rem;
218-
margin-bottom: 0.5rem;
220+
gap: 1rem;
221+
flex-wrap: wrap;
219222
220223
&-title {
221224
color: var(--parsec-color-light-primary-700);
225+
width: fit-content;
222226
}
223227
224228
&-filter {

‎client/src/components/client-area/invoices/YearInvoicesListItem.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const isVisible = ref(true);
4949
.invoices-year {
5050
display: flex;
5151
flex-direction: column;
52+
align-items: start;
5253
padding: 0.5rem;
5354
margin-top: 0.5rem;
5455
border-radius: var(--parsec-radius-12);
@@ -60,10 +61,6 @@ const isVisible = ref(true);
6061
--max-width-amount: 10rem;
6162
transition: padding 0.2s;
6263
63-
&:last-of-type {
64-
margin-bottom: 3rem;
65-
}
66-
6764
&-text {
6865
display: flex;
6966
align-items: center;
@@ -75,6 +72,7 @@ const isVisible = ref(true);
7572
background: var(--parsec-color-light-secondary-premiere);
7673
z-index: 3;
7774
transition: all 0.2s ease;
75+
width: 100%;
7876
7977
&:hover {
8078
background: var(--parsec-color-light-secondary-background);

‎client/src/theme/global-client.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
height: 100%;
1414

1515
&::part(scroll) {
16-
padding: 2rem 2rem 0;
16+
padding: 2rem;
1717
}
1818
}
1919

@@ -101,3 +101,14 @@ ion-skeleton-text {
101101
border: none !important;
102102
}
103103
}
104+
105+
.ms-summary-card .update-button {
106+
position: relative !important;
107+
margin-top: 0.5rem;
108+
--background: var(--parsec-color-light-secondary-text);
109+
color: var(--parsec-color-light-secondary-white);
110+
111+
&::part(native) {
112+
border-width: 0px;
113+
}
114+
}

0 commit comments

Comments
 (0)