diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index bde69f23b487b81b7d8044eb9440ea071443cdb5..b67996b14d231d22c6f45db958256e96c2554852 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -17,9 +17,10 @@
*ngIf="router.url.includes('comments') && deviceType === 'desktop'"></span>
<button *ngIf="router.url.includes('comments') && deviceType === 'desktop'"
mat-raised-button class="question-focus-btn" routerLink="participant/room/{{shortId}}/comments/questionwall">
- <mat-icon svgIcon="beamer"></mat-icon>
- <span class="question-focus-btn-txt">Question Focus</span>
+ <mat-icon>person</mat-icon>
+ <span class="question-focus-btn-txt">{{ 'header.question-wall-entry' | translate }}</span>
</button>
+ <span class="fill-remaining-space" *ngIf="user.role===0"></span>
<span class="fill-remaining-space"
*ngIf="router.url.includes('comments') && user.role === 3 && deviceType === 'desktop'"></span>
<span
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.html b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
index f4ad2b3c8254596e66e359d36f2565223c7e3167..e7bd0221074b3e82519e8c4b3ea950d592d4ed46 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.html
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
@@ -1,4 +1,5 @@
<ars-screen ars-flex-box class="questionwall-screen">
+ <!-- Header -->
<ars-row [height]="50" class="questionwall-header">
<ars-style-btn-material *ngIf="room" style="width:100%;height:100%;" ars-flex-box>
<ars-fill ars-flex-box>
@@ -20,16 +21,22 @@
</ars-fill>
</ars-style-btn-material>
</ars-row>
+ <!-- Content -->
<ars-fill ars-flex-box>
+ <!-- Present -->
<ars-fill style="overflow:hidden;" ars-flex-box>
<ars-fill>
</ars-fill>
<ars-row class="questionwall-present-box-outer">
<div class="questionwall-present-box-inner">
<ng-container *ngIf="commentFocus">
+ <ars-row [height]="50"></ars-row>
<ars-row class="questionwall-present-meta">
<ars-col>
- <h2 class="questionwall-present-meta-user">#{{commentFocus.comment.userNumber}}</h2>
+ <i class="questionwall-icon questionwall-present-meta-user-icon">person</i>
+ </ars-col>
+ <ars-col>
+ <h2 class="questionwall-present-meta-user">{{commentFocus.comment.userNumber}}</h2>
</ars-col>
<ars-col>
<h2 class="questionwall-present-meta-timestamp">{{commentFocus.timeAgo}}</h2>
@@ -38,6 +45,19 @@
<ars-row>
<p class="questionwall-present">{{commentFocus.comment.body}}</p>
</ars-row>
+ <ars-row ars-flex-box *ngIf="commentFocus.comment.answer">
+ <ars-col>
+ <p class="questionwall-present-answer-title">
+ {{'question-wall.present-answer' | translate}}
+ </p>
+ </ars-col>
+ <ars-fill>
+ <p class="questionwall-present-answer-text">
+ {{commentFocus.comment.answer}}
+ </p>
+ </ars-fill>
+ </ars-row>
+ <ars-row [height]="50"></ars-row>
</ng-container>
<ng-container *ngIf="!commentFocus">
<p class="questionwall-present-introduction-title">{{'question-wall.intro-title' | translate}}</p>
@@ -48,6 +68,7 @@
<ars-fill>
</ars-fill>
</ars-fill>
+ <!-- Comment-List -->
<ars-col [width]="450" [overflow]="'auto'" class="questionwall-list" #colComponent>
<ars-row *ngFor="let comment of comments" class="questionwall-comment-anchor">
<ars-row style="box-sizing:border-box;padding:8px;">
@@ -58,7 +79,10 @@
(click)="focusComment(comment)"
style="box-sizing:border-box;padding:16px;cursor:pointer">
<ars-col>
- <p class="questionwall-comment-user">#{{comment.comment.userNumber}}</p>
+ <i class="questionwall-icon questionwall-comment-user-icon">person</i>
+ </ars-col>
+ <ars-col>
+ <p class="questionwall-comment-user">{{comment.comment.userNumber}}</p>
</ars-col>
<ars-col>
<p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
@@ -99,34 +123,35 @@
</ars-row>
</ars-col>
</ars-fill>
- <ars-row [height]="50" class="questionwall-footer">
- <ars-style-btn-material style="width:100%;" ars-flex-box>
- <ars-col ars-btn-wrp [xp]="16" [extra]="true">
- <button ars-btn (click)="toggleFocusIncommingComments()">
- <ng-container *ngIf="focusIncommingComments">
- <i>{{'question-wall.auto-renew-off-icon' | translate}}</i>
- <p>{{'question-wall.auto-renew-off' | translate}}</p>
- </ng-container>
- <ng-container *ngIf="!focusIncommingComments">
- <i>{{'question-wall.auto-renew-on-icon' | translate}}</i>
- <p>{{'question-wall.auto-renew-on' | translate}}</p>
- </ng-container>
- </button>
- </ars-col>
- <ars-fill></ars-fill>
- <ars-col style="display:flex;flex-direction:column;justify-content:center">
- <p *ngIf="unreadComments" style="line-height:18px;" class="questionwall-text-color">{{unreadComments}}</p>
- </ars-col>
- <ars-col ars-btn-wrp [xp]="16" [extra]="true">
- <button ars-btn (click)="prevComment()">
- <i>{{'question-wall.prev-comment-icon' | translate}}</i>
- <p>{{'question-wall.prev-comment' | translate}}</p>
- </button>
- <button ars-btn (click)="nextComment()">
- <i>{{'question-wall.next-comment-icon' | translate}}</i>
- <p>{{'question-wall.next-comment' | translate}}</p>
- </button>
- </ars-col>
- </ars-style-btn-material>
- </ars-row>
+ <!-- Footer -->
+ <ars-row [height]="50" class="questionwall-footer">
+ <ars-style-btn-material style="width:100%;" ars-flex-box>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+ <button ars-btn (click)="toggleFocusIncommingComments()">
+ <ng-container *ngIf="focusIncommingComments">
+ <i>{{'question-wall.auto-renew-off-icon' | translate}}</i>
+ <p>{{'question-wall.auto-renew-off' | translate}}</p>
+ </ng-container>
+ <ng-container *ngIf="!focusIncommingComments">
+ <i>{{'question-wall.auto-renew-on-icon' | translate}}</i>
+ <p>{{'question-wall.auto-renew-on' | translate}}</p>
+ </ng-container>
+ </button>
+ </ars-col>
+ <ars-fill></ars-fill>
+ <ars-col style="display:flex;flex-direction:column;justify-content:center">
+ <p *ngIf="unreadComments" style="line-height:18px;" class="questionwall-text-color">{{unreadComments}}</p>
+ </ars-col>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+ <button ars-btn (click)="prevComment()">
+ <i>{{'question-wall.prev-comment-icon' | translate}}</i>
+ <p>{{'question-wall.prev-comment' | translate}}</p>
+ </button>
+ <button ars-btn (click)="nextComment()">
+ <i>{{'question-wall.next-comment-icon' | translate}}</i>
+ <p>{{'question-wall.next-comment' | translate}}</p>
+ </button>
+ </ars-col>
+ </ars-style-btn-material>
+ </ars-row>
</ars-screen>
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
index 57493392f2e1d56ce639623d8cc40e0ab18f17bc..94d2eab86151fe88538cc33649cee1598656d3b3 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
@@ -6,6 +6,14 @@
}
.questionwall{
+ &-icon{
+ font-family:'Material Icons', serif;
+ font-weight:normal;
+ font-style:normal;
+ font-size:18px;
+ line-height:18px;
+ color:var(--ars-header-color);
+ }
&-header{
background-color:var(--ars-foreground-color);
border-bottom:solid 1px var(--ars-border-color);
@@ -37,6 +45,12 @@
color:var(--ars-header-color);
font-size:14px;
padding-right:8px;
+ padding-left:4px;
+ &-icon{
+ position:relative;
+ top:2px;
+ line-height:12px;
+ }
}
&-body{
hyphens:auto;
@@ -88,9 +102,16 @@
&-user{
font-family:Roboto, 'sans-serif';
font-size:18px;
- padding-left:32px;
+ padding-left:8px;
padding-right:16px;
color:var(--ars-header-color);
+ &-icon{
+ padding-left:32px;
+ font-size:24px;
+ line-height:18px;
+ position:relative;
+ top:2px;
+ }
}
&-timestamp{
font-family:Roboto, 'sans-serif';
@@ -99,6 +120,26 @@
color:var(--ars-paragraph-color);
}
}
+ &-answer{
+ &-title{
+ font-family:Roboto, 'sans-serif';
+ font-size:18px;
+ font-weight:500;
+ padding-left:32px;
+ color:var(--ars-header-color);
+ line-height:24px;
+ }
+ &-text{
+ font-family:Roboto, 'sans-serif';
+ font-size:18px;
+ font-weight:400;
+ padding-left:16px;
+ padding-right:16px;
+ box-sizing:border-box;
+ color:var(--ars-paragraph-color);
+ line-height:24px;
+ }
+ }
&-introduction{
&-title{
font-size:35px;
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index 14c13dfe7c8757875c828af60cf3d89a325318e4..d630c271d454e2f15386de9ccd2ce729fdf0c2f9 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -63,7 +63,8 @@
"sure": "Bist du sicher?",
"user-bonus-token": "Zu deinen Bonus Tokens",
"user-got-tokens": "Du hast noch Tokens für Bonuspunkte, die verloren gehen!",
- "visited-sessions": "Besuchte Sitzungen"
+ "visited-sessions": "Besuchte Sitzungen",
+ "question-wall-entry": "Fragen-Fokus"
},
"help": {
"cancel": "Schließen",
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 683c987cff4d208506f9ca8d094903cbfa560afb..2e1e35122170a353170f185ecce68c75b125fb80 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -64,7 +64,8 @@
"sure": "Are you sure?",
"user-bonus-token": "See your bonus tokens",
"user-got-tokens": "You have bonus tokens linked to this account that will be lost!",
- "visited-sessions": "Visited sessions"
+ "visited-sessions": "Visited sessions",
+ "question-wall-entry": "Question-Focus"
},
"help": {
"cancel": "Close",
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index bf7f6c1464a4d41135575e35027649bea6e7b2da..ab7e02c9becbf0ef862027db6d757891b0e8a460 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -129,6 +129,7 @@
"intro-title": "Fragen-Fokus",
"intro-desc": "Klick auf eine Frage oder navigiere mit der Leertaste vorwärts oder mit den Pfeiltasten vor und zurück.",
"sort-time": "Zeit",
- "sort-score": "Bewertung"
+ "sort-score": "Bewertung",
+ "present-answer": "Antwort"
}
}
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 482b5a6c71aaada6eb9fdeb2e8e043af967a30a0..b8e9fc7a4e00266b1b2d448b065cf6890dad4c78 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -128,6 +128,7 @@
"intro-title": "Question Focus",
"intro-desc": "Click on a question or navigate forwards with the space bar or backwards and forwards with the arrow keys.",
"sort-time": "Time",
- "sort-score": "Score"
+ "sort-score": "Score",
+ "present-answer": "Answer"
}
}