Reworks the banner showing if there are polls

- Makes it higher on mobilephones
- Changes title, if there is only one poll

client/src/app/core/ui-services/banner.service.ts

@@ -10,6 +10,7 @@ export interface BannerDefinition {
     bgColor?: string;
     color?: string;
     link?: string;
+    largerOnMobileView?: boolean;
 }
 
 /**
@@ -20,8 +21,6 @@ export interface BannerDefinition {
     providedIn: 'root'
 })
 export class BannerService {
-    public readonly BANNER_HEIGHT = 20;
-
     public activeBanners: BehaviorSubject<BannerDefinition[]> = new BehaviorSubject<BannerDefinition[]>([]);
 
     /**

client/src/app/core/ui-services/voting-banner.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 
 import { TranslateService } from '@ngx-translate/core';
 
+import { ViewMotionPoll } from 'app/site/motions/models/view-motion-poll';
 import { ViewBasePoll } from 'app/site/polls/models/view-base-poll';
 import { PollListObservableService } from 'app/site/polls/services/poll-list-observable.service';
 import { BannerDefinition, BannerService } from './banner.service';
@@ -29,37 +30,66 @@ export class VotingBannerService {
      * @param polls the updated poll list
      */
     private checkForVotablePolls(polls: ViewBasePoll[]): void {
-        // display no banner if in history mode
-        if (this.OSStatus.isInHistoryMode && this.currentBanner) {
-            this.banner.removeBanner(this.currentBanner);
-            this.currentBanner = null;
+        // display no banner if in history mode or there are no polls to vote
+        const pollsToVote = polls.filter(poll => this.votingService.canVote(poll) && !poll.user_has_voted);
+        if ((this.OSStatus.isInHistoryMode && this.currentBanner) || !pollsToVote.length) {
+            this.sliceBanner();
             return;
         }
 
-        const pollsToVote = polls.filter(poll => this.votingService.canVote(poll) && !poll.user_has_voted);
-        if (pollsToVote.length === 1) {
-            const poll = pollsToVote[0];
-            const banner = {
-                text: this.translate.instant('Click here to vote on the poll') + ` "${poll.title}"!`,
-                link: poll.parentLink,
-                bgColor: 'green'
-            };
-            this.banner.replaceBanner(this.currentBanner, banner);
-            this.currentBanner = banner;
-        } else if (pollsToVote.length > 1) {
-            const banner = {
-                text:
-                    this.translate.instant('You have') +
-                    ` ${pollsToVote.length} ` +
-                    this.translate.instant('polls to vote on!'),
-                link: '/polls/',
-                bgColor: 'green'
-            };
-            this.banner.replaceBanner(this.currentBanner, banner);
-            this.currentBanner = banner;
+        const banner =
+            pollsToVote.length === 1
+                ? this.createBanner(this.getTextForPoll(pollsToVote[0]), pollsToVote[0].parentLink)
+                : this.createBanner(
+                      `${this.translate.instant('You have polls to vote on')}: ${pollsToVote.length}`,
+                      '/polls/'
+                  );
+        this.sliceBanner(banner);
+    }
+
+    /**
+     * Creates a new `BannerDefinition` and returns it.
+     *
+     * @param text The text for the banner.
+     * @param link The link for the banner.
+     *
+     * @returns The created banner.
+     */
+    private createBanner(text: string, link: string): BannerDefinition {
+        return {
+            text: text,
+            link: link,
+            icon: 'how_to_vote',
+            largerOnMobileView: true
+        };
+    }
+
+    /**
+     * Returns for a given poll a title for the banner.
+     *
+     * @param poll The given poll.
+     *
+     * @returns The title.
+     */
+    private getTextForPoll(poll: ViewBasePoll): string {
+        return poll instanceof ViewMotionPoll
+            ? `${this.translate.instant('Motion') + ' ' + poll.motion.getIdentifierOrTitle()}: ${this.translate.instant(
+                  'Voting started'
+              )}!`
+            : `${poll.getTitle()}: ${this.translate.instant('Ballots opened')}!`;
+    }
+
+    /**
+     * Removes the current banner or replaces it, if a new one is given.
+     *
+     * @param nextBanner Optional the next banner to show.
+     */
+    private sliceBanner(nextBanner?: BannerDefinition): void {
+        if (nextBanner) {
+            this.banner.replaceBanner(this.currentBanner, nextBanner);
         } else {
             this.banner.removeBanner(this.currentBanner);
-            this.currentBanner = null;
         }
+        this.currentBanner = nextBanner || null;
     }
 }

client/src/app/shared/components/banner/banner.component.html

@@ -1,10 +1,12 @@
 <div
     *ngFor="let banner of banners"
     class="banner"
-    [ngClass]="(banner.type === 'history' ? 'history-mode-indicator' : '') + ' ' + (banner.class ? banner.class : '')"
+    [ngClass]="[
+        banner.type === 'history' ? 'history-mode-indicator' : '',
+        banner.class ? banner.class : '',
+        banner.largerOnMobileView ? 'larger-on-mobile' : ''
+    ]"
     [ngSwitch]="banner.type"
-    [style.background-color]="banner.bgColor"
-    [style.color]="banner.color"
 >
     <ng-container *ngSwitchCase="'history'">
         <span translate>You are using the history mode of OpenSlides. Changes will not be saved.</span>
@@ -12,7 +14,7 @@
         <a (click)="timeTravel.resumeTime()" translate>Exit</a>
     </ng-container>
     <ng-container *ngSwitchDefault>
-        <a [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
+        <a class="banner-link" [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
             <mat-icon>{{ banner.icon }}</mat-icon> <span>{{ banner.text }}</span>
         </a>
     </ng-container>

client/src/app/shared/components/banner/banner.component.scss

@@ -1,4 +1,12 @@
+@import '../../../../assets/styles/media-queries.scss';
+
 .banner {
+    &.larger-on-mobile {
+        @include set-breakpoint-lower(sm) {
+            height: 40px;
+        }
+    }
+
     position: relative; // was fixed before to prevent the overflow
     height: 20px;
     line-height: 20px;
@@ -7,12 +15,18 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    border-bottom: 1px solid white;
 
     a {
         display: flex;
         align-items: center;
+        justify-content: center;
         text-decoration: none;
         color: white;
+        &.banner-link {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     mat-icon {