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 a2c2379b9c2bc6ea37631cf841180456d9d445ed..ce9b81fad96859a5fb29fc076502a4b714b0ea43 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.css
+++ b/src/app/modules/community/list-quiz/list-quiz.component.css
@@ -1,3 +1,7 @@
+.containerGlobal {
+ display: flex;
+}
+
.containerGlobal {
height: 100%;
width: 100%;
@@ -9,6 +13,10 @@
.containerLeft {
height: 100%;
width: 50%;
+ padding-inline: 2%;
+ display: flex;
+ flex-direction: column;
+ justify-content: 'space-between';
}
.containerRight {
@@ -17,27 +25,25 @@
background-image: url(../../../../../public/BackgroundSubScreen.png);
background-repeat: no-repeat;
background-size: cover;
- display: flex;
+ /* display: flex;
flex-direction: column;
- align-items: center;
- padding-top: 2vmin;
- padding-left: 75px;
+ align-items: center; */
}
-.list {
+
+.container {
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%;
+
+ border-radius: 25px;
+ background-color: #fff;
+ box-shadow: 0 0 0.5% rgba(0, 0, 0, 0.1);
+ width: 100%;
+ height: 70%;
+ flex-grow: 0;
+
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ border: 1vmin solid #F3F3F3;
}
\ 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 b9cd6c01e3f18075c2652bc13b84436950f85f80..bc6f170b6c82fcbe828458a930ee647bb531f78e 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.html
+++ b/src/app/modules/community/list-quiz/list-quiz.component.html
@@ -2,20 +2,16 @@
<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'"
- />
+ <input (keyup)="filter()" [(ngModel)]="filterText" type="text" placeholder="Search a quiz"
+ class="inputRecherche" />
+ <div class="container">
+ <div class="scrollable-list">
+ <app-quiz-list [quizList]="quizList"></app-quiz-list>
</div>
</div>
</div>
<div class="containerRight">
- <div class="quiz-detail"><app-quiz-detail [codeQuiz]="clickedQuiz"></app-quiz-detail></div>
+ <app-quiz-list-detail />
</div>
</div>
</div>
@@ -33,7 +29,7 @@
<!--<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>-->
- <!-- <mat-paginator
+<!-- <mat-paginator
(page)="onPageChange($event)"
[pageSize]="take"
[pageIndex]="skip"
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 23135168b37b5edc4bb3d2931e330f9afbc82e3e..802eb44617b34cc7825e8d56e1d72182de01877f 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.ts
+++ b/src/app/modules/community/list-quiz/list-quiz.component.ts
@@ -7,14 +7,15 @@ import { filter } from 'rxjs';
@Component({
selector: 'app-list-quiz',
templateUrl: './list-quiz.component.html',
- styleUrls: ['./list-quiz.component.css','../../../../styles.css'],
+ styleUrls: ['./list-quiz.component.css', '../../../../styles.css'],
})
export class ListQuizComponent implements OnInit {
//listQuizDataSource = new MatTableDataSource();
quizzes: any[] = []
+ quizList: any[] = [];
//displayedColumns = ['Component'];
- constructor(private communityService: CommunityService) {}
+ constructor(private communityService: CommunityService) { }
codeQuiz: string = '';
skip: number = 0;
take: number = 10;
@@ -36,6 +37,10 @@ export class ListQuizComponent implements OnInit {
//this.listQuizDataSource.data = data;
this.quizzes = data;
this.totalQuiz = data.length;
+ this.quizzes.map((quiz => {
+
+ this.quizList.push({ title: !quiz.name ? 'Untitled' : quiz.name, content: `${quiz.questions.length} QUESTIONS | ${quiz.difficulty.name} | ${!quiz.author ? 'Anonymous' : quiz.author}` })
+ }))
},
});
}
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 2571441aea26ec13c354a6ca088dcaf173e360b8..f7b1dca03d661fd3384858760dd47ad3f3db2728 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
@@ -1,6 +1,53 @@
-.main-container {
- height: 10%;
- width: 100%;
- background-color: #F3F3F3;
- border-radius: 8;
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ height: calc(100% - 2vmin);
+ width: calc(100% - 100px);
+ gap: 1rem;
+ padding-left: 100px;
+}
+
+/* Titre */
+.container h1 {
+ font-size: 1.8em;
+ color: #333;
+ text-align: center;
+ /* margin-bottom: 1.5rem; */
+ margin: 0;
+ font-weight: 500;
+}
+
+.quiz-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ height: 30vh;
+
+ background-color: #FEFEFE;
+ border-radius: 10px;
+ gap: 1rem;
+}
+
+.quiz-info-content {
+ display: flex;
+ flex-direction: row;
+ gap: 0.6rem;
+ padding-left: 10%;
+}
+
+.quiz-title {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+hr {
+ width: 70%;
+ padding-left: 15%;
+ height: 0.5vmin;
+ margin: 0;
+ background-color: #B9B9B9;
+ border: none;
}
\ 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 ac5a9dc938fe9c9c288945bc62d5c7d3014da8ec..67cde8ed0f2a0ada1d676b5bf08687545ee5c84d 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,21 @@
-<div class="main-container">
- <h4>{{ title }}</h4>
- <p class="description">
- {{ nbQuestions }} QUESTIONS | {{ difficulty.toUpperCase() }} | {{ creator.toUpperCase() }}
- </p>
+<div class="container">
+ <div class="quiz-detail">
+ <h1>{{ quiz.title }}</h1>
+ <h2>{{ quiz.content }}</h2>
+ </div>
+
+ <div class="quiz-info">
+ <div class="quiz-title">
+ <p class="quiz-info-title">About this quiz</p>
+ <hr />
+ </div>
+ <div class="quiz-info-content">
+ <p class="quiz-info-content-value">{{quiz.nbQuestions}} Questions, {{quiz.difficulty}}</p>
+ </div>
+
+ </div>
+
+ <div class="new-quiz">
+ <button class="blueButton" (click)="playQuiz()">Go !</button>
+ </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 0003c96bd372a65a186ccaf168c69542f01d3222..4428c878f0e8e2d873d4737ac3e8c0f95a15aeb8 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,11 +3,27 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'app-quiz-list-detail',
templateUrl: './quiz-list-detail.component.html',
- styleUrls: ['./quiz-list-detail.component.css','../../../../styles.css'],
+ styleUrls: ['./quiz-list-detail.component.css', '../../../../styles.css'],
})
export class QuizListDetailComponent {
@Input() title: string = '';
@Input() nbQuestions: number = 0;
@Input() difficulty: string = '';
@Input() creator: string = '';
+
+ quiz: any
+
+ ngOnInit(): void {
+ this.quiz = {
+ title: "Quiz de la mort qui tue",
+ content: "un quiz de la mort qui tue",
+ difficulty: "hard",
+ creator: "Klebert",
+ nbQuestions: 10
+ }
+ }
+
+ playQuiz() {
+ console.log('play quiz');
+ }
}
diff --git a/src/app/modules/profile/profile-info/profile-info.component.css b/src/app/modules/profile/profile-info/profile-info.component.css
index af925cf13dbedb9c5c58e9f09d01345126dd4800..06003f31508c11e773f26ba2a3c995bd48ea5df0 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.css
+++ b/src/app/modules/profile/profile-info/profile-info.component.css
@@ -45,12 +45,7 @@
height: 89%;
}
-.scrollable-list {
- /* max-height: 95%; */
- overflow-y: auto;
- overflow-x: hidden;
-}
.form-group {
width: 100%;
diff --git a/src/app/shared/quiz-list/quiz-list.component.css b/src/app/shared/quiz-list/quiz-list.component.css
index 1ae280cf557577043e08117161cf1e787a772064..392e8aca61a78a14d9b4abc1feaeded694da7c32 100644
--- a/src/app/shared/quiz-list/quiz-list.component.css
+++ b/src/app/shared/quiz-list/quiz-list.component.css
@@ -18,8 +18,7 @@
/* Styles génériques */
button {
- width: 100%;
- /* margin-bottom: 1%; */
+ height: 8vh;
width: 90%;
flex-shrink: 0;
margin: 1%;
diff --git a/src/styles.css b/src/styles.css
index cc3b399d17b2d1ba7a372bb4219d548f60b27583..1d2146f45ca56f3447d94a69b257b60e1009f998 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -171,4 +171,11 @@ h1 {
.scrollable-list::-webkit-scrollbar-thumb:hover {
background-color: #555;
+}
+
+.scrollable-list {
+ /* max-height: 95%; */
+ overflow-y: auto;
+ overflow-x: hidden;
+
}
\ No newline at end of file