From b3844e4fb3aba1af5b2df782f1280b0f7dde85d6 Mon Sep 17 00:00:00 2001
From: anbebe <58171814+anbebe@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:27:25 +0100
Subject: [PATCH] Fix list election mobile layout (#4385)

---
 .../base-poll-vote.component.html             | 30 ++++++++++++++++---
 .../base-poll-vote.component.scss             | 19 ++++++++++++
 .../base-poll-vote.component.ts               |  9 ++++++
 3 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.html b/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.html
index 07a4c1d013..312f818c51 100644
--- a/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.html
+++ b/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.html
@@ -71,8 +71,16 @@ <h4 class="poll-delegation-title">
                             <div
                                 [ngClass]="{
                                     'yna-grid':
-                                        poll.isMethodYNA ||
-                                        (settings.isSplitSingleOption && displayed_in_autopilot && poll.isMethodYNA),
+                                        ((poll.isListPoll && !isMobile) || !poll.isListPoll) &&
+                                        (poll.isMethodYNA ||
+                                            (settings.isSplitSingleOption &&
+                                                displayed_in_autopilot &&
+                                                poll.isMethodYNA)),
+                                    'yna-grid-extended':
+                                        poll.isMethodYNA &&
+                                        isMobile &&
+                                        !settings.isSplitSingleOption &&
+                                        poll.isListPoll,
                                     'remove-grid-gap': settings.isSplitSingleOption && displayed_in_autopilot,
                                     'yn-grid':
                                         poll.isMethodYN ||
@@ -92,9 +100,23 @@ <h4 class="poll-delegation-title">
                                     !(settings.isSplitSingleOption && displayed_in_autopilot)
                                 ) {
                                     <b class="grid-name-area">
-                                        {{ poll.option_ids.length }} {{ optionPluralLabel | translate }}
+                                        @if (poll.isListPoll) {
+                                            {{ poll.options[0]?.contentTitlesAsSortedArray.length }}
+                                        } @else {
+                                            {{ poll.option_ids.length }}
+                                        }
+                                        {{ optionPluralLabel | translate }}
                                     </b>
                                 }
+                                @if (!settings.isSplitSingleOption && poll.isListPoll && isMobile) {
+                                    @if (poll.options[0]?.content_object) {
+                                        <div class="vote-option-title-single">
+                                            <span>
+                                                <span>{{ poll.options[0].content_object.getTitle() | translate }}</span>
+                                            </span>
+                                        </div>
+                                    }
+                                }
                                 @for (
                                     action of voteActions.length ? voteActions : voteOptions;
                                     track action.vote;
@@ -207,7 +229,7 @@ <h4 class="poll-delegation-title">
                                         }
                                     </div>
                                 }
-                                @if (!settings.isSplitSingleOption && option.isListOption) {
+                                @if (!settings.isSplitSingleOption && option.isListOption && !isMobile) {
                                     <div class="vote-option-title grid-name-area">
                                         @if (option.content_object) {
                                             <span>
diff --git a/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.scss b/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.scss
index e902ce659a..61c8c353c9 100644
--- a/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.scss
+++ b/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.scss
@@ -102,6 +102,15 @@
     }
 }
 
+.yna-grid-extended {
+    @extend %vote-grid-base;
+    grid-template-areas: 'name name name name' 'subtitle subtitle subtitle subtitle' '. yes no abstain';
+    grid-template-columns: auto var(--poll-option-title-width, 70px) var(--poll-option-title-width, 70px) var(
+            --poll-option-title-width,
+            70px
+        );
+}
+
 .remove-grid-gap {
     @media (max-width: 700px) {
         //grid-gap: 0 !important;
@@ -198,6 +207,16 @@
     }
 }
 
+.vote-option-title-single {
+    display: flex;
+    span,
+    i {
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+    grid-area: subtitle;
+}
+
 .option0 {
     grid-area: yes;
 }
diff --git a/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.ts b/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.ts
index b282cd36c3..93d12c739a 100644
--- a/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.ts
+++ b/client/src/app/site/pages/meetings/modules/poll/components/base-poll-vote/base-poll-vote.component.ts
@@ -17,6 +17,7 @@ import { PollControllerService } from 'src/app/site/pages/meetings/modules/poll/
 import { ViewOption, ViewPoll } from 'src/app/site/pages/meetings/pages/polls';
 import { ViewUser } from 'src/app/site/pages/meetings/view-models/view-user';
 import { OperatorService } from 'src/app/site/services/operator.service';
+import { ViewPortService } from 'src/app/site/services/view-port.service';
 import { CustomIcon } from 'src/app/ui/modules/custom-icon/definitions';
 
 import { MeetingSettingsService } from '../../../../services/meeting-settings.service';
@@ -74,6 +75,10 @@ export abstract class BasePollVoteComponent<C extends PollContentObject = any> e
         return this.user?.isPresentInMeeting();
     }
 
+    public get isMobile(): boolean {
+        return this.viewport.isMobile;
+    }
+
     public PollPropertyVerbose = PollPropertyVerbose;
 
     public delegations: ViewUser[] = [];
@@ -147,6 +152,7 @@ export abstract class BasePollVoteComponent<C extends PollContentObject = any> e
     protected cd = inject(ChangeDetectorRef);
     private pollRepo = inject(PollControllerService);
     private operator = inject(OperatorService);
+    private viewport = inject(ViewPortService);
     private votedSubscription: Subscription;
     private votedSubscriptionPollId: Id;
 
@@ -184,6 +190,9 @@ export abstract class BasePollVoteComponent<C extends PollContentObject = any> e
                 for (const key of Object.keys(this._canVoteForSubjectMap)) {
                     this._canVoteForSubjectMap[+key].next(this.canVote(this._delegationsMap[+key]));
                 }
+            }),
+            this.viewport.isMobileSubject.subscribe(() => {
+                this.cd.markForCheck();
             })
         );
     }