Update UI of the preview frame when the server is unavailable

parent 4b09e021
Pipeline #11005 passed with stages
in 3 minutes and 3 seconds
This diff is collapsed.
<div id="mathjaxStyle"></div> <div id="mathjaxStyle"></div>
<div *ngIf="targetEnvironment === ENVIRONMENT_TYPE.ANSWEROPTIONS" <div *ngIf="targetEnvironment === ENVIRONMENT_TYPE.ANSWEROPTIONS"
id="answer-option-preview" id="answer-option-preview"
[class]="'preview-frame ' + deviceClass()"> [class]="'preview-frame ' + deviceClass()">
<app-header></app-header> <app-header></app-header>
<div id="answer-option-element-wrapper"
class="d-flex justify-content-around align-items-center flex-wrap"> <ng-container *ngIf="connectionService.serverAvailable;else notAvailableTmpl">
<div *ngFor="let elem of dataSource; let i = index" <div id="answer-option-element-wrapper"
class="answer-option-element d-flex justify-content-center align-items-center rounded m-2 pointer" class="d-flex justify-content-around align-items-center flex-wrap">
[style.flex-basis]="question.showOneAnswerPerRow ? '100%' : getComputedWidth()"> <div *ngFor="let elem of dataSource; let i = index"
<p *ngIf="question.displayAnswerText" class="answer-option-element d-flex justify-content-center align-items-center rounded m-2 pointer"
class="markdown-answer" [style.flex-basis]="question.showOneAnswerPerRow ? '100%' : getComputedWidth()">
[innerHTML]="sanitizeHTML(elem)"></p> <p *ngIf="question.displayAnswerText"
<p *ngIf="!question.displayAnswerText" class="markdown-answer"
class="mb-0" [innerHTML]="sanitizeHTML(elem)"></p>
[innerHTML]="normalizeAnswerOptionIndex(i)"></p> <p *ngIf="!question.displayAnswerText"
class="mb-0"
[innerHTML]="normalizeAnswerOptionIndex(i)"></p>
</div>
</div> </div>
</div> </ng-container>
</div> </div>
<div *ngIf="targetEnvironment === ENVIRONMENT_TYPE.QUESTION" <div *ngIf="targetEnvironment === ENVIRONMENT_TYPE.QUESTION"
id="question-preview" id="question-preview"
[class]="'preview-frame overflow-auto ' + deviceClass()"> [class]="'preview-frame overflow-auto ' + deviceClass()">
<app-header></app-header> <app-header></app-header>
<p class="p-0" [innerHTML]="sanitizeHTML(dataSource)"></p> <ng-container *ngIf="connectionService.serverAvailable;else notAvailableTmpl">
<p class="p-0" [innerHTML]="sanitizeHTML(dataSource)"></p>
</ng-container>
</div> </div>
<div *ngIf="targetDevice === DEVICE_TYPE.XS" class="homeButton hidden"></div> <div *ngIf="targetDevice === DEVICE_TYPE.XS" class="homeButton hidden"></div>
<ng-template #notAvailableTmpl>
<h3 class="text-light text-center d-flex align-items-center server-not-available-label">{{'plugins.splashscreen.error.error_messages.no_preview_available' | translate}}</h3>
</ng-template>
\ No newline at end of file
...@@ -56,3 +56,7 @@ ...@@ -56,3 +56,7 @@
} }
} }
} }
.server-not-available-label {
height: calc(100% - 10vh);
}
\ No newline at end of file
...@@ -6,6 +6,7 @@ import {ActiveQuestionGroupService} from '../../service/active-question-group.se ...@@ -6,6 +6,7 @@ import {ActiveQuestionGroupService} from '../../service/active-question-group.se
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {IQuestionChoice} from 'arsnova-click-v2-types/src/questions/interfaces'; import {IQuestionChoice} from 'arsnova-click-v2-types/src/questions/interfaces';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser'; import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {ConnectionService} from '../../service/connection.service';
@Component({ @Component({
selector: 'app-live-preview', selector: 'app-live-preview',
...@@ -49,6 +50,7 @@ export class LivePreviewComponent implements OnInit, OnDestroy { ...@@ -49,6 +50,7 @@ export class LivePreviewComponent implements OnInit, OnDestroy {
constructor( constructor(
public questionTextService: QuestionTextService, public questionTextService: QuestionTextService,
public connectionService: ConnectionService,
private activeQuestionGroupService: ActiveQuestionGroupService, private activeQuestionGroupService: ActiveQuestionGroupService,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
private route: ActivatedRoute private route: ActivatedRoute
......
Markdown is supported
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