Fixes the styling of the additonaldatacomponent in the quiz manager. Refactors...

Fixes the styling of the additonaldatacomponent in the quiz manager. Refactors unnecessary css class
parent bab3fe92
Pipeline #18240 failed with stages
in 2 minutes and 45 seconds
<div *ngIf="questionGroupItem"
id="quizSummaryHeader"
class="quizSummary mt-md-3 px-md-0">
<div id="quizSummaryHeader"
class="quizSummary mt-3 mt-sm-0 mt-md-3 px-md-0">
<div class="row no-gutters">
......@@ -11,7 +10,7 @@
<h5 class="text-center">{{'component.quiz_summary.quiz_name' | translate}}</h5>
<p class="mb-0 d-flex align-self-center align-items-end h-100 text-bold text-center"
role="listitem">
<span>{{questionGroupItem.hashtag}}</span>
<span>{{this.activeQuestionGroupService.activeQuestionGroup?.hashtag}}</span>
</p>
</div>
</div>
......@@ -23,11 +22,11 @@
<h5 class="text-center">{{'component.quiz_summary.validation_question_group' | translate}}</h5>
<p class="mb-0 d-flex align-self-center align-items-end h-100 text-bold text-center"
role="listitem">
<span *ngIf="questionGroupItem.isValid()"
<span *ngIf="this.activeQuestionGroupService.activeQuestionGroup?.isValid()"
class="text-success">
{{'component.quiz_summary.question_group_successful' | translate}}
</span>
<span *ngIf="!questionGroupItem.isValid()"
<span *ngIf="!this.activeQuestionGroupService.activeQuestionGroup?.isValid()"
class="text-danger">
{{'component.quiz_summary.question_group_failed' | translate}}
</span>
......@@ -48,16 +47,16 @@
</div>
</div>
<div *ngIf="questionGroupItem.sessionConfig.nicks.selectedNicks.length === 0 && isShowingMore"
<div *ngIf="this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.selectedNicks.length === 0 && isShowingMore"
class="col-6 col-md-12 mt-sm-2 mb-2 mb-sm-0">
<div class="element-wrapper bg-white px-2 py-2 mb-2 h-100">
<h5 class="text-center text-hyphen">{{'component.quiz_summary.isRestrictingRudeNicks' | translate}}</h5>
<p class="mb-0 text-center"
role="listitem">
<span *ngIf="questionGroupItem.sessionConfig.nicks.blockIllegalNicks">
<span *ngIf="this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.blockIllegalNicks">
{{'global.yes' | translate}}
</span>
<span *ngIf="!questionGroupItem.sessionConfig.nicks.blockIllegalNicks">
<span *ngIf="!this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.blockIllegalNicks">
{{'global.no' | translate}}
</span>
</p>
......@@ -72,10 +71,10 @@
<h5 class="text-center">{{'component.quiz_summary.isRestrictingToCAS' | translate}}</h5>
<p class="mb-0 text-center text-hyphen"
role="listitem">
<span *ngIf="questionGroupItem.sessionConfig.nicks.restrictToCasLogin">
<span *ngIf="this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.restrictToCasLogin">
{{'global.yes' | translate}}
</span>
<span *ngIf="!questionGroupItem.sessionConfig.nicks.restrictToCasLogin">
<span *ngIf="!this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.restrictToCasLogin">
{{'global.no' | translate}}
</span>
</p>
......@@ -83,26 +82,26 @@
</div>
<div *ngIf="isShowingMore"
[class.col-6]="questionGroupItem.sessionConfig.nicks.selectedNicks.length === 0"
[class.col-md-12]="questionGroupItem.sessionConfig.nicks.selectedNicks.length === 0"
[class.col-12]="questionGroupItem.sessionConfig.nicks.selectedNicks.length > 0"
[class.col-6]="this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.selectedNicks.length === 0"
[class.col-md-12]="this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.selectedNicks.length === 0"
[class.col-12]="this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.selectedNicks.length > 0"
class="mt-sm-2 mb-2 mb-sm-0 px-0">
<div class="element-wrapper bg-white px-2 py-2 mb-2 h-100">
<h5 class="text-center">{{'component.quiz_summary.selected_nicks' | translate}}</h5>
<p class="mb-0">
<span *ngIf="!questionGroupItem.sessionConfig.nicks.selectedNicks.length">
<span *ngIf="!this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.selectedNicks.length">
{{'component.quiz_summary.no_selected_nicks' | translate}}
</span>
<span *ngIf="questionGroupItem.sessionConfig.nicks.selectedNicks.length">
<span *ngIf="this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.selectedNicks.length">
{{'component.quiz_summary.selected_nicks' | translate}}&#58;&nbsp;
{{questionGroupItem.sessionConfig.nicks.selectedNicks.length}}
{{this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.selectedNicks.length}}
</span>
</p>
<p class="mb-0"
[innerHTML]="questionGroupItem.sessionConfig.nicks.selectedNicks.join(', ')">
[innerHTML]="this.activeQuestionGroupService.activeQuestionGroup?.sessionConfig.nicks.selectedNicks.join(', ')">
</p>
</div>
</div>
......
......@@ -2,6 +2,15 @@
#quizSummaryHeader {
@include media-breakpoint-down(sm) {
max-width: 540px;
margin: auto;
}
@include media-breakpoint-down(xs) {
width: 100%;
}
@include media-breakpoint-up(md) {
opacity: 0.95;
position: absolute;
......
import { DOCUMENT } from '@angular/common';
import { Component, HostListener, Inject } from '@angular/core';
import { IQuestionGroup } from 'arsnova-click-v2-types/src/questions/interfaces';
import { AbstractQuestionGroup } from 'arsnova-click-v2-types/src/questions/questiongroup_abstract';
import { questionGroupReflection } from 'arsnova-click-v2-types/src/questions/questionGroup_reflection';
import { ActiveQuestionGroupService } from '../../service/active-question-group/active-question-group.service';
import { TrackingService } from '../../service/tracking/tracking.service';
......@@ -29,15 +31,19 @@ export class AdditionalDataComponent {
private readonly _quizUrl: string;
constructor(
@Inject(DOCUMENT) readonly document,
private activeQuestionGroupService: ActiveQuestionGroupService,
private trackingService: TrackingService,
) {
this.questionGroupItem = activeQuestionGroupService.activeQuestionGroup;
if (this.questionGroupItem) {
this._quizUrl = encodeURI(`${document.location.origin}/quiz/${this.questionGroupItem.hashtag}`);
}
constructor(@Inject(DOCUMENT) readonly document, public activeQuestionGroupService: ActiveQuestionGroupService, private trackingService: TrackingService) {
this.activeQuestionGroupService.loadData().subscribe(questionGroup => {
if (!(
questionGroup instanceof AbstractQuestionGroup
)) {
questionGroup = questionGroupReflection[questionGroup.TYPE](questionGroup);
}
this.questionGroupItem = questionGroup;
if (this.questionGroupItem) {
this._quizUrl = encodeURI(`${document.location.origin}/quiz/${this.questionGroupItem.hashtag}`);
}
});
}
public switchShowMoreOrLess(): void {
......
<div id="mathjaxStyle"></div>
<div *ngIf="targetEnvironment === ENVIRONMENT_TYPE.ANSWEROPTIONS"
id="answer-option-preview"
[class]="'preview-frame overflow-auto relative ' + deviceClass()">
[class]="'preview-frame overflow-auto position-relative ' + deviceClass()">
<img src="/assets/images/phone_empty.png"
class="w-100 position-absolute"
draggable="false"/>
<div class="px-4 preview-content relative overflow-auto">
<div class="px-4 preview-content position-relative overflow-auto">
<app-header></app-header>
<ng-container *ngIf="connectionService.serverAvailable;else notAvailableTmpl">
......@@ -27,11 +27,11 @@
</div>
<div *ngIf="targetEnvironment === ENVIRONMENT_TYPE.QUESTION"
id="question-preview"
[class]="'preview-frame overflow-auto relative ' + deviceClass()">
[class]="'preview-frame overflow-auto position-relative ' + deviceClass()">
<img src="/assets/images/phone_empty.png"
class="w-100 position-absolute"
draggable="false"/>
<div class="px-4 preview-content relative overflow-auto">
<div class="px-4 preview-content position-relative overflow-auto">
<app-header></app-header>
<ng-container *ngIf="connectionService.serverAvailable;else notAvailableTmpl">
<p class="mb-0"
......
<div class="progress my-2 relative"
<div class="progress my-2 position-relative"
style="height: 2rem;">
<div *ngIf="base && percent"
class="progress-bar bg-info overflow-hidden"
......
<div [class]="('progress my-2 relative')"
<div [class]="('progress my-2 position-relative')"
style="height: 2rem;">
<div *ngIf="base && percent"
[class]="('progress-bar overflow-hidden progress-' + progressbarCssClass)"
......
<div [class]="('progress my-2 relative')"
<div [class]="('progress my-2 position-relative')"
style="height: 2rem;">
<div *ngIf="base && percent"
[class]="('progress-bar overflow-hidden progress-' + progressbarCssClass)"
......
<div [class]="('progress my-2 relative')"
<div [class]="('progress my-2 position-relative')"
style="height: 2rem;">
<div *ngIf="base && percent"
[class]="('progress-bar overflow-hidden progress-' + progressbarCssClass)"
......
<div [class]="('progress my-2 relative')"
<div [class]="('progress my-2 position-relative')"
style="height: 2rem;">
<div *ngIf="base && percent"
[class]="('progress-bar overflow-hidden progress-' + progressbarCssClass)"
......
<div class="progress my-2 relative"
<div class="progress my-2 position-relative"
style="height: 2rem;">
<div *ngIf="base && percent"
class="progress-bar overflow-hidden bg-secondary"
......
<div class="progress my-2 relative"
<div class="progress my-2 position-relative"
style="height: 2rem;">
<div *ngIf="base && percent"
class="progress-bar bg-info overflow-hidden"
......
......@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AdditionalDataComponent } from '../../footer/additional-data/additional-data.component';
import { FooterModule } from '../../footer/footer.module';
import { LivePreviewModule } from '../../live-preview/live-preview.module';
import { MarkdownModule } from '../../markdown/markdown.module';
......@@ -23,61 +22,42 @@ const quizManagerRoutes: Routes = [
path: '',
pathMatch: 'full',
redirectTo: 'overview',
},
{
path: '',
component: AdditionalDataComponent,
outlet: 'additionalData-xs',
},
{
path: '',
component: AdditionalDataComponent,
outlet: 'additionalData-md',
},
{
}, {
path: 'overview',
component: QuizManagerComponent,
data: {},
},
{
}, {
path: 'memberGroup',
component: MemberGroupManagerComponent,
data: {},
},
{
}, {
path: 'nicknames',
component: NicknameManagerComponent,
data: {},
},
{
}, {
path: 'sound',
component: SoundManagerComponent,
data: {},
},
{
}, {
path: ':questionIndex',
children: [
{
path: 'overview',
component: QuizManagerDetailsOverviewComponent,
data: {},
},
{
}, {
path: 'questionText',
component: QuestiontextComponent,
data: {},
},
{
}, {
path: 'answeroptions',
component: AnsweroptionsComponent,
data: {},
},
{
}, {
path: 'countdown',
component: CountdownComponent,
data: {},
},
{
}, {
path: 'questionType',
component: QuestiontypeComponent,
data: {},
......@@ -88,19 +68,10 @@ const quizManagerRoutes: Routes = [
@NgModule({
imports: [
FooterModule,
FormsModule,
SharedModule,
QuizManagerDetailsModule,
MarkdownModule,
LivePreviewModule,
RouterModule.forChild(quizManagerRoutes),
FooterModule, FormsModule, SharedModule, QuizManagerDetailsModule, MarkdownModule, LivePreviewModule, RouterModule.forChild(quizManagerRoutes),
],
declarations: [
QuizManagerComponent,
NicknameManagerComponent,
SoundManagerComponent,
MemberGroupManagerComponent,
QuizManagerComponent, NicknameManagerComponent, SoundManagerComponent, MemberGroupManagerComponent,
],
})
export class QuizManagerModule {
......
<div class="row"
id="quizManager">
<div class="d-block d-md-none col-12">
<app-additional-data></app-additional-data>
</div>
<div class="col-12 col-lg-6">
<h2 class="text-light mt-4 mt-lg-0"
<h2 class="text-light mt-4 mt-md-0"
[innerHTML]="'component.quiz_manager.available_questions_title' | translate"></h2>
<div class="overflow-auto available-questions-view-frame">
......@@ -25,12 +22,12 @@
<div class="col-12 col-lg-6">
<h2 class="text-light mt-4 mt-lg-0">{{'component.quiz_manager.added_questions_title' | translate}}</h2>
<h4 class="text-light"
*ngIf="!questionGroupItem.questionList.length">{{'component.quiz_manager.no_added_questions' | translate}}</h4>
*ngIf="!this.activeQuestionGroupService.activeQuestionGroup?.questionList.length">{{'component.quiz_manager.no_added_questions' | translate}}</h4>
<div class="row">
<div class="col-12">
<ul id="added_questions_wrapper"
[attr.data-intro]="'component.quiz_manager.description.added_questions' | translate">
<li *ngFor="let elem of questionGroupItem.questionList; let i = index;"
<li *ngFor="let elem of this.activeQuestionGroupService.activeQuestionGroup?.questionList; let i = index;"
[id]="i + '_draggable'"
[class]="'questionElementWrapper d-flex justify-content-center align-items-center px-2 py-2 mb-2 rounded questionType_' + i">
<span [innerHTML]="elem.translationReferrer() | translate"></span>
......@@ -46,7 +43,7 @@
<i class="fas fa-arrow-up"></i>
</span>
<span class="pointer mr-2"
*ngIf="i !== questionGroupItem.questionList.length - 1"
*ngIf="i !== this.activeQuestionGroupService.activeQuestionGroup?.questionList.length - 1"
(click)="moveQuestionDown(i)">
<i class="fas fa-arrow-down"></i>
</span>
......
......@@ -4,6 +4,8 @@ import { TranslateService } from '@ngx-translate/core';
import { DefaultAnswerOption } from 'arsnova-click-v2-types/src/answeroptions/answeroption_default';
import { IQuestion, IQuestionGroup } from 'arsnova-click-v2-types/src/questions/interfaces';
import { questionReflection } from 'arsnova-click-v2-types/src/questions/question_reflection';
import { AbstractQuestionGroup } from 'arsnova-click-v2-types/src/questions/questiongroup_abstract';
import { questionGroupReflection } from 'arsnova-click-v2-types/src/questions/questionGroup_reflection';
import { availableQuestionTypes, IAvailableQuestionType } from '../../../../lib/available-question-types';
import { DefaultSettings } from '../../../../lib/default.settings';
import { FooterbarElement } from '../../../../lib/footerbar-element/footerbar-element';
......@@ -36,7 +38,7 @@ export class QuizManagerComponent implements OnDestroy {
private router: Router,
private currentQuizService: CurrentQuizService,
private translateService: TranslateService,
private activeQuestionGroupService: ActiveQuestionGroupService,
public activeQuestionGroupService: ActiveQuestionGroupService,
private trackingService: TrackingService,
private lobbyApiService: LobbyApiService,
) {
......@@ -52,10 +54,17 @@ export class QuizManagerComponent implements OnDestroy {
this.footerBarService.footerElemMemberGroup,
this.footerBarService.footerElemSound,
]);
this.activeQuestionGroupService.loadData();
this.questionGroupItem = activeQuestionGroupService.activeQuestionGroup;
this.footerBarService.footerElemStartQuiz.isActive = activeQuestionGroupService.activeQuestionGroup.isValid();
this.activeQuestionGroupService.loadData().subscribe(questionGroup => {
if (!(
questionGroup instanceof AbstractQuestionGroup
)) {
questionGroup = questionGroupReflection[questionGroup.TYPE](questionGroup);
}
this.questionGroupItem = questionGroup;
this.footerBarService.footerElemStartQuiz.isActive = questionGroup.isValid();
});
this.footerBarService.footerElemStartQuiz.onClickCallback = async (self: FooterbarElement) => {
if (!self.isActive) {
......
......@@ -3,21 +3,19 @@
<app-header></app-header>
</div>
<div class="container-fluid">
<div class="row flex-sm-nowrap h-100">
<div class="footer-bar-wrapper flex-grow-0 flex-shrink-0 p-0 relative">
<div class="container-fluid d-flex flex-column flex-sm-row flex-sm-wrap position-relative p-0">
<div class="row flex-sm-nowrap mx-0 mx-md-0"
[class.mx-sm-auto]="isInQuizManager">
<div class="footer-bar-wrapper flex-grow-0 flex-shrink-0 p-0 w-100">
<app-footer-bar [footerElementEmitter]="getFooterBarElements()"></app-footer-bar>
<div class="d-none d-md-block">
<router-outlet name="additionalData-md"
class="d-none d-md-block"></router-outlet>
</div>
<app-additional-data *ngIf="isInQuizManager"></app-additional-data>
</div>
<main id="content-container"
class="container">
<router-outlet></router-outlet>
</main>
</div>
<main id="content-container"
class="container">
<router-outlet></router-outlet>
</main>
</div>
</div>
......
......@@ -11,14 +11,17 @@
.container {
&#content-container {
@include media-breakpoint-down(xs) {
top: calc(10vh + 50px);
position: absolute;
z-index: 1040;
}
@include media-breakpoint-up(sm) {
height: 90vh;
top: 20vh;
}
@include media-breakpoint-up(md) {
height: 90vh;
}
@include media-breakpoint-only(sm) {
height: 70vh;
}
@include media-breakpoint-only(md) {
max-width: calc(#{map_get($container-max-widths, md)} - 20vw);
}
......@@ -35,7 +38,6 @@
.footer-bar-wrapper {
@include media-breakpoint-only(xs) {
width: 100%;
height: 50px;
}
}
......
......@@ -37,6 +37,8 @@ declare interface IServerTarget {
})
export class RootComponent implements OnInit, AfterViewInit {
public static TYPE = 'RootComponent';
public isInQuizManager = false;
private _isLoading = true;
get isLoading(): boolean {
......@@ -71,6 +73,8 @@ export class RootComponent implements OnInit, AfterViewInit {
} else if (event instanceof RouteConfigLoadEnd) {
this._isLoading = false;
}
this.isInQuizManager = this.router.isActive('/quiz/manager/overview', true);
});
}
......
......@@ -84,10 +84,6 @@ p {
overflow: auto;
}
.relative {
position: relative;
}
button:disabled {
cursor: not-allowed !important;
}
......@@ -97,15 +93,6 @@ img[alt*="emoji_"] {
width: 24px;
}
#header {
}
#content {
}
#footer {
}
@mixin placeholder-align-center {
text-align: center;
padding: 1.5rem 0;
......
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