Commit 3295af23 authored by Lukas Mauß's avatar Lukas Mauß Committed by Tom Käsler

Fix layout in creator-room-view

parent 4b031087
......@@ -36,57 +36,66 @@
{{ 'room-page.moderators' | translate}}
</button>
</mat-menu>
<button mat-icon-button class="corner-icons" [matMenuTriggerFor]="settingsMenu">
<mat-icon class="corner-icon" matTooltip="{{ 'room-page.session-settings' | translate}}">settings</mat-icon>
</button>
<div fxLayout="column">
<button mat-icon-button class="corner-icons" [matMenuTriggerFor]="settingsMenu">
<mat-icon class="corner-icon" matTooltip="{{ 'room-page.session-settings' | translate}}">settings</mat-icon>
</button>
<button mat-icon-button class="corner-icons" routerLink="/creator/room/{{ room.shortId }}/statistics">
<mat-icon class="corner-icon" matTooltip="{{ 'room-page.answer-statistics' | translate}}">insert_chart
</mat-icon>
</button>
</div>
</div>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
<h4>
{{ room.description.trim() }}
</h4>
</mat-card-content>
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1">
<mat-grid-tile>
<button mat-icon-button
routerLink="/creator/room/{{ room.shortId }}/comments">
<mat-icon matBadge="{{commentCounter}}" class="main-icon"
[ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer</mat-icon>
<h3>{{ 'room-page.comments' | translate}}</h3> <!-- *ngIf="deviceType === 'desktop'" -->
</button>
</mat-grid-tile>
<mat-grid-tile *ngIf="moderationEnabled">
<button mat-icon-button routerLink="/moderator/room/{{ room.shortId }}/moderator/comments">
<mat-icon matBadge="{{moderatorCommentCounter}}" class="main-icon"
[ngClass]="{'desktop' : deviceType === 'desktop'}">gavel
</mat-icon>
<h3>{{ 'room-page.moderating-stream' | translate}}</h3> <!-- *ngIf="deviceType === 'desktop'" -->
</button>
</mat-grid-tile>
<!-- <mat-grid-tile>
<button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
<mat-icon class="smallerIcon" [ngClass]="{'desktop' : deviceType === 'desktop'}">thumbs_up_down
</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3>
</button>
</mat-grid-tile> -->
</mat-grid-list>
<!-- <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 class="main-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 class="main-icon" [ngClass]="{'desktop' : deviceType === 'desktop'}">insert_chart</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.answer-statistics' | translate}}</h3>
</button>
</mat-grid-tile>
</mat-grid-list>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayout="row">
<span class="fill-remaining-space"></span>
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="2:1">
<mat-grid-tile>
<button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/comments">
<mat-icon matBadge="{{commentCounter}}" class="main-icon"
[ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer
</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.comments' | translate}}</h3>
</button>
</mat-grid-tile>
<mat-grid-tile *ngIf="moderationEnabled">
<button mat-icon-button routerLink="/moderator/room/{{ room.shortId }}/moderator/comments">
<mat-icon matBadge="{{moderatorCommentCounter}}" class="main-icon"
[ngClass]="{'desktop' : deviceType === 'desktop'}">gavel
</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.moderating-stream' | translate}}</h3>
</button>
</mat-grid-tile>
</mat-grid-list>
<span class="fill-remaining-space"></span>
</div>
<div fxLayout="row">
<span class="fill-remaining-space"></span>
<mat-grid-list cols="2" rowHeight="2:1" class="second">
<mat-grid-tile>
<button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
<mat-icon class="main-icon" [ngClass]="{'desktop' : deviceType === 'desktop'}">thumbs_up_down
</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3>
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/create-content">
<mat-icon class="main-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-list>
<span class="fill-remaining-space"></span>
</div>
</div>
<app-content-groups *ngIf="room && room.contentGroups" [contentGroups]="room.contentGroups"></app-content-groups> -->
<app-content-groups *ngIf="room && room.contentGroups" [contentGroups]="room.contentGroups"></app-content-groups>
</mat-card>
<div *ngIf="!isLoading && !room">{{ 'room-page.room-not-found' | translate }}</div>
......
......@@ -15,7 +15,7 @@ mat-card-content > :first-child {
}
.mat-icon-button {
width: 60%; // 100%
width: 60%;
height: 75%;
color: var(--primary)!important;
transition: all 0.3s;
......@@ -25,14 +25,16 @@ mat-card-content > :first-child {
}
.desktop {
font-size: 65px;
height: 65px;
width: 65px;
font-size: 80px;
height: 80px;
width: 80px;
margin-bottom: 5%;
}
.corner-icons {
width: 40px;
height: 40px;
margin-bottom: 5%;
}
.corner-icon {
......@@ -42,25 +44,11 @@ mat-card-content > :first-child {
line-height: 100%;
}
/*.main-icon{
.main-icon{
font-size: 60px;
height: 60px;
width: 60px;
line-height: 100%!important;
}*/
.main-icon{
font-size: 80px;
height: 80px;
width: 80px;
line-height: 100%!important;
}
.smallerIcon {
font-size: 55px;
height: 55px;
width: 55px;
line-height: 100%!important;
}
.room-short-id {
......@@ -72,6 +60,7 @@ mat-card-content > :first-child {
mat-grid-list {
margin-bottom: 5px !important;
width: 90%;
}
.second {
......@@ -98,6 +87,7 @@ h4 {
mat-card-header {
min-height: 80px;
height: 10%!important;
margin-bottom: 10%!important;
}
mat-card-title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment