Skip to content

Commit d131dcc

Browse files
PowerKiKiPowerKiKi
committed
CSS classes to style tables and better right aligned columns #9365
Right aligned columns that are also sortable now have the sort arrow on the left, so the header text is aligned with the value row text
1 parent 28f19f1 commit d131dcc

File tree

6 files changed

+88
-55
lines changed

6 files changed

+88
-55
lines changed

‎client/app/admin/order/order-lines/order-lines.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
</ng-container>
6161

6262
<ng-container matColumnDef="quantity">
63-
<th *matHeaderCellDef mat-header-cell mat-sort-header natural-7em-column>Quantité</th>
63+
<th *matHeaderCellDef mat-header-cell mat-sort-header class="natural-7em-column">Quantité</th>
6464
<td *matCellDef="let element" mat-cell>
6565
{{ +element.quantity }}
6666
</td>
@@ -72,7 +72,7 @@
7272
</ng-container>
7373

7474
<ng-container matColumnDef="balance">
75-
<th *matHeaderCellDef mat-header-cell natural-5em-column>Montant</th>
75+
<th *matHeaderCellDef mat-header-cell class="natural-5em-column">Montant</th>
7676
<td *matCellDef="let element" mat-cell>
7777
@if (element.balanceCHF > 0) {
7878
{{ element.balanceCHF | currency: 'CHF' }}

‎client/app/admin/order/orders/orders.component.html‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,31 +75,43 @@
7575
</ng-container>
7676

7777
<ng-container matColumnDef="balanceCHF">
78-
<th *matHeaderCellDef mat-header-cell mat-sort-header natural-7em-column natural-align-right>
78+
<th
79+
*matHeaderCellDef
80+
mat-header-cell
81+
mat-sort-header
82+
class="natural-7em-column natural-align-right"
83+
arrowPosition="before"
84+
>
7985
Total CHF
8086
</th>
81-
<td *matCellDef="let element" mat-cell natural-align-right>
87+
<td *matCellDef="let element" mat-cell class="natural-align-right">
8288
@if (element.balanceCHF > 0) {
8389
{{ element.balanceCHF | currency: 'CHF' }}
8490
}
8591
</td>
86-
<td *matFooterCellDef mat-footer-cell natural-align-right>
92+
<td *matFooterCellDef mat-footer-cell class="natural-align-right">
8793
@if (dataSource.data?.totalBalanceCHF > 0) {
8894
<span>{{ dataSource.data?.totalBalanceCHF | currency: 'CHF' }}</span>
8995
}
9096
</td>
9197
</ng-container>
9298

9399
<ng-container matColumnDef="balanceEUR">
94-
<th *matHeaderCellDef mat-header-cell mat-sort-header natural-7em-column natural-align-right>
100+
<th
101+
*matHeaderCellDef
102+
mat-header-cell
103+
mat-sort-header
104+
class="natural-7em-column natural-align-right"
105+
arrowPosition="before"
106+
>
95107
Total EUR
96108
</th>
97-
<td *matCellDef="let element" mat-cell natural-align-right>
109+
<td *matCellDef="let element" mat-cell class="natural-align-right">
98110
@if (element.balanceEUR > 0) {
99111
{{ element.balanceEUR | currency: 'EUR' }}
100112
}
101113
</td>
102-
<td *matFooterCellDef mat-footer-cell natural-align-right>
114+
<td *matFooterCellDef mat-footer-cell class="natural-align-right">
103115
@if (dataSource.data?.totalBalanceEUR > 0) {
104116
<span>{{ dataSource.data?.totalBalanceEUR | currency: 'EUR' }}</span>
105117
}

‎client/app/admin/products/products/products.component.html‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
</ng-container>
3232

3333
<ng-container matColumnDef="image">
34-
<th *matHeaderCellDef mat-header-cell natural-2em-column></th>
34+
<th *matHeaderCellDef mat-header-cell class="natural-2em-column"></th>
3535
<td *matCellDef="let element" mat-cell>
3636
@if (element.image) {
3737
<natural-file
@@ -62,17 +62,33 @@
6262
</ng-container>
6363

6464
<ng-container matColumnDef="pricePerUnitCHF">
65-
<th *matHeaderCellDef mat-header-cell mat-sort-header natural-align-right>Prix CHF</th>
66-
<td *matCellDef="let element" mat-cell natural-align-right>
65+
<th
66+
*matHeaderCellDef
67+
mat-header-cell
68+
mat-sort-header
69+
class="natural-align-right"
70+
arrowPosition="before"
71+
>
72+
Prix CHF
73+
</th>
74+
<td *matCellDef="let element" mat-cell class="natural-align-right">
6775
@if (element.pricePerUnitCHF !== '0.00') {
6876
<span>{{ element.pricePerUnitCHF | currency: 'CHF' }}</span>
6977
}
7078
</td>
7179
</ng-container>
7280

7381
<ng-container matColumnDef="pricePerUnitEUR">
74-
<th *matHeaderCellDef mat-header-cell mat-sort-header natural-align-right>Prix EUR</th>
75-
<td *matCellDef="let element" mat-cell natural-align-right>
82+
<th
83+
*matHeaderCellDef
84+
mat-header-cell
85+
mat-sort-header
86+
class="natural-align-right"
87+
arrowPosition="before"
88+
>
89+
Prix EUR
90+
</th>
91+
<td *matCellDef="let element" mat-cell class="natural-align-right">
7692
@if (element.pricePerUnitEUR !== '0.00') {
7793
<span>{{ element.pricePerUnitEUR | currency: 'EUR' }}</span>
7894
}

‎client/app/profile/components/history/history.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ <h2 class="mat-headline-4">Commandes</h2>
2727
</ng-container>
2828

2929
<ng-container matColumnDef="balance">
30-
<th *matHeaderCellDef mat-header-cell natural-5em-column natural-align-right>Total</th>
31-
<td *matCellDef="let element" mat-cell natural-align-right>
30+
<th *matHeaderCellDef mat-header-cell class="natural-5em-column natural-align-right">Total</th>
31+
<td *matCellDef="let element" mat-cell class="natural-align-right">
3232
@if (element.balanceCHF > 0) {
3333
{{ element.balanceCHF | currency: 'CHF' }}
3434
}

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
"@angular/router": "^18.2.3",
2929
"@apollo/client": "~3.10.8",
3030
"@ecodev/fab-speed-dial": "^17.0.0",
31-
"@ecodev/natural": "^61.3.1",
32-
"@ecodev/natural-editor": "^61.3.1",
31+
"@ecodev/natural": "^62.0.0",
32+
"@ecodev/natural-editor": "^62.0.0",
3333
"@ecodev/natural-layout": "^2.0.2",
3434
"@graphql-codegen/cli": "^5.0.2",
3535
"@graphql-codegen/typescript-apollo-angular": "^4.0.0",

‎yarn.lock‎

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1639,10 +1639,10 @@
16391639
dependencies:
16401640
tslib "^2.6"
16411641

1642-
"@ecodev/natural-editor@^61.3.1":
1643-
version "61.3.1"
1644-
resolved "https://registry.yarnpkg.com/@ecodev/natural-editor/-/natural-editor-61.3.1.tgz#8817f3746a5d7b796b6f5e8f527a2ababa3e8927"
1645-
integrity sha512-T9s6Ysjw33sxC4ocS5S5Cc98fBcX+RCNTS3EZMmml4J0ZjbwwDOuYaKyGnDiWG8EGlMYwQSmEEMOl88fZlsgCQ==
1642+
"@ecodev/natural-editor@^62.0.0":
1643+
version "62.0.0"
1644+
resolved "https://registry.yarnpkg.com/@ecodev/natural-editor/-/natural-editor-62.0.0.tgz#f6a2f744337f862a14dd37d764db77090c99de43"
1645+
integrity sha512-iJl7Gy+ITz8IL1wD8TgKG9Anl9NX3QVQzTYEEdo84ZCUWtxqnLja/dGnl5aMOfM9TOaVRjXemt6jy0c+IgjrYA==
16461646
dependencies:
16471647
prosemirror-commands "^1.5.2"
16481648
prosemirror-dropcursor "^1.8.1"
@@ -1664,10 +1664,10 @@
16641664
resolved "https://registry.yarnpkg.com/@ecodev/natural-layout/-/natural-layout-2.0.2.tgz#e2c64c2ddb3c60793a39236b52624fde323e610a"
16651665
integrity sha512-BV75kFQmpfuSBNQ1jyKu+IdGkFTMESjPrtKrEyc3MqcmVhV5IiYU0LXTaghLZozuZgCT9HfMOnEsh05aS2j9uQ==
16661666

1667-
"@ecodev/natural@^61.3.1":
1668-
version "61.3.1"
1669-
resolved "https://registry.yarnpkg.com/@ecodev/natural/-/natural-61.3.1.tgz#9c0ae7e69bdc92ed549bcb24263162c5e2bc4961"
1670-
integrity sha512-xMjiZT7S0t3jgv7SRChRmm7VOl+ApA0Ad2W+W4uoGY/mgnNwQ2ZkbH8DSG+6z9WHwGzVBmeG9eK0qGUA3krb6w==
1667+
"@ecodev/natural@^62.0.0":
1668+
version "62.0.0"
1669+
resolved "https://registry.yarnpkg.com/@ecodev/natural/-/natural-62.0.0.tgz#14ed95bb4897b7502da7adb8c388fd61fd607d82"
1670+
integrity sha512-OAO3r+E0esPr/Zf0apnYpJsU1qqojzl3ElF+Qhm0rDXdUukNW3kIHLcyccMfrRN9yqQPrHriNQPShmTauQuFiw==
16711671
dependencies:
16721672
crypto-es "^2.0.3"
16731673
extract-files "^13.0.0"
@@ -8303,13 +8303,13 @@ prop-types@^15.7.2:
83038303
react-is "^16.13.1"
83048304

83058305
prosemirror-commands@^1.0.0, prosemirror-commands@^1.5.2:
8306-
version "1.5.2"
8307-
resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz#e94aeea52286f658cd984270de9b4c3fff580852"
8308-
integrity sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==
8306+
version "1.6.2"
8307+
resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz#d9cf6654912442cff47daa1677eb43ebd0b1f117"
8308+
integrity sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==
83098309
dependencies:
83108310
prosemirror-model "^1.0.0"
83118311
prosemirror-state "^1.0.0"
8312-
prosemirror-transform "^1.0.0"
8312+
prosemirror-transform "^1.10.2"
83138313

83148314
prosemirror-dropcursor@^1.8.1:
83158315
version "1.8.1"
@@ -8348,7 +8348,7 @@ prosemirror-inputrules@^1.2.1:
83488348
prosemirror-state "^1.0.0"
83498349
prosemirror-transform "^1.0.0"
83508350

8351-
prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.2.2:
8351+
prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.2.2:
83528352
version "1.2.2"
83538353
resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz#14a54763a29c7b2704f561088ccf3384d14eb77e"
83548354
integrity sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==
@@ -8366,10 +8366,10 @@ prosemirror-menu@^1.2.2:
83668366
prosemirror-history "^1.0.0"
83678367
prosemirror-state "^1.0.0"
83688368

8369-
prosemirror-model@^1.0.0, prosemirror-model@^1.19.0, prosemirror-model@^1.19.2, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.8.1:
8370-
version "1.22.1"
8371-
resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.22.1.tgz#2ed7d7840e710172c559d5a9950e92b870d1e764"
8372-
integrity sha512-gMrxal+F3higDFxCkBK5iQXckRVYvIu/3dopERJ6b20xfwZ9cbYvQvuldqaN+v/XytNPGyURYUpUU23kBRxWCQ==
8369+
prosemirror-model@^1.0.0, prosemirror-model@^1.19.0, prosemirror-model@^1.19.2, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.24.1:
8370+
version "1.24.1"
8371+
resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.24.1.tgz#b445e4f9b9cfc8c1a699215057b506842ebff1a9"
8372+
integrity sha512-YM053N+vTThzlWJ/AtPtF1j0ebO36nvbmDy4U7qA2XQB8JVaQp1FmB9Jhrps8s+z+uxhhVTny4m20ptUvhk0Mg==
83738373
dependencies:
83748374
orderedmap "^2.0.0"
83758375

@@ -8381,15 +8381,15 @@ prosemirror-schema-basic@^1.2.2:
83818381
prosemirror-model "^1.19.0"
83828382

83838383
prosemirror-schema-list@^1.3.0:
8384-
version "1.4.1"
8385-
resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.4.1.tgz#78b8d25531db48ca9688836dbde50e13ac19a4a1"
8386-
integrity sha512-jbDyaP/6AFfDfu70VzySsD75Om2t3sXTOdl5+31Wlxlg62td1haUpty/ybajSfJ1pkGadlOfwQq9kgW5IMo1Rg==
8384+
version "1.5.0"
8385+
resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.5.0.tgz#f05ddbe2e71efc9157a0dbedf80761c08bda5192"
8386+
integrity sha512-gg1tAfH1sqpECdhIHOA/aLg2VH3ROKBWQ4m8Qp9mBKrOxQRW61zc+gMCI8nh22gnBzd1t2u1/NPLmO3nAa3ssg==
83878387
dependencies:
83888388
prosemirror-model "^1.0.0"
83898389
prosemirror-state "^1.0.0"
83908390
prosemirror-transform "^1.7.3"
83918391

8392-
prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, prosemirror-state@^1.4.3:
8392+
prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.4.3:
83938393
version "1.4.3"
83948394
resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.3.tgz#94aecf3ffd54ec37e87aa7179d13508da181a080"
83958395
integrity sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==
@@ -8399,27 +8399,27 @@ prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, pr
83998399
prosemirror-view "^1.27.0"
84008400

84018401
prosemirror-tables@^1.3.4:
8402-
version "1.3.7"
8403-
resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.3.7.tgz#9d296bd432d2bc7dca90f14e5c3b5c5f61277f7a"
8404-
integrity sha512-oEwX1wrziuxMtwFvdDWSFHVUWrFJWt929kVVfHvtTi8yvw+5ppxjXZkMG/fuTdFo+3DXyIPSKfid+Be1npKXDA==
8402+
version "1.6.2"
8403+
resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.6.2.tgz#cec9e9ac6ecf81d67147c19ab39125d56c8351ae"
8404+
integrity sha512-97dKocVLrEVTQjZ4GBLdrrMw7Gv3no8H8yMwf5IRM9OoHrzbWpcH5jJxYgNQIRCtdIqwDctT1HdMHrGTiwp1dQ==
84058405
dependencies:
8406-
prosemirror-keymap "^1.1.2"
8407-
prosemirror-model "^1.8.1"
8408-
prosemirror-state "^1.3.1"
8409-
prosemirror-transform "^1.2.1"
8410-
prosemirror-view "^1.13.3"
8406+
prosemirror-keymap "^1.2.2"
8407+
prosemirror-model "^1.24.1"
8408+
prosemirror-state "^1.4.3"
8409+
prosemirror-transform "^1.10.2"
8410+
prosemirror-view "^1.37.1"
84118411

8412-
prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.3:
8413-
version "1.9.0"
8414-
resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.9.0.tgz#81fd1fbd887929a95369e6dd3d240c23c19313f8"
8415-
integrity sha512-5UXkr1LIRx3jmpXXNKDhv8OyAOeLTGuXNwdVfg8x27uASna/wQkr9p6fD3eupGOi4PLJfbezxTyi/7fSJypXHg==
8412+
prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.10.2, prosemirror-transform@^1.7.3:
8413+
version "1.10.2"
8414+
resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz#8ebac4e305b586cd96595aa028118c9191bbf052"
8415+
integrity sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==
84168416
dependencies:
84178417
prosemirror-model "^1.21.0"
84188418

8419-
prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.31.5:
8420-
version "1.33.8"
8421-
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.33.8.tgz#cfd76dff421730cbca0b6ea40ce36994daaeda41"
8422-
integrity sha512-4PhMr/ufz2cdvFgpUAnZfs+0xij3RsFysreeG9V/utpwX7AJtYCDVyuRxzWoMJIEf4C7wVihuBNMPpFLPCiLQw==
8419+
prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.31.5, prosemirror-view@^1.37.1:
8420+
version "1.37.1"
8421+
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.37.1.tgz#3ccd67cd3d831eb37a2505dd34151932462172fb"
8422+
integrity sha512-MEAnjOdXU1InxEmhjgmEzQAikaS6lF3hD64MveTPpjOGNTl87iRLA1HupC/DEV6YuK7m4Q9DHFNTjwIVtqz5NA==
84238423
dependencies:
84248424
prosemirror-model "^1.20.0"
84258425
prosemirror-state "^1.0.0"
@@ -9611,11 +9611,16 @@ tsconfig-paths@^4.1.2:
96119611
minimist "^1.2.6"
96129612
strip-bom "^3.0.0"
96139613

9614-
tslib@2.6.3, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.5.3, tslib@^2.6, tslib@^2.6.1, tslib@^2.6.2, tslib@^2.6.3, tslib@~2.6.0:
9614+
tslib@2.6.3, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6, tslib@^2.6.1, tslib@^2.6.2, tslib@^2.6.3, tslib@~2.6.0:
96159615
version "2.6.3"
96169616
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
96179617
integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
96189618

9619+
tslib@^2.5.3:
9620+
version "2.8.1"
9621+
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
9622+
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
9623+
96199624
tslib@~2.4.0:
96209625
version "2.4.1"
96219626
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"

0 commit comments

Comments
 (0)