diff --git a/src/app/modules/community/list-quiz/list-quiz.component.css b/src/app/modules/community/list-quiz/list-quiz.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a2c2379b9c2bc6ea37631cf841180456d9d445ed 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.css
+++ b/src/app/modules/community/list-quiz/list-quiz.component.css
@@ -0,0 +1,43 @@
+.containerGlobal {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+
+}
+
+.containerLeft {
+ height: 100%;
+ width: 50%;
+}
+
+.containerRight {
+ height: 100%;
+ width: 50%;
+ background-image: url(../../../../../public/BackgroundSubScreen.png);
+ background-repeat: no-repeat;
+ background-size: cover;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 2vmin;
+ padding-left: 75px;
+}
+
+.list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 3;
+ overflow-y: auto;
+ overflow-x: hidden;
+ flex-wrap: nowrap;
+ /* scrollbar-color: rebeccapurple gray; */
+ --sb-track-color: #f3f3f3;
+ --sb-thumb-color: #ffffff;
+ --sb-size: 14px;
+
+ padding-top: 1%;
+ padding-bottom: 1%;
+}
\ No newline at end of file
diff --git a/src/app/modules/community/list-quiz/list-quiz.component.html b/src/app/modules/community/list-quiz/list-quiz.component.html
index 02719b8f6d16cd4d9f2b1a1e8b46fe3f6db7c4a7..b9cd6c01e3f18075c2652bc13b84436950f85f80 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.html
+++ b/src/app/modules/community/list-quiz/list-quiz.component.html
@@ -1,19 +1,39 @@
-<div class="list-quiz">
- <input (keyup)="filter()" [(ngModel)]="filterText" matInput type="text" placeholder="Search a quiz" />
- <table mat-table [dataSource]="listQuizDataSource">
- <ng-container matColumnDef="Component">
- <td mat-cell *matCellDef="let quiz" (click)="clickOnQuiz(quiz.id)">
+<div class="question-marks">
+ <div class="containerGlobal">
+ <div class="containerLeft">
+ <h1>Community quiz</h1>
+ <input (keyup)="filter()" [(ngModel)]="filterText" type="text" placeholder="Search a quiz" class="inputRecherche" />
+ <div class="list">
+ <div class="scrollable-list" *ngFor="let quiz of quizzes">
+ <app-quiz-list-detail
+ [title]="quiz.id"
+ [nbQuestions]="quiz.questions.length"
+ [difficulty]="quiz.difficulty.name"
+ [creator]="quiz.author ?? 'Anonymous'"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="containerRight">
+ <div class="quiz-detail"><app-quiz-detail [codeQuiz]="clickedQuiz"></app-quiz-detail></div>
+ </div>
+ </div>
+</div>
+<!--
+ <div class="component">
+ <div class="scrollable-list"ngFor="let quiz of quizzes"
<app-quiz-list-detail
[title]="quiz.id"
[nbQuestions]="quiz.questions.length"
[difficulty]="quiz.difficulty.name"
[creator]="quiz.author ?? 'Anonymous'"
></app-quiz-list-detail>
- </td>
- </ng-container>
- <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
- </table>
- <mat-paginator
+ </div>
+ </div>
+ <!--<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>-->
+
+
+ <!-- <mat-paginator
(page)="onPageChange($event)"
[pageSize]="take"
[pageIndex]="skip"
@@ -22,4 +42,4 @@
>
</mat-paginator>
</div>
-<div class="quiz-detail"><app-quiz-detail [codeQuiz]="clickedQuiz"></app-quiz-detail></div>
+<div class="quiz-detail"><app-quiz-detail [codeQuiz]="clickedQuiz"></app-quiz-detail></div> -->
\ No newline at end of file
diff --git a/src/app/modules/community/list-quiz/list-quiz.component.ts b/src/app/modules/community/list-quiz/list-quiz.component.ts
index 5cf284d57c08ede65aa5c2ddd1a98a2d2833c129..23135168b37b5edc4bb3d2931e330f9afbc82e3e 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.ts
+++ b/src/app/modules/community/list-quiz/list-quiz.component.ts
@@ -7,11 +7,13 @@ import { filter } from 'rxjs';
@Component({
selector: 'app-list-quiz',
templateUrl: './list-quiz.component.html',
- styleUrl: './list-quiz.component.css',
+ styleUrls: ['./list-quiz.component.css','../../../../styles.css'],
})
+
export class ListQuizComponent implements OnInit {
- listQuizDataSource = new MatTableDataSource();
- displayedColumns = ['Component'];
+ //listQuizDataSource = new MatTableDataSource();
+ quizzes: any[] = []
+ //displayedColumns = ['Component'];
constructor(private communityService: CommunityService) {}
codeQuiz: string = '';
skip: number = 0;
@@ -31,7 +33,8 @@ export class ListQuizComponent implements OnInit {
this.communityService.getCommunityQuiz(this.skip, this.take, this.filterText).subscribe({
next: (data: any) => {
console.log('data: ', data);
- this.listQuizDataSource.data = data;
+ //this.listQuizDataSource.data = data;
+ this.quizzes = data;
this.totalQuiz = data.length;
},
});
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..2571441aea26ec13c354a6ca088dcaf173e360b8 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
@@ -0,0 +1,6 @@
+.main-container {
+ height: 10%;
+ width: 100%;
+ background-color: #F3F3F3;
+ border-radius: 8;
+}
\ No newline at end of file
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
index 28cf4e9313bd540f9afa9851b32cf0a9f4ca83c8..ac5a9dc938fe9c9c288945bc62d5c7d3014da8ec 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
@@ -1,6 +1,6 @@
<div class="main-container">
- <p class="title">{{ title }}</p>
+ <h4>{{ title }}</h4>
<p class="description">
{{ nbQuestions }} QUESTIONS | {{ difficulty.toUpperCase() }} | {{ creator.toUpperCase() }}
</p>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
index f1848ae7c7abd0e3959e376691b24e69ec598921..0003c96bd372a65a186ccaf168c69542f01d3222 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'app-quiz-list-detail',
templateUrl: './quiz-list-detail.component.html',
- styleUrl: './quiz-list-detail.component.css',
+ styleUrls: ['./quiz-list-detail.component.css','../../../../styles.css'],
})
export class QuizListDetailComponent {
@Input() title: string = '';