Skip to content
Snippets Groups Projects
Commit 3295af23 authored by Lukas Mauß's avatar Lukas Mauß Committed by Tom Käsler
Browse files

Fix layout in creator-room-view

parent 4b031087
1 merge request!405Prepare 1.3
This commit is part of merge request !405. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/app/components/creator/room-creator-page/room-creator-page.component.html
+ 53
− 44
Edit View file @ 3295af23
...@@ -36,57 +36,66 @@ ...@@ -36,57 +36,66 @@
{{ 'room-page.moderators' | translate}} {{ 'room-page.moderators' | translate}}
</button> </button>
</mat-menu> </mat-menu>
<button mat-icon-button class="corner-icons" [matMenuTriggerFor]="settingsMenu"> <div fxLayout="column">
<mat-icon class="corner-icon" matTooltip="{{ 'room-page.session-settings' | translate}}">settings</mat-icon> <button mat-icon-button class="corner-icons" [matMenuTriggerFor]="settingsMenu">
</button> <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> </div>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center"> <mat-card-content *ngIf="room.description" fxLayoutAlign="center">
<h4> <h4>
{{ room.description.trim() }} {{ room.description.trim() }}
</h4> </h4>
</mat-card-content> </mat-card-content>
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1"> <div fxLayout="column" fxLayoutAlign="center">
<mat-grid-tile> <div fxLayout="row">
<button mat-icon-button <span class="fill-remaining-space"></span>
routerLink="/creator/room/{{ room.shortId }}/comments"> <mat-grid-list cols="{{viewModuleCount}}" rowHeight="2:1">
<mat-icon matBadge="{{commentCounter}}" class="main-icon" <mat-grid-tile>
[ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer</mat-icon> <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/comments">
<h3>{{ 'room-page.comments' | translate}}</h3> <!-- *ngIf="deviceType === 'desktop'" --> <mat-icon matBadge="{{commentCounter}}" class="main-icon"
</button> [ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer
</mat-grid-tile> </mat-icon>
<mat-grid-tile *ngIf="moderationEnabled"> <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.comments' | translate}}</h3>
<button mat-icon-button routerLink="/moderator/room/{{ room.shortId }}/moderator/comments"> </button>
<mat-icon matBadge="{{moderatorCommentCounter}}" class="main-icon" </mat-grid-tile>
[ngClass]="{'desktop' : deviceType === 'desktop'}">gavel <mat-grid-tile *ngIf="moderationEnabled">
</mat-icon> <button mat-icon-button routerLink="/moderator/room/{{ room.shortId }}/moderator/comments">
<h3>{{ 'room-page.moderating-stream' | translate}}</h3> <!-- *ngIf="deviceType === 'desktop'" --> <mat-icon matBadge="{{moderatorCommentCounter}}" class="main-icon"
</button> [ngClass]="{'desktop' : deviceType === 'desktop'}">gavel
</mat-grid-tile> </mat-icon>
<!-- <mat-grid-tile> <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.moderating-stream' | translate}}</h3>
<button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer"> </button>
<mat-icon class="smallerIcon" [ngClass]="{'desktop' : deviceType === 'desktop'}">thumbs_up_down </mat-grid-tile>
</mat-icon> </mat-grid-list>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3> <span class="fill-remaining-space"></span>
</button> </div>
</mat-grid-tile> --> <div fxLayout="row">
</mat-grid-list> <span class="fill-remaining-space"></span>
<!-- <mat-grid-list cols="2" rowHeight="2:1" class="second"> <mat-grid-list cols="2" rowHeight="2:1" class="second">
<mat-grid-tile> <mat-grid-tile>
<button mat-icon-button <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
routerLink="/creator/room/{{ room.shortId }}/create-content"> <mat-icon class="main-icon" [ngClass]="{'desktop' : deviceType === 'desktop'}">thumbs_up_down
<mat-icon class="main-icon" [ngClass]="{'desktop' : deviceType === 'desktop'}">note_add</mat-icon> </mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-content' | translate}}</h3> <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3>
</button> </button>
</mat-grid-tile> </mat-grid-tile>
<mat-grid-tile> <mat-grid-tile>
<button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/statistics"> <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/create-content">
<mat-icon class="main-icon" [ngClass]="{'desktop' : deviceType === 'desktop'}">insert_chart</mat-icon> <mat-icon class="main-icon" [ngClass]="{'desktop' : deviceType === 'desktop'}">note_add</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.answer-statistics' | translate}}</h3> <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-content' | translate}}</h3>
</button> </button>
</mat-grid-tile> </mat-grid-tile>
</mat-grid-list> </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> </mat-card>
<div *ngIf="!isLoading && !room">{{ 'room-page.room-not-found' | translate }}</div> <div *ngIf="!isLoading && !room">{{ 'room-page.room-not-found' | translate }}</div>
......
src/app/components/creator/room-creator-page/room-creator-page.component.scss
+ 9
− 19
Edit View file @ 3295af23
...@@ -15,7 +15,7 @@ mat-card-content > :first-child { ...@@ -15,7 +15,7 @@ mat-card-content > :first-child {
} }
.mat-icon-button { .mat-icon-button {
width: 60%; // 100% width: 60%;
height: 75%; height: 75%;
color: var(--primary)!important; color: var(--primary)!important;
transition: all 0.3s; transition: all 0.3s;
...@@ -25,14 +25,16 @@ mat-card-content > :first-child { ...@@ -25,14 +25,16 @@ mat-card-content > :first-child {
} }
.desktop { .desktop {
font-size: 65px; font-size: 80px;
height: 65px; height: 80px;
width: 65px; width: 80px;
margin-bottom: 5%; margin-bottom: 5%;
} }
.corner-icons { .corner-icons {
width: 40px; width: 40px;
height: 40px;
margin-bottom: 5%;
} }
.corner-icon { .corner-icon {
...@@ -42,25 +44,11 @@ mat-card-content > :first-child { ...@@ -42,25 +44,11 @@ mat-card-content > :first-child {
line-height: 100%; line-height: 100%;
} }
/*.main-icon{ .main-icon{
font-size: 60px; font-size: 60px;
height: 60px; height: 60px;
width: 60px; width: 60px;
line-height: 100%!important; 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 { .room-short-id {
...@@ -72,6 +60,7 @@ mat-card-content > :first-child { ...@@ -72,6 +60,7 @@ mat-card-content > :first-child {
mat-grid-list { mat-grid-list {
margin-bottom: 5px !important; margin-bottom: 5px !important;
width: 90%;
} }
.second { .second {
...@@ -98,6 +87,7 @@ h4 { ...@@ -98,6 +87,7 @@ h4 {
mat-card-header { mat-card-header {
min-height: 80px; min-height: 80px;
height: 10%!important; height: 10%!important;
margin-bottom: 10%!important;
} }
mat-card-title { mat-card-title {
......
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