From fc17ddcdaa70071259fea4be1fb7b7e43c47be2a Mon Sep 17 00:00:00 2001 From: Javier Borrego Date: Fri, 24 Apr 2026 12:19:59 +0200 Subject: [PATCH 1/5] Beautified code --- .../mandate-check-list.component.html | 198 +++++++++++------- 1 file changed, 119 insertions(+), 79 deletions(-) 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 45294102be4..02bd612f3ba 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 @@ -22,97 +22,126 @@

Mandate check

{{ entry.name }}

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

- -

-
- -
+ +
@if (toggleGenderMap.get(entry.id)) { -
+
@for (gender of genders; track gender.id) { @if (entry.getTotalCount(gender.id)) { -
-
- @if (entry.getTotalCount(gender.id)) { -
- {{ entry.genderEntryMap.get(gender.id)?.present }} + +
+
+
+
+
+ @if (entry.getTotalCount(gender.id)) { + {{ displayPercent( entry.genderEntryMap.get(gender.id)?.present / entry.presentUserIds.length ) }} -
- } -
-
-
{{ entry.genderEntryMap.get(gender.id)?.label | translate }}
-
-
- @if (entry.getTotalCount(gender.id)) { -
+ {{ entry.genderEntryMap.get(gender.id)?.present }} + } +
+
+ + {{ entry.genderEntryMap.get(gender.id)?.label | translate }} +
+
+ @if (entry.getTotalCount(gender.id)) { + {{ entry.getTotalCount(gender.id) }} {{ displayPercent(entry.getTotalCount(gender.id) / entry.getTotalCount()) }} -
- } + } +
+ +
+
+
-
} }
} -
-

- -

+
+

+
+ +
+

@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 }} +
+
+ {{ 'Absent' | translate }} +
+ @for (userId of entry.absentUserIds; track userId) { +
+ {{ getName(userId) }} +
+ }
- @for (userId of entry.absentUserIds; track userId) { -
{{ getName(userId) }}
- }
+ +
} From c0dffa7e318f2bdd9b4b28a9b124c0930951be40 Mon Sep 17 00:00:00 2001 From: Javier Borrego Date: Fri, 24 Apr 2026 12:24:50 +0200 Subject: [PATCH 2/5] Never forgotten scss --- .../mandate-check-list.component.scss | 164 +++++++++++++++--- 1 file changed, 144 insertions(+), 20 deletions(-) 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..2992eda4fce 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,13 +1,10 @@ @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( - ( - track-height: 1.5em, - active-indicator-height: 1.5em - ) - ); + @include mat.progress-bar-overrides((track-height: 1.5em, + active-indicator-height: 1.5em)); } .flex-container { @@ -23,16 +20,25 @@ 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 +47,122 @@ .header-grid { display: grid; - grid-template-columns: 95% 5%; + grid-template-columns: 92% 8%; + max-width: inherit; + margin-top: 50px; + + & 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; +} + +mat-progress-bar, +mat-progress-bar * { + width: 100%; + min-width: 0; + margin-right: 3em; + + @include media-queries.set-breakpoint-lower(430px) { + max-width: 20%; + min-width: 0; + padding: 0; + } } -.card-grid { +.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: 8fr 5fr 50fr 5fr 8fr; + + & div { + width: 100%; + } + + .central-element { + max-width: 90%; + align-self: center; + } } - @media (min-width: 1500px) { - grid-template-columns: 1fr 70px 200px 55px 1fr; - grid-column-gap: 10px; + + .row { + padding: 1em 0em 1em 0em; + } + + .cell-width { + width: fit-content; + text-align: end; + } + + .row:nth-child(odd) { + background-color: #fafafa; } } .footer-grid { display: grid; - grid-template-columns: 50% 50%; - grid-gap: 20px; + max-width: inherit; + width: inherit; + grid-template-columns: 8fr 60fr 8fr; + gap: 0em; + + .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 +189,24 @@ .margin-left-large { margin-left: 140px; + @media (max-width: 700px) { margin-left: 70px; } } .margin-left-medium { - margin-left: 70px; + margin-left: 115px; } .margin-bottom-20 { margin-bottom: 20px; } +.margin-auto { + margin: auto; +} + button { border-radius: 0%; } @@ -128,3 +232,23 @@ button { .text-medium { font-size: 14px; } + +.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; +} \ No newline at end of file From 92cd176c9c7aa733561e5fbb20d9b3ad8cddbf05 Mon Sep 17 00:00:00 2001 From: Javier Borrego Date: Mon, 27 Apr 2026 14:59:06 +0200 Subject: [PATCH 3/5] Linter run --- .../mandate-check-list.component.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) 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 2992eda4fce..b2d9480a991 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 @@ -3,8 +3,12 @@ @use 'src/assets/styles/media-queries.scss'; .bar-height { - @include mat.progress-bar-overrides((track-height: 1.5em, - active-indicator-height: 1.5em)); + @include mat.progress-bar-overrides( + ( + track-height: 1.5em, + active-indicator-height: 1.5em + ) + ); } .flex-container { @@ -251,4 +255,4 @@ button { .fit-content { width: fit-content; -} \ No newline at end of file +} From c1983f630b401fecd64b6ba95c0f0e58ecf294c0 Mon Sep 17 00:00:00 2001 From: Javier Borrego Date: Tue, 5 May 2026 14:25:09 +0200 Subject: [PATCH 4/5] Rounded bar corners --- .../mandate-check-list/mandate-check-list.component.scss | 8 ++++++++ 1 file changed, 8 insertions(+) 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 b2d9480a991..e72cc759b75 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 @@ -77,6 +77,14 @@ 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%; From d542d1c9e083083267d59ce5f65ee609c3c1b1e0 Mon Sep 17 00:00:00 2001 From: Javier Borrego Date: Wed, 27 May 2026 11:31:37 +0200 Subject: [PATCH 5/5] Cleanup --- .../mandate-check-list/mandate-check-list.component.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 e72cc759b75..bc1d62ffcd0 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 @@ -72,8 +72,7 @@ mat-card { scrollbar-width: none; } -mat-progress-bar, -mat-progress-bar * { +mat-progress-bar { width: 100%; min-width: 0; margin-right: 3em;