Refactors the styling to use bootstrap themes

parent 149e686f
Pipeline #23922 failed with stages
in 33 minutes and 23 seconds
......@@ -21,6 +21,7 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"extractCss": true,
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
......@@ -30,16 +31,64 @@
"src/assets/fonts",
"src/assets/i18n",
"src/assets/images",
"src/assets/styles",
"src/assets/jobs",
"src/assets/static",
"src/assets/serverEndpoint.json",
"src/assets/imageDerivates.json",
"src/assets/themeData.json"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles/themes"
]
},
"styles": [
"src/loader.scss",
"src/styles.scss"
"src/styles/styles.scss",
{
"input": "src/styles/themes/theme-arsnova-dot-click-contrast.scss",
"bundleName": "theme-arsnova-dot-click-contrast",
"lazy": true
},
{
"input": "src/styles/themes/theme-blackbeauty.scss",
"bundleName": "theme-blackbeauty",
"lazy": true
},
{
"input": "src/styles/themes/theme-elegant.scss",
"bundleName": "theme-elegant",
"lazy": true
},
{
"input": "src/styles/themes/theme-Material.scss",
"bundleName": "theme-Material",
"lazy": true
},
{
"input": "src/styles/themes/theme-Material-hope.scss",
"bundleName": "theme-Material-hope",
"lazy": true
},
{
"input": "src/styles/themes/theme-decent-blue.scss",
"bundleName": "theme-decent-blue",
"lazy": true
},
{
"input": "src/styles/themes/theme-Material-blue.scss",
"bundleName": "theme-Material-blue",
"lazy": true
},
{
"input": "src/styles/themes/theme-spiritual-purple.scss",
"bundleName": "theme-spiritual-purple",
"lazy": true
},
{
"input": "src/styles/themes/theme-GreyBlue-Lime.scss",
"bundleName": "theme-GreyBlue-Lime",
"lazy": true
}
],
"scripts": []
},
......@@ -52,7 +101,8 @@
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"vendorChunk": true,
"commonChunk": true,
"buildOptimizer": true,
"serviceWorker": true,
"ngswConfigPath": "src/ngsw-config.json",
......
......@@ -37,7 +37,7 @@ export class FrontendPage {
}
public getAvailableQuizzesDialogCloseButton(): ElementFinder {
return element(by.css('.close.pointer'));
return element(by.css('.close.cursor-pointer'));
}
public clearLocalStorage(): void {
......
......@@ -12,11 +12,10 @@
"ng": "ng",
"start:SSR": "cd dist && node server",
"start:DEV": "ng serve --host 0.0.0.0 --port 4210 --disable-host-check --aot",
"build:DEV": "ng serve --host 0.0.0.0 --port 4210 --disable-host-check --aot --prod",
"ngsw:version": "ngsw-config dist/browser src/ngsw-config.json",
"build:SSR": "npm run build:PROD && npm run purify && npm run build:SERVER && npm run webpack:SERVER && npm run ngsw:version",
"build:SSR": "npm run build:PROD:DEPLOY && npm run build:SERVER && npm run webpack:SERVER",
"build:SERVER": "ng run frontend:server",
"build:PROD": "ng build --prod",
"build:PROD:DEPLOY": "npm run build:PROD && npm run purify && npm run compress",
"build:PROD-STATS": "ng build --prod --stats-json",
"bundle-report": "webpack-bundle-analyzer dist/browser/stats.json",
"webpack:SERVER": "webpack --config webpack.server.config.js --progress --colors",
......@@ -26,9 +25,9 @@
"lint": "ng lint",
"e2e": "ng e2e --port 4201",
"purify": "node purifycss.js",
"compress": "gzip dist/browser/** -r",
"compress": "gzip dist/browser/** -r --best --keep",
"http-startup": "http-server dist/browser/ -p 4711 -g",
"prod-test": "npm run build:PROD && npm run purify && npm run http-startup",
"prod-test": "npm run build:PROD:DEPLOY && npm run http-startup",
"prod-test:SSR": "npm run build:SSR && npm run job && npm run start:SSR",
"job": "npm run job:images; npm run job:link; npm run job:manifest",
"job:images:logo": "cd dist/browser/assets/jobs/; node --experimental-modules GenerateImages.mjs --command=generateLogoImages",
......@@ -54,7 +53,7 @@
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.12",
"@fortawesome/free-solid-svg-icons": "^5.6.3",
"@ng-bootstrap/ng-bootstrap": "^4.0.1",
"@ng-bootstrap/ng-bootstrap": "^4.1.0",
"@ng-bootstrap/schematics": "^2.0.0-alpha.1",
"@ng-toolkit/pwa": "^1.1.51",
"@nguniversal/express-engine": "^7.1.0",
......@@ -63,7 +62,7 @@
"@ngx-translate/http-loader": "~4.0.0",
"@techiediaries/ngx-qrcode": "0.0.5",
"angulartics2": "^7.4.1",
"bootstrap": "^4.2.1",
"bootstrap": "^4.3.1",
"classlist.js": "^1.1.20150312",
"cors": "^2.8.5",
"highlight.js": "^9.13.1",
......
<div class="card mx-sm-auto mx-5 my-3 w-100 cursor-pointer"
<div class="card mx-sm-auto mx-5 my-3 w-100 cursor-pointer text-dark"
[routerLink]="['/admin', 'quiz']">
<div class="card-body">
<p class="card-text">Quiz Admin</p>
......@@ -6,7 +6,7 @@
</div>
</div>
<div class="card mx-sm-auto mx-5 my-3 w-100 cursor-pointer"
<div class="card mx-sm-auto mx-5 my-3 w-100 cursor-pointer text-dark"
[routerLink]="['/admin', 'user']">
<div class="card-body">
<p class="card-text">User Admin</p>
......
<a *ngFor="let quiz of quizzes; let i = index"
[routerLink]="['/admin', 'quiz', quiz.id]"
class="card mx-sm-auto mx-5 my-3 cursor-pointer text-dark nav-link p-0">
class="card mx-sm-auto mx-5 my-3 cursor-pointer text-dark nav-link p-0 text-dark">
<div class="card-body">
<div class="d-flex">
<p class="card-text">
......
<div class="text-light">
<div>
<p class="card-text">Questions:</p>
<ul>
<li *ngFor="let question of quiz?.questionList">
......
<button class="btn btn-info"
<button class="btn btn-light"
(click)="showAddUserModal()">
Add User
</button>
<div *ngFor="let user of data; let i = index"
class="card mx-sm-auto mx-5 my-3 w-100">
class="card mx-sm-auto mx-5 my-3 w-100 text-dark">
<div class="card-body">
<div class="d-flex justify-content-end">
<fa-icon *ngIf="!isDeletingElem(i)"
......
......@@ -4,7 +4,7 @@
<div class="row no-gutters">
<div class="col-6 col-md-12 mt-sm-2 mb-2 mb-sm-0">
<div class="element-wrapper d-flex flex-column bg-white px-2 py-2 mb-2 h-100"
<div class="element-wrapper d-flex flex-column bg-white text-dark px-2 py-2 mb-2 h-100"
[attr.data-intro]="'component.quiz_summary.description.header' | translate"
[attr.aria-label]="'component.quiz_summary.description.header' | translate">
<h5 class="text-center">{{'component.quiz_summary.quiz_name' | translate}}</h5>
......@@ -16,7 +16,7 @@
</div>
<div class="col-6 col-md-12 mt-sm-2 mb-2 mb-sm-0">
<div class="element-wrapper d-flex flex-column bg-white px-2 py-2 mb-2 h-100"
<div class="element-wrapper d-flex flex-column bg-white text-dark px-2 py-2 mb-2 h-100"
[attr.data-intro]="'component.quiz_summary.description.question_group_validation' | translate"
[attr.aria-label]="'component.quiz_summary.description.question_group_validation' | translate">
<h5 class="text-center">{{'component.quiz_summary.validation_question_group' | translate}}</h5>
......@@ -36,7 +36,7 @@
<div *ngIf="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"
<div class="element-wrapper bg-white text-dark px-2 py-2 mb-2 h-100"
[attr.data-intro]="'component.quiz_summary.description.session_url' | translate"
[attr.aria-label]="'component.quiz_summary.description.session_url' | translate">
<h5 class="text-center">{{'component.quiz_summary.quiz_url' | translate}}</h5>
......@@ -49,8 +49,8 @@
<div *ngIf="this.quizService.quiz?.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>
<div class="element-wrapper bg-white text-dark px-2 py-2 mb-2 h-100">
<h5 class="text-center text-hyphenate">{{'component.quiz_summary.isRestrictingRudeNicks' | translate}}</h5>
<p class="mb-0 text-center"
role="listitem">
<span *ngIf="this.quizService.quiz?.sessionConfig.nicks.blockIllegalNicks">
......@@ -65,11 +65,11 @@
<div *ngIf="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"
<div class="element-wrapper bg-white text-dark px-2 py-2 mb-2 h-100"
[attr.data-intro]="'component.quiz_summary.description.restrict_to_cas' | translate"
[attr.aria-label]="'component.quiz_summary.description.restrict_to_cas' | translate">
<h5 class="text-center">{{'component.quiz_summary.isRestrictingToCAS' | translate}}</h5>
<p class="mb-0 text-center text-hyphen"
<p class="mb-0 text-center text-hyphenate"
role="listitem">
<span *ngIf="this.quizService.quiz?.sessionConfig.nicks.restrictToCasLogin">
{{'global.yes' | translate}}
......@@ -86,7 +86,7 @@
[class.col-md-12]="this.quizService.quiz?.sessionConfig.nicks.selectedNicks.length === 0"
[class.col-12]="this.quizService.quiz?.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">
<div class="element-wrapper bg-white text-dark px-2 py-2 mb-2 h-100">
<h5 class="text-center">{{'component.quiz_summary.selected_nicks' | translate}}</h5>
<p class="mb-0">
......
@import "../../../assets/styles/vendor";
@import "prebuild";
#quizSummaryHeader {
......
......@@ -9,9 +9,9 @@
accept="application/json"
multiple="multiple"/>
<div *ngFor="let elem of footerBarService.footerElements"
class="footerElement px-2 px-sm-1 py-sm-2 pointer d-flex align-items-center justify-content-center justify-content-sm-start"
[class.success]="elem.selectable && elem.isActive"
[class.error]="elem.selectable && !elem.isActive"
class="footerElement px-2 px-sm-1 py-sm-2 cursor-pointer d-flex align-items-center justify-content-center justify-content-sm-start"
[class.text-success]="elem.selectable && elem.isActive"
[class.text-danger]="elem.selectable && !elem.isActive"
[id]="elem.id"
[routerLink]="getLinkTarget(elem)"
[queryParams]="getQueryParams(elem)"
......
@import "../../../assets/styles/vendor";
@import "prebuild";
@mixin showFooterElements() {
opacity: 0.95;
......
<nav class="navbar navbar-header flex-nowrap"
id="header">
<div class="arsnova-logo d-flex align-items-center pointer">
<div class="arsnova-logo d-flex align-items-centercursor-pointer">
<a [routerLink]="['/']">
<ng-container [ngTemplateOutlet]="arsnovaclicklogo"></ng-container>
</a>
......@@ -13,7 +13,7 @@
[innerHTML]="headerLabelService.headerLabel | translate"></div>
</div>
</div>
<div class="text-right d-flex align-items-center pointer"
<div class="text-right d-flex align-items-centercursor-pointer"
id="connectionQualityHeader"
role="dialog">
<svg id="connectionQualityImage"
......@@ -46,7 +46,7 @@
id="exampleModalLabel"
[innerHTML]="'region.header.connection_status.title' | translate"></h5>
<button type="button"
class="close pointer"
class="closecursor-pointer"
data-dismiss="modal"
aria-label="Close"
(click)="d()">
......@@ -99,7 +99,7 @@
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary pointer"
class="btn btn-light"
data-dismiss="modal"
(click)="d()"
[innerHTML]="'global.close_window' | translate"></button>
......@@ -107,7 +107,7 @@
</ng-template>
<ng-template #arsnovaclicklogo>
<svg version="1.1" id="arsnova-logo-image" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1024 1024" xml:space="preserve">
<svg version="1.1" id="logo-image" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1024 1024" xml:space="preserve">
<g id="text">
<text transform="translate(512 200)" class="arsnova-logo-origin">{{origin}}</text>
<text [attr.transform]="'matrix(1 0 0 1 69 ' + (origin.length > 0 ? '500' : '400') + ')'" class="arsnova-logo-ars">ars</text>
......
......@@ -6,7 +6,7 @@
#connectionQualityHeader {
padding: 0;
}
#arsnova-logo-image {
#logo-image {
enable-background: new 0 0 1024 1024;
width: 50px;
.arsnova-logo-origin {
......
<div class="row d-flex flex-wrap mb-md-2 text-light">
<div class="row d-flex flex-wrap mb-md-2">
<div class="d-flex col-12 col-md mb-3 mb-md-0 text-nowrap">
<span class="d-inline-flex mx-md-2 align-items-center">Current Project:</span>
<select class="border-0 bg-transparent text-light"
<select class="border-0 bg-transparent text-secondary"
(change)="setProject($event.target.value)">
<option [value]="projectLoaderService.projects.Frontend">Frontend
</option>
......@@ -31,12 +31,12 @@
<div class="col-12 col-md mb-3 mb-md-0">
<div *ngIf="this.projectLoaderService.connected"
class="btn-group ml-md-auto">
<button class="btn btn-secondary pointer"
<button class="btn btn-secondary"
[disabled]="!this.languageLoaderService.changedData"
[title]="!this.userService.staticLoginTokenContent.gitlabToken ? 'No gitlab token set' : ''"
(click)="updateData()"><span>Save Changes</span>
</button>
<button class="btn btn-secondary pointer"
<button class="btn btn-secondary"
(click)="modalOrganizerService.addKey()">
<span>Add Key</span>
</button>
......@@ -45,9 +45,9 @@
</div>
<div *ngIf="this.projectLoaderService.connected;else loading"
class="row mh-100 text-light">
class="row mh-100">
<div class="d-flex sticky-top col-12 mb-2">
<div class="bg-white d-flex w-100 py-1">
<div class="bg-secondary d-flex w-100 py-1">
<select class="border-0 bg-transparent mr-2"
(change)="changeFilter($event.target.value)">
<option [value]="filters.None"
......@@ -105,5 +105,5 @@
</div>
</div>
<ng-template #unauthorized><h4 class="text-danger text-center mt-5 bg-white d-flex justify-content-center py-3 mx-auto rounded">Not authorized to view this project</h4></ng-template>
<ng-template #loading><h4 class="text-light text-center mt-5">Loading...</h4></ng-template>
<ng-template #unauthorized><h4 class="text-danger text-center mt-5 bg-secondary d-flex justify-content-center py-3 mx-auto rounded">Not authorized to view this project</h4></ng-template>
<ng-template #loading><h4 class="text-center mt-5">Loading...</h4></ng-template>
......@@ -8,7 +8,7 @@
style="height: calc(100vh - 200px);">
<div *ngFor="let elem of (languageLoaderService.parsedLangData | unusedKeyFilter:unusedKeyFilter | filterKeys:filter | searchFilter:searchFilter | sort) | justafew:scrollPos"
class="px-2 py-2 pointer d-flex"
class="px-2 py-2 cursor-pointer d-flex"
[class.bg-warning]="selectedKey === elem.key"
(click)="selectKey(elem.key)">
<fa-icon *ngIf="hasEmptyKeys(elem)"
......@@ -17,7 +17,7 @@
<span class="text-truncate"
[title]="elem.key">{{elem.key}}</span>
<fa-icon *ngIf="selectedKey === elem.key"
class="ml-auto pointer"
class="ml-auto cursor-pointer"
(click)="removeKey(elem.key)"
[icon]="'trash'"></fa-icon>
</div>
......
......@@ -12,7 +12,7 @@
<div id="answer-option-element-wrapper"
class="d-flex justify-content-around align-items-center flex-wrap">
<div *ngFor="let elem of dataSource; let i = index"
class="answer-option-element d-flex justify-content-center align-items-center rounded m-2 pointer"
class="answer-option-element d-flex justify-content-center align-items-center rounded m-2 cursor-pointer"
[style.flex-basis]="question.showOneAnswerPerRow ? '100%' : getComputedWidth()">
<p *ngIf="question.displayAnswerText"
class="mb-0 markdown-answer"
......@@ -41,7 +41,7 @@
<ng-template #notAvailableTmpl>
<h3 class="text-light text-center d-flex align-items-center server-not-available-label mb-0">
<h3 class="text-center d-flex align-items-center server-not-available-label mb-0">
{{'plugins.splashscreen.error.error_messages.no_preview_available' | translate}}
</h3>
</ng-template>
\ No newline at end of file
@import "../../../assets/styles/vendor";
@import "../../../styles/vendor";
.preview-frame {
......
<div id="markdownBarDiv"
class="markdown-box">
<ul>
<div class="">
<ul class="list-unstyled m-0 p-0 d-flex flex-wrap overflow-hidden btn-group">
<li *ngFor="let elem of allDisplayedMarkdownBarElements"
[id]="elem.id"
class="button-markdown button-purple"
class="btn btn-warning cursor-pointer"
data-toggle="tooltip"
data-placement="bottom"
[title]="elem.titleRef | translate"
......
......@@ -9,29 +9,19 @@
font-style: normal;
}
#markdownBarDiv {
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden;
li {
flex: 1 0 calc(100% / 7);
text-align: center;
cursor: pointer;
&:hover {
opacity: 0.8;
}
&:active {
opacity: 0.5;
}
ul {
li {
flex: 1 0 calc(100% / 7);
&:hover {
opacity: 0.8;
}
&:active {
opacity: 0.5;
}
}
.latexIcon::before {
content: "\TeX";
font-family: "arsnova", serif;
}
}
.latexIcon::before {
content: "\TeX";
font-family: "arsnova", serif;
}
\ No newline at end of file
import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { QuestiontextComponent } from '../../quiz/quiz-manager/quiz-manager-details/questiontext/questiontext.component';
import { QuestiontextComponent } from '../../quiz/quiz-manager/details/questiontext/questiontext.component';
import { TrackingService } from '../../service/tracking/tracking.service';
class MarkdownBarElement {
......
......@@ -75,7 +75,7 @@
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-outline-dark"
class="btn btn-light"
[disabled]="isSubmitting"
(click)="save()">
<span *ngIf="!isSubmitting">Save</span>
......
<div class="available-quizzes-modal">
<div class="modal-header">
<h5 class="modal-title"
[innerHTML]="'component.name_management.quiz_management' | translate"></h5>
<button type="button"
class="close pointer"
<h5 class="modal-title">{{'component.name_management.quiz_management' | translate}}</h5>
<button class="close cursor-pointer"
data-dismiss="modal"
aria-label="Close"
(click)="dismiss()">
......@@ -12,18 +10,18 @@
</div>
<div class="modal-body">
<div class="d-flex flex-wrap flex-column flex-sm-row justify-content-between justify-content-sm-start">
<span *ngFor="let elem of sessions"
class="text-light text-nowrap d-inline mr-sm-2 my-1 px-4 py-2 rounded pointer available-quiz"
[class.bg-success]="elem.isValid()"
[class.bg-danger]="!elem.isValid()"
(click)="elem.isValid() ? startQuiz(elem) : editQuiz(elem)">
<button *ngFor="let elem of sessions"
class="btn text-nowrap d-inline mr-sm-2 my-1 px-4 py-2 available-quiz"
[class.btn-outline-success]="elem.isValid()"
[class.btn-outline-danger]="!elem.isValid()"
(click)="elem.isValid() ? startQuiz(elem) : editQuiz(elem)">
{{elem.name}}
</span>
</button>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary pointer"
class="btn btn-light"
data-dismiss="modal"
(click)="abort()">{{'global.close_window' | translate}}
</button>
......
......@@ -50,7 +50,7 @@
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-outline-dark"
class="btn btn-light"
[disabled]="isSubmitting"
(click)="save()">
<span *ngIf="!isSubmitting">{{'component.quiz-save.save' | translate}}</span>
......
......@@ -5,7 +5,7 @@
<p>{{'component.server-unavailable-modal.connection-dropped' | translate}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-outline-secondary"
<button class="btn btn-light"
(click)="reloadPage()">{{'component.server-unavailable-modal.reload-page' | translate}}
</button>
</div>
\ No newline at end of file
<h2 class="mb-5 text-light">{{'component.voting.confidence_level.title' | translate}}</h2>
<h2 class="mb-5">{{'component.voting.confidence_level.title' | translate}}</h2>
<div class="row">
<div class="col-12">
......@@ -16,7 +16,7 @@
<div class="col-12">
<button type="button"
(click)="sendConfidence()"
class="btn btn-default mt-5 w-100 pointer">
class="btn btn-info btn-block mt-5">
<fa-icon [icon]="'paper-plane'"></fa-icon>
<span *ngIf="confidenceValue">{{"component.voting.send" | translate}}</span>
<span *ngIf="!confidenceValue">{{"component.voting.abstention" | translate}}</span>
......
<div class="row">
<h4 *ngIf="!leaderBoardCorrect.length"
class="col-12 mt-5 text-center text-light">
class="col-12 mt-5 text-center">
<span>{{'component.leaderboard.no_attendee_correct' | translate}}</span>
</h4>
<h4 *ngIf="leaderBoardCorrect.length"
class="col-12 text-light">
class="col-12">
<span *ngIf="isGlobalRanking">
{{'component.leaderboard.title.all_questions' | translate }}
</span>
......
......@@ -2,15 +2,15 @@
<ng-container *ngIf="attendeeService.getMemberGroups()?.length === 1; else attendeesByGroup">
<ng-container *ngIf="!attendeeService.attendees.length">
<div class="col-12">
<h3 class="text-center text-light center-top d-flex align-self-center justify-content-center">{{'component.lobby.waiting_for_players' | translate}}</h3>
<h3 class="text-center center-top d-flex align-self-center justify-content-center">{{'component.lobby.waiting_for_players' | translate}}</h3>
</div>
</ng-container>
<div *ngFor="let elem of attendeeService.attendees"
class="my-1 col-sm-4 col-md-3">
<div [id]="elem.id"
(click)="openKickMemberModal(removeMemberModal, elem.name)"
class="member-wrapper h-100 d-flex align-items-center justify-content-center"
[class.pointer]="quizService.isOwner"
class="member-wrapper rounded h-100 d-flex align-items-center justify-content-center"
[class.cursor-pointer]="quizService.isOwner"
[class.own-nick]="attendeeService.isOwnNick(elem.name)"
[style.color]="'#' + sanitizeHTML(transformForegroundColor(hexToRgb(elem.colorCode)))"
[style.background-color]="'#' + sanitizeHTML(elem.colorCode)">
......@@ -42,22 +42,22 @@
<div class="col-12 col-sm-6"
*ngFor="let group of attendeeService.getMemberGroups()">
<div class="pb-4">
<h4 class="text-light">Team {{group}}</h4>
<h4>Team {{group}}</h4>
<ng-container *ngIf="!attendeeService.getMembersOfGroup(group).length">
<span class="text-light attendee-text">{{'component.lobby.waiting_for_players' | translate}}</span>
<span class="attendee-text">{{'component.lobby.waiting_for_players' | translate}}</span>
</ng-container>
<div *ngFor="let elem of attendeeService.getMembersOfGroup(group)"
(click)="openKickMemberModal(removeMemberModal, elem.name)"
[class.pointer]="quizService.isOwner"
[class.cursor-pointer]="quizService.isOwner"
class="d-inline-flex mw-100 mr-3">
<fa-icon [icon]="'users'"
[id]="elem.id"
class="member-wrapper px-1 py-1 fa-2x"
class="member-wrapper rounded px-1 py-1 fa-2x"
[class.own-nick]="attendeeService.isOwnNick(elem.name)"
[style.background-color]="'#' + sanitizeHTML(transformForegroundColor(hexToRgb(elem.colorCode)))"
[style.color]="'#' + sanitizeHTML(elem.colorCode)">>
</fa-icon>
<p class="ml-2 attendee-text text-light text-truncate mb-0 align-self-center"
<p class="ml-2 attendee-text text-truncate mb-0 align-self-center"
[innerHTML]="parseNickname(elem.name)"></p>
</div>
</div>
......@@ -69,7 +69,7 @@
let-d="dismiss">
<div class="modal-header">
<button type="button"
class="close pointer"
class="close cursor-pointer"
data-dismiss="modal"
aria-label="Close"
(click)="d()">
......@@ -85,13 +85,13 @@
<div class="modal-footer">
<button type="button"
class="btn btn-danger pointer mr-auto"
class="btn btn-danger mr-auto"