diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index b1699f64555b68133f03c0448a0234bfe3c27344..11af67f2eaa91e54ed12ec0c833413bd95d7d1b9 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -29,31 +29,30 @@
<mat-grid-tile>
<button mat-icon-button
routerLink="/creator/room/{{ room.shortId }}/comments">
- <mat-icon matBadge="{{commentCounter}}" matBadgeColor="primary">question_answer</mat-icon>
+ <mat-icon matBadge="{{commentCounter}}" matBadgeColor="primary"
+ [ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.comments' | translate}}</h3>
- <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.comments' | translate}}</h4>
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
- <mat-icon class="smallerIcon">thumbs_up_down
+ <mat-icon class="smallerIcon" [ngClass]="{'desktop' : deviceType === 'desktop'}">thumbs_up_down
</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3>
- <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.live-feedback' | translate}}</h4>
</button>
</mat-grid-tile>
</mat-grid-list>
- <mat-grid-list cols="2" rowHeight="2:1">
+ <mat-grid-list cols="2" rowHeight="2:1" class="second">
<mat-grid-tile>
<button mat-icon-button
routerLink="/creator/room/{{ room.shortId }}/create-content">
- <mat-icon>note_add</mat-icon>
+ <mat-icon [ngClass]="{'desktop' : deviceType === 'desktop'}">note_add</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-content' | translate}}</h3>
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/statistics">
- <mat-icon>insert_chart</mat-icon>
+ <mat-icon [ngClass]="{'desktop' : deviceType === 'desktop'}">insert_chart</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.answer-statistics' | translate}}</h3>
</button>
</mat-grid-tile>
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index 8f940964eae7bc442a28c86cfc6262373962da86..aec0fd018695673e069a252ca1e87bac42f73b16 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -15,7 +15,7 @@ button {
width: 30%;
transition: all 0.3s;
&:hover {
- transform: scale(1.25)
+ transform: scale(1.2)
}
}
@@ -24,12 +24,18 @@ button {
}
.mat-icon-button {
- width: 75%;
+ width: 100%;
height: 75%;
- margin-bottom: 10%;
color: var(--primary)!important;
}
+.desktop {
+ font-size: 65px;
+ height: 65px;
+ width: 65px;
+ margin-bottom: 5%;
+}
+
#settings {
width: 10%;
max-width: 40px;
@@ -42,18 +48,18 @@ button {
}
mat-icon {
- font-size: 50px;
- height: 50px;
- width: 50px;
+ font-size: 60px;
+ height: 60px;
+ width: 60px;
line-height: 100%!important;
}
mat-grid-list {
- margin-bottom: 10px !important;
+ margin-bottom: 5px !important;
}
-mat-tooltip-component {
- position: relative;
+.second {
+ margin-bottom: 20px !important;
}
h2 {
@@ -69,6 +75,7 @@ h3 {
h4 {
font-size: medium;
color: var(--on-surface)!important;
+ padding: 0 1% 0 1%;
}
mat-card-header {
@@ -85,7 +92,8 @@ mat-card-subtitle {
}
mat-grid-tile {
- height: 100px!important;
+ height: 100%!important;
+ padding: 2%!important;
}
mat-expansion-panel {
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.html b/src/app/components/participant/room-participant-page/room-participant-page.component.html
index 18c270940cf66995f82a7ca02d709c92c39c370c..4ff398687e25ddfc3a65125ba2b595a543d86bdc 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.html
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.html
@@ -2,14 +2,21 @@
<div fxLayout="row" fxLayoutAlign="center">
<mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
<mat-card *ngIf="room">
- <mat-card-header fxLayoutAlign="center">
- <mat-card-title fxLayoutAlign="center">
- <h2>{{ room.name }}</h2>
- </mat-card-title>
- <mat-card-subtitle fxLayoutAlign="center">
- <h3>{{ room.shortId.slice(0,4) }} {{ room.shortId.slice(4,8) }}</h3>
- </mat-card-subtitle>
- </mat-card-header>
+ <div fxLayout="row">
+ <span class="fill-remaining-space"></span>
+ <mat-card-header fxLayoutAlign="center">
+ <mat-card-title fxLayoutAlign="center">
+ <h2>{{ room.name }}</h2>
+ </mat-card-title>
+ <mat-card-subtitle fxLayoutAlign="center">
+ <h3>{{ room.shortId.slice(0, 4) }} {{ room.shortId.slice(4, 8) }}</h3>
+ </mat-card-subtitle>
+ </mat-card-header>
+ <span class="fill-remaining-space"></span>
+ <button mat-icon-button id="settings" routerLink="/participant/room/{{ room.shortId }}/statistics">
+ <mat-icon id="settings-icon" matTooltip="{{ 'statistic.answer-statistic' | translate}}">insert_chart</mat-icon>
+ </button>
+ </div>
<mat-divider></mat-divider>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
<h4>{{room.description.trim()}}</h4>
@@ -17,26 +24,20 @@
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>
<button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/comments">
- <mat-icon matBadge="{{commentCounter}}" matBadgeColor="primary">question_answer</mat-icon>
+ <mat-icon matBadge="{{commentCounter}}" matBadgeColor="primary" [ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-comment' | translate}}</h3>
- <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.create-comment' | translate}}</h4>
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/feedback-barometer">
- <mat-icon>thumbs_up_down</mat-icon>
+ <mat-icon [ngClass]="{'desktop' : deviceType === 'desktop'}">thumbs_up_down</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.give-feedback' | translate}}</h3>
- <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.give-feedback' | translate}}</h4>
- </button>
- </mat-grid-tile>
- <mat-grid-tile>
- <button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/statistics">
- <mat-icon>insert_chart</mat-icon>
- <h3 *ngIf="deviceType === 'desktop'">{{ 'statistic.answer-statistic' | translate}}</h3>
</button>
</mat-grid-tile>
</mat-grid-list>
+
<app-content-groups *ngIf="room && room.contentGroups" [contentGroups]="room.contentGroups"></app-content-groups>
</mat-card>
+
</div>
</div>
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.scss b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
index 18d253c2a01004ef61b85963ba5f37354530d8f0..5f5b0aab42ad0352dadbd4f40913d39b4f29d8fe 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.scss
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
@@ -3,7 +3,7 @@
mat-card {
width: 100%;
max-width: 800px;
- min-height: 300px;
+ min-height: 350px;
background-color: var(--surface)!important;
}
@@ -14,15 +14,21 @@ mat-card-content>:first-child {
.mat-icon-button {
width: 100%;
height: 75%;
- margin-bottom: 10%;
+ margin-bottom: 3%;
color: var(--primary)!important;
}
mat-icon {
+ font-size: 60px;
+ height: 60px;
+ width: 60px;
+ line-height: 100%!important;
+}
+
+.desktop {
font-size: 70px;
height: 70px;
width: 70px;
- line-height: 100%!important;
}
button {
@@ -30,7 +36,7 @@ button {
transition: all 0.3s;
&:hover {
- transform: scale(1.25)
+ transform: scale(1.2)
}
}
@@ -49,6 +55,7 @@ h3 {
h4 {
font-size: 15px;
color: var(--on-surface)!important;
+ padding: 0 1% 0 1%;
}
mat-card-header {
@@ -71,13 +78,21 @@ mat-expansion-panel {
}
mat-grid-list {
- margin-bottom: 10px !important;
+ margin-bottom: 20px !important;
}
mat-grid-tile {
- height: 100px!important;
+ height: 100%!important;
+ padding: 2%!important;
+}
+
+#settings {
+ width: 10%;
+ max-width: 40px;
}
-mat-tooltip-component {
- position: relative;
+#settings-icon {
+ font-size: 35px;
+ height: 35px;
+ width: 35px;
}