From 5a545258ad708a8ea1256d42298cfbc874afe967 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Sun, 23 Jun 2019 16:21:48 +0200
Subject: [PATCH] Fix room-view for both roles
---
.../room-creator-page.component.html | 18 ++++++++----------
.../room-creator-page.component.scss | 10 +++-------
.../room-participant-page.component.html | 10 ++--------
.../room-participant-page.component.scss | 15 ++++++++-------
.../content-groups.component.scss | 4 ++--
5 files changed, 23 insertions(+), 34 deletions(-)
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 f46e71404..c3ff1df15 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
@@ -20,15 +20,10 @@
</button>
</div>
<mat-divider></mat-divider>
- <mat-card-content id="description" fxLayoutAlign="center">
- <mat-expansion-panel *ngIf="!(room.description == '')" class="mat-elevation-z0">
- <mat-expansion-panel-header>
- <h4>{{ 'room-page.description' | translate }}</h4>
- </mat-expansion-panel-header>
- <p>
- {{ room.description }}
- </p>
- </mat-expansion-panel>
+ <mat-card-content fxLayoutAlign="center">
+ <h4>
+ {{ room.description }}
+ </h4>
</mat-card-content>
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>
@@ -36,6 +31,7 @@
routerLink="/creator/room/{{ room.shortId }}/comments">
<mat-icon>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>
@@ -43,6 +39,7 @@
<mat-icon class="smallerIcon">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>
@@ -62,8 +59,9 @@
</button>
</mat-grid-tile>
</mat-grid-list>
--->
+
<app-content-groups *ngIf="room && room.contentGroups" [contentGroups]="room.contentGroups"></app-content-groups>
+-->
</mat-card>
<div *ngIf="!isLoading && !room">Error: room could not be found!</div>
</div>
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 2d187d3c7..8f940964e 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
@@ -2,6 +2,7 @@
mat-card {
width: 800px;
+ min-height: 350px;
background-color: var(--surface)!important;
}
@@ -25,7 +26,7 @@ button {
.mat-icon-button {
width: 75%;
height: 75%;
- margin-bottom: 20px;
+ margin-bottom: 10%;
color: var(--primary)!important;
}
@@ -55,11 +56,6 @@ mat-tooltip-component {
position: relative;
}
-p {
- font-size: medium;
- color: var(--on-surface)!important;
-}
-
h2 {
font-size: large;
color: var(--on-surface)!important;
@@ -89,7 +85,7 @@ mat-card-subtitle {
}
mat-grid-tile {
- height: 20px;
+ height: 100px!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 99b6c45c7..6eda77022 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
@@ -12,14 +12,6 @@
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content fxLayoutAlign="center">
- <!-- <mat-expansion-panel *ngIf="!(room.description == '')" class="mat-elevation-z0">
- <mat-expansion-panel-header>
- <h4>{{ 'room-page.description' | translate }}</h4>
- </mat-expansion-panel-header>
- <p>
- {{ room.description }}
- </p>
- </mat-expansion-panel> -->
<h4>{{room.description}}</h4>
</mat-card-content>
<mat-grid-list cols="2" rowHeight="2:1">
@@ -27,12 +19,14 @@
<button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/comments">
<mat-icon>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>
<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>
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 6dd4c78b6..18d253c2a 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,6 +3,7 @@
mat-card {
width: 100%;
max-width: 800px;
+ min-height: 300px;
background-color: var(--surface)!important;
}
@@ -12,8 +13,8 @@ mat-card-content>:first-child {
.mat-icon-button {
width: 100%;
- height: 100%;
- margin-bottom: 10px;
+ height: 75%;
+ margin-bottom: 10%;
color: var(--primary)!important;
}
@@ -40,14 +41,14 @@ h2 {
h3 {
font-size: larger;
- color: var(--on-surface);
+ color: var(--on-surface)!important;
margin-top: 15px;
margin-bottom: 10px;
}
h4 {
- font-size: medium;
- color: var(--on-surface);
+ font-size: 15px;
+ color: var(--on-surface)!important;
}
mat-card-header {
@@ -70,11 +71,11 @@ mat-expansion-panel {
}
mat-grid-list {
- margin-bottom: 20px !important;
+ margin-bottom: 10px !important;
}
mat-grid-tile {
- height: 20px;
+ height: 100px!important;
}
mat-tooltip-component {
diff --git a/src/app/components/shared/content-groups/content-groups.component.scss b/src/app/components/shared/content-groups/content-groups.component.scss
index a7e29e898..a374456f1 100644
--- a/src/app/components/shared/content-groups/content-groups.component.scss
+++ b/src/app/components/shared/content-groups/content-groups.component.scss
@@ -1,7 +1,7 @@
@import '../../../../theme/default-theme/_variables.scss';
#contentGroup {
- background-color: var(--secondary);
+ background-color: var(--primary);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
@@ -11,7 +11,7 @@
margin-top: 10px;
max-height: 50px;
padding: 5px;
- color: var(--on-secondary);
+ color: var(--on-primary);
&:hover {
cursor: pointer;
--
GitLab