From 0651a85e560b1856698bd52a39f6b8e8d909656e Mon Sep 17 00:00:00 2001 From: "h.hartz" <henri.hartz@etu.unistra.fr> Date: Fri, 6 Dec 2024 02:45:01 +0100 Subject: [PATCH 1/3] feat: update import shared module --- src/app/modules/community/community.module.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/modules/community/community.module.ts b/src/app/modules/community/community.module.ts index 2c663e3..257fb53 100644 --- a/src/app/modules/community/community.module.ts +++ b/src/app/modules/community/community.module.ts @@ -7,9 +7,10 @@ import { QuizListDetailComponent } from './quiz-list-detail/quiz-list-detail.com import { MatPaginatorModule } from '@angular/material/paginator'; import { MatFormField } from '@angular/material/form-field'; import { FormsModule, NgModel } from '@angular/forms'; +import { SharedModule } from '../../shared/shared.module'; @NgModule({ declarations: [ListQuizComponent, QuizDetailComponent, QuizListDetailComponent], - imports: [CommonModule, MatTableModule, MatPaginatorModule, MatFormField, FormsModule], + imports: [CommonModule, MatTableModule, MatPaginatorModule, MatFormField, FormsModule, SharedModule], }) export class CommunityModule {} -- GitLab From 400134fbb26e8808adc6b7661449fdb3287be166 Mon Sep 17 00:00:00 2001 From: "h.hartz" <henri.hartz@etu.unistra.fr> Date: Fri, 6 Dec 2024 04:21:12 +0100 Subject: [PATCH 2/3] feat: transfert css --- .../list-quiz/list-quiz.component.css | 43 +++++++++++++++++++ .../list-quiz/list-quiz.component.html | 42 +++++++++++++----- .../list-quiz/list-quiz.component.ts | 11 +++-- .../quiz-list-detail.component.css | 6 +++ .../quiz-list-detail.component.html | 4 +- .../quiz-list-detail.component.ts | 2 +- 6 files changed, 90 insertions(+), 18 deletions(-) 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 e69de29..a2c2379 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 02719b8..b9cd6c0 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 5cf284d..2313516 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 e69de29..2571441 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 28cf4e9..ac5a9dc 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 f1848ae..0003c96 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 = ''; -- GitLab From 84051603e5e432a0da8e52ddb3bd6eebc8b3934d Mon Sep 17 00:00:00 2001 From: D3B1RUM4N <elies1.mek03@gmail.com> Date: Fri, 6 Dec 2024 05:18:57 +0100 Subject: [PATCH 3/3] feat: community page Co-authored-by: henri.hartz --- .../list-quiz/list-quiz.component.css | 42 ++++++++------ .../list-quiz/list-quiz.component.html | 18 +++--- .../list-quiz/list-quiz.component.ts | 9 ++- .../quiz-list-detail.component.css | 57 +++++++++++++++++-- .../quiz-list-detail.component.html | 25 ++++++-- .../quiz-list-detail.component.ts | 18 +++++- .../profile-info/profile-info.component.css | 5 -- .../shared/quiz-list/quiz-list.component.css | 3 +- src/styles.css | 7 +++ 9 files changed, 135 insertions(+), 49 deletions(-) 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 a2c2379..ce9b81f 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 b9cd6c0..bc6f170 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 2313516..802eb44 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 2571441..f7b1dca 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 ac5a9dc..67cde8e 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 0003c96..4428c87 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 af925cf..06003f3 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 1ae280c..392e8ac 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 cc3b399..1d2146f 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 -- GitLab