From 2b6a9e3eda4f612893711c562b9c1dcf508eeb1d Mon Sep 17 00:00:00 2001
From: Philipp Sautner <philipp.sautner@mni.thm.de>
Date: Wed, 18 Aug 2021 15:13:18 +0200
Subject: [PATCH] Adds more responsive layout for mobile users and disables go
to question button when no valid token has been entered
---
.../bonus-token/bonus-token.component.html | 11 +++++---
.../bonus-token/bonus-token.component.scss | 25 ++++++++++++++++++-
2 files changed, 32 insertions(+), 4 deletions(-)
diff --git a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
index 68434020f..8aaa38b57 100644
--- a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
+++ b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
@@ -3,7 +3,7 @@
<h3 class="oldtypo-h3">»{{room.name}}«</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>
diff --git a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss
index 58652948f..d1e8b0aa6 100644
--- a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss
+++ b/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
--
GitLab