Merge branch '240+242-layout-button-disable' into 'staging'

Adds more responsive layout for mobile users and disables go to question...

Closes #242 and #240

See merge request arsnova/topic-cloud!147

src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html

@@ -3,7 +3,7 @@
   <h3 class="oldtypo-h3">&raquo;{{room.name}}&laquo;</h3>
   <h3 class="oldtypo-h3">{{ 'room-page.session-id' | translate}}: {{ room.shortId }}</h3>
   <div *ngIf="bonusTokens.length >= 1">
-    <div>
+    <div class="validator">
       <mat-form-field>
         <input (focus)="eventService.makeFocusOnInputTrue()"
                (blur)="eventService.makeFocusOnInputFalse()"
@@ -19,9 +19,14 @@
         <mat-hint align="end"
                   class="count"><span aria-hidden="true">{{ value.length }} / 8</span></mat-hint>
       </mat-form-field>
-      <button (click)="navToCommentByValue()"
+      <button *ngIf="!valid" (click)="navToCommentByValue()"
               matTooltip="{{ 'room-page.nav-to-comment' | translate }}"
-              mat-stroked-button>
+              mat-stroked-button disabled>
+        Go to Question
+      </button>
+      <button *ngIf="valid" (click)="navToCommentByValue()"
+              matTooltip="{{ 'room-page.nav-to-comment' | translate }}"
+              mat-stroked-button class="enabled">
         Go to Question
       </button>
     </div>

src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss

@@ -22,9 +22,32 @@ p {
 }
 
 .mat-stroked-button {
-  margin-left: 30px
+  margin-left: 30px;
+  width: 130px;
+  height: 40px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  cursor: pointer;
 }
 
 .selected {
   color: var(--red);
 }
+
+.enabled {
+  color: var(--primary);
+  border-color: var(--primary);
+}
+
+.validator {
+  overflow: hidden;
+}
+
+.validator .mat-stroked-button {
+  float: right;
+  margin-left: -40%;
+}
\ No newline at end of file