diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html index e2b1cfb49bb..a6ffb9500b6 100644 --- a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html +++ b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html @@ -15,138 +15,215 @@

Mandate check

-@for (entry of entries; track entry.id) { -
+@for (entry of entries; track entry.id; let first = $first) { +

{{ entry.name }}

-
 
+
-
+
-
-
-
{{ 'present' | translate }}
-
-
-
 
-
-
-
{{ 'total' | translate }}
-
-
- -
-
-
- {{ entry.presentUserIds.length }} {{ displayPercent(entry.getPercent()) }} +
+ +
+ +
+ {{ 'Present' | translate }} +
+ +
+ +
+ {{ 'Total' | translate }} +
+ +
+
-
- -
-
-
{{ entry.getTotalCount() }}
+
+ + +
+
+
+ +
+
{{ entry.presentUserIds.length }} 
+
{{ displayPercent(entry.getPercent()) }} 
+
+ +
+
+ +
+
+ +
+
{{ entry.getTotalCount() }}
+
100% 
+
+ +
+
+
-
-
-

- -

-
- +
-
- @if (toggleGenderMap.get(entry.id)) { -
- @for (gender of genders; track gender.id) { +
+ @for (gender of genders; track gender.id; let last = $last) { @if (entry.getTotalCount(gender.id)) { -
-
- @if (entry.getTotalCount(gender.id)) { -
- {{ entry.genderEntryMap.get(gender.id)?.present }} - {{ - displayPercent( - $safeNavigationMigration( - entry.genderEntryMap.get(gender.id)?.present - ) / entry.presentUserIds.length - ) - }} -
- } -
-
-
+ +
+ +
+
+
+ +
+ @if (entry.getTotalCount(gender.id)) { + +
+
+ {{ entry.genderEntryMap.get(gender.id).present }} +
+
+ {{ + displayPercent( + $safeNavigationMigration( + entry.genderEntryMap.get(gender.id)?.present + ) / entry.presentUserIds.length + ) + }} +
+
+ } +
+ +
{{ - $safeNavigationMigration(entry.genderEntryMap.get(gender.id)?.label) - | translate + $safeNavigationMigration( + entry.genderEntryMap.get(gender.id)?.label === 'NA' + ? 'nonbinary' + : entry.genderEntryMap.get(gender.id)?.label + ) | translate }}
+ +
+ @if (entry.getTotalCount(gender.id)) { +
+
{{ entry.getTotalCount(gender.id) }}
+
+ {{ + displayPercent( + entry.getTotalCount(gender.id) / entry.getTotalCount() + ) + }} +
+
+
+ } +
+ +
+
+
+
+ } + } +
+ +
+ +
+
-
- @if (entry.getTotalCount(gender.id)) { -
- {{ entry.getTotalCount(gender.id) }} - {{ displayPercent(entry.getTotalCount(gender.id) / entry.getTotalCount()) }} + +
+ @if (entry.presentUserIds.length) { + +
+
{{ entry.presentUserIds.length }}
+
100%
}
-
- } - } + +
+ +
+
{{ entry.getTotalCount() }}
+
100%
+
+
+ +
+
+
+
+
- } -
-

- -

-
- +
-
- @if (toggleMap.get(entry.id)) {
-
-
- {{ 'Present' | translate }} + +
+ +
+
+
+ {{ 'Present' | translate }} +
+ @for (userId of entry.presentUserIds; track userId) { +
+ {{ getName(userId) }} +
+ }
- @for (userId of entry.presentUserIds; track userId) { -
{{ getName(userId) }}
- }
-
-
+
+
{{ 'Absent' | translate }}
@for (userId of entry.absentUserIds; track userId) { -
{{ getName(userId) }}
+
+ {{ getName(userId) }} +
}
+ +
} diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.scss b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.scss index abad4b3e0b5..39da21f36f7 100644 --- a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.scss +++ b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.scss @@ -1,5 +1,6 @@ @use 'src/assets/styles/tables.scss'; @use '@angular/material' as mat; +@use 'src/assets/styles/media-queries.scss'; .bar-height { @include mat.progress-bar-overrides( @@ -15,24 +16,46 @@ flex-direction: column; } +.flex-row { + display: flex; + flex-direction: row; +} + +.flex { + display: flex; +} + .justify-center { justify-self: center; } +.justify-content-center { + justify-content: center; +} + .align-left { align-items: start; } +.align-right { + align-items: end; +} + .groups-grid { display: flex; flex-direction: column; align-items: center; margin-top: 20px; + + mat-form-field { + min-width: 25%; + } } .border-grid { display: grid; grid-template-columns: 15% 70% 15%; + @media (max-width: 700px) { grid-template-columns: 0px 100% 0px; border-width: 0px; @@ -41,29 +64,209 @@ .header-grid { display: grid; - grid-template-columns: 95% 5%; + grid-template-columns: 92% 8%; + max-width: inherit; + + & h2 { + margin-top: 0; + margin-bottom: 0; + align-self: center; + } + + @include media-queries.set-breakpoint-lower(xs) { + grid-template-columns: 84% 8%; + } +} + +mat-card { + max-width: 100vw; + display: inline-flex; + scrollbar-width: none; + color: black !important; +} + +mat-progress-bar { + width: 100%; + min-width: 0; + margin-right: 3em; + border-radius: 10px; + --mdc-linear-progress-active-indicator-height: 1.5em; + --mdc-linear-progress-track-height: 1.5em; + + .mdc-linear-progress__bar-inner { + border-top-right-radius: 50% 10px; + border-bottom-right-radius: 50% 10px; + } + + @include media-queries.set-breakpoint-lower(430px) { + max-width: 20%; + min-width: 0; + padding: 0; + } } -.card-grid { +.mandate-card mat-card { + background-color: #fafafa; +} +.mandate-card.first mat-card { + background-color: white; + border: 1px solid #000; +} + +.map-grid { + max-width: inherit; display: grid; - grid-template-columns: 1fr 70px 1fr 55px 1fr; - grid-column-gap: 10px; - @media (max-width: 700px) { - grid-template-columns: 1fr 70px 1fr 55px 1fr; - grid-column-gap: 5px; + + .row, + .row-mandate { + max-width: inherit; + display: grid; + white-space: nowrap; + grid-template-columns: 6.5fr 7fr 50fr 7fr 5fr; + + & div { + width: 100%; + } + + .central-element { + max-width: 90%; + align-self: center; + } + + .mandate-ammount > div { + display: flex; + justify-content: end; + align-items: end; + } + + .text-large { + font-size: xx-large; + } + + .margin-right--5 { + margin-right: -5px; + } + + .margin-bottom-15 { + margin-bottom: 15px; + } + + .total-genders { + display: flex !important; + flex-direction: row !important; + font-weight: bold !important; + color: #b7b7b7 !important; + } + + .empty-center { + display: flex; + justify-content: center; + margin-left: -10px; + margin-right: 20px; + } + } + + .row { + padding: 1em 0em 1em 0em; } - @media (min-width: 1500px) { - grid-template-columns: 1fr 70px 200px 55px 1fr; - grid-column-gap: 10px; + + .cell-width { + width: fit-content; + text-align: end; + } + + .row:nth-child(even) { + background-color: #fafafa; + } +} + +.gender-grid { + max-width: inherit; + display: grid; + + .row, + .row-mandate { + max-width: inherit; + display: grid; + white-space: nowrap; + grid-template-columns: 8fr 8fr 50fr 8fr 7fr; + + & div { + width: 100%; + } + + .central-element { + max-width: 90%; + align-self: center; + } + + .mandate-ammount > div { + display: flex; + justify-content: end; + align-items: end; + } + } + + .row { + padding: 1em 0em 1em 0em; + } + + .cell-width { + width: fit-content; + text-align: end; + } + + .row:nth-child(even) { + background-color: #fafafa; } } .footer-grid { display: grid; - grid-template-columns: 50% 50%; - grid-gap: 20px; + max-width: inherit; + width: inherit; + grid-template-columns: 9fr 29fr 29fr 9fr; + + .participants-cell { + width: inherit; + display: grid; + grid-template-columns: 50% 25%; + gap: 20%; + + div { + width: inherit; + overflow-wrap: break-word; + min-width: 0; + } + + .present { + margin-left: 8%; + } + + .absent { + width: calc(100% + 10px); + margin-right: -4%; + } + } + @media (max-width: 700px) { - grid-template-columns: repeat(auto-fit, 250px); + .participants-cell { + display: flex; + flex-direction: column; + gap: 0%; + + div { + overflow-wrap: anywhere; + } + + .present { + margin-left: 0px; + } + + .absent { + margin-left: 0px; + } + } } } @@ -90,19 +293,44 @@ .margin-left-large { margin-left: 140px; + @media (max-width: 700px) { margin-left: 70px; } } +.margin-top--30 { + margin-top: -30px; +} + +.margin-top-20 { + margin-top: 20px; +} + +.no-left-margin { + margin-left: 0px; +} + .margin-left-medium { - margin-left: 70px; + margin-left: 115px; } .margin-bottom-20 { margin-bottom: 20px; } +.margin-bottom-10 { + margin-bottom: 10px; +} + +.margin-left--10 { + margin-left: -10px; +} + +.margin-auto { + margin: auto; +} + button { border-radius: 0%; } @@ -128,3 +356,37 @@ button { .text-medium { font-size: 14px; } + +.text-align-end { + text-align: end; +} + +.min-width-98 { + min-width: 98px; +} + +.min-width-50 { + min-width: 50px; +} + +.padding-right { + padding-right: 1em; +} + +.stroke { + border-top: 1px solid #bbb8b8; +} + +.fit-content { + width: fit-content; +} + +.updown-arrow { + justify-self: end; + align-self: center; + margin-top: -10px; +} + +.gap { + gap: 20px; +} diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.ts b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.ts index ae079f22097..071a3f8e902 100644 --- a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.ts +++ b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.ts @@ -169,7 +169,7 @@ export class MandateCheckListComponent extends BaseMeetingComponent implements O if (Number.isNaN(value)) { return ``; } - return `(${Number(value * 100).toFixed(0)}%)`; + return `${Number(value * 100).toFixed(0)}%`; } public toggle(structureLevelId: Id, gender?: boolean): void {