Merge branch '188-refine-room-view' into 'master'

Resolve "Refine room view"

Closes #188

See merge request !132

src/app/components/creator/room-creator-page/room-creator-page.component.html

@@ -2,7 +2,7 @@
   <div fxLayout="row" fxLayoutAlign="center">
     <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
     <mat-card *ngIf="room">
-      <mat-card-header>
+      <mat-card-header fxLayoutAlign="center">
         <mat-card-title>
           <h3 class="subheading-2">{{ room.name }}</h3>
         </mat-card-title>
@@ -13,36 +13,52 @@
         </mat-card-subtitle>
       </mat-card-header>
       <mat-divider></mat-divider>
-      <mat-card-content>
+      <mat-card-content fxLayoutAlign="center">
         <p>
           {{ room.description }}
         </p>
       </mat-card-content>
       <mat-divider></mat-divider>
-      <mat-card-actions>
-        <button mat-button color="primary" background-color="accent"
+      <mat-grid-list cols="3" rowHeight="2:1">
+        <mat-grid-tile colspan="1" rowspan="1">
+        <button mat-icon-button color="primary" matTooltip="{{ 'room-page.create-content' | translate}}"
                 routerLink="/creator/room/{{ room.shortId }}/create-content">
-          {{ 'room-page.create-content' | translate }}
+          <mat-icon>note_add</mat-icon>
         </button>
-        <button mat-button color="primary"
-                routerLink="/creator/room/{{ room.shortId }}/comments">
-          {{ 'room-page.comments' | translate }}
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.comments' | translate}}"
+                  routerLink="/creator/room/{{ room.shortId }}/comments">
+            <mat-icon>question_answer</mat-icon>
+          </button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-icon-button *ngIf="!modify" (click)="showEditDialog()"  color="accent"
+                  matTooltip="{{ 'room-page.edit-room' | translate}}">
+            <mat-icon>create</mat-icon>
+          </button>
+        </mat-grid-tile>
+      </mat-grid-list>
+      <mat-grid-list cols="3" rowHeight="2:1">
+        <mat-grid-tile>
+         <button mat-icon-button color="primary" matTooltip="{{ 'room-page.answer-statistics' | translate}}"
+                 routerLink="/creator/room/{{ room.shortId }}/statistics">
+           <mat-icon>insert_chart</mat-icon>
+         </button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.live-feedback' | translate}}"
+                  routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
+            <mat-icon>thumbs_up_down</mat-icon>
+          </button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+        <button mat-icon-button color="warn" (click)="openDeletionRoomDialog()"
+                matTooltip="{{ 'room-page.delete-room' | translate}}">
+          <mat-icon>delete_forever</mat-icon>
         </button>
-        <button mat-button color="primary"
-                routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
-          {{ 'room-page.live-feedback' | translate }}
-        </button>
-        <button mat-button color="primary"
-                routerLink="/creator/room/{{ room.shortId }}/statistics">
-          {{ 'room-page.answer-statistics' | translate }}
-        </button>
-        <button mat-button *ngIf="!modify" (click)="showEditDialog()"  color="primary">
-          {{ 'room-page.edit-room' | translate }}
-        </button>
-        <button mat-button color="warn" (click)="openDeletionRoomDialog()">
-          {{ 'room-page.delete-room' | translate }}
-        </button>
-      </mat-card-actions>
+        </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>

src/app/components/creator/room-creator-page/room-creator-page.component.scss

 mat-card {
   width: 800px;
+  background-color: #c8e6c9;
 }
 
 mat-card-content > :first-child {
-  margin-top: 16px;
-  margin-bottom: 16px;
+  margin-top: 5%;
+  margin-bottom: 5%;
 }
 
 button {
   margin: 5px;
   width: 30%;
+  &:hover {
+    transform: scale(1.25)
+  }
+}
+
+.mat-icon{
+  height:100% !important;
+  width:100% !important;
+  font-size:48px !important;
 }

src/app/components/shared/content-groups/content-groups.component.html

 <mat-card *ngFor="let contentGroup of contentGroups" (click)="viewContents(contentGroup)">
-  <mat-divider></mat-divider>
   <mat-card-header>
     <mat-card-title>
       <h4 *ngIf="!(contentGroup.name == 'Default')">{{contentGroup.name}}<mat-icon color="accent"

src/app/components/shared/content-groups/content-groups.component.scss

+@import '../../../../theme/_variables.scss';
+
+$light-amber: #bbdefb;
+
+.mat-card {
+  background-color: #fff8e1;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    position: relative;
+    top: 0;
+    text-align: center;
+    transition: all 0.25s;
+
+    &:hover {
+      cursor: pointer;
+      background-color: $light-amber;
+      top: -15px;
+      box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
+    }
+}