Skip to content
Snippets Groups Projects
Commit 6ff6560d authored by HUSS THEOPHILE's avatar HUSS THEOPHILE
Browse files

Merge branch 'develop' into 'feature/42-add-user-login-signup' 

# Conflicts:
#   src/app/modules/profile/profile-info/profile-info.component.html
#   src/app/modules/profile/profile-info/profile-info.component.ts
parents 76b95152 7384b2e4
Branches
1 merge request!44Feature/42 add user login signup
Pipeline #303304 passed with stages
Stage:
    Stage:
      in 45 seconds
      Hide whitespace changes
      Inline Side-by-side
      Showing
      with 477 additions and 230 deletions
      src/app/app-routing.module.ts
      + 4
      − 0
      View file @ 6ff6560d
      ......@@ -9,6 +9,10 @@ import { CreateCustomQuizComponent } from './modules/profile/create-custom-quiz/
      const routes: Routes = [
      {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full', // Assurez-vous que pathMatch est défini sur 'full'
      }, {
      path: 'home',
      component: HomePageComponent,
      },
      {
      ......
      src/app/app.component.html
      + 3
      − 1
      View file @ 6ff6560d
      <app-header *ngIf="!playQuiz"></app-header>
      <router-outlet></router-outlet>
      \ No newline at end of file
      <main>
      <router-outlet></router-outlet>
      </main>
      \ No newline at end of file
      src/app/app.component.ts
      + 7
      − 1
      View file @ 6ff6560d
      ......@@ -9,12 +9,18 @@ import { filter } from 'rxjs';
      })
      export class AppComponent implements OnInit {
      playQuiz: boolean = false;
      homePage: boolean = false;
      communityPage: boolean = false;
      profilePage: boolean = false;
      constructor(private router: Router, private route: ActivatedRoute) {}
      constructor(private router: Router, private route: ActivatedRoute) { }
      ngOnInit(): void {
      this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
      this.playQuiz = this.router.url.includes('play-quiz');
      this.homePage = this.router.url.includes('home');
      this.communityPage = this.router.url.includes('community');
      this.profilePage = this.router.url.includes('profile');
      });
      }
      }
      src/app/modules/home/form-play-quiz/form-play-quiz.component.html
      + 2
      − 2
      View file @ 6ff6560d
      <main class="container">
      <div class="container">
      <div class="button-header">
      <button (click)="createQuiz()">Play a quiz</button>
      <button (click)="startQuiz()">Join a quiz</button>
      ......@@ -7,4 +7,4 @@
      <app-form-start-quiz *ngIf="showStartQuiz"></app-form-start-quiz>
      <app-form-create-quiz *ngIf="showCreateQuiz"></app-form-create-quiz>
      </div>
      </main>
      </div>
      \ No newline at end of file
      src/app/modules/home/home-page/home-page.component.css
      + 3
      − 11
      View file @ 6ff6560d
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
      .main {
      .question-marks {
      display: flex;
      height: 90vh;
      width: 100vW;
      margin: 0;
      padding: 10vh 0 0 0 ;
      background-image: url(../../../../../public/WEB-BACKGROUNDHOME3.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      }
      button {
      ......@@ -40,6 +32,6 @@ button:hover {
      }
      .logo {
      height: 20%;
      width: 65%;
      height: 20vmin;
      width: 65vmin;
      }
      \ No newline at end of file
      src/app/modules/home/home-page/home-page.component.html
      + 4
      − 4
      View file @ 6ff6560d
      <main class="main">
      <div class="question-marks">
      <div class="left-side">
      <img src="LogoApp.png" class="logo"/>
      <img src="LogoApp.png" class="logo" />
      <div class="navigation-button">
      <button (click)="quickGame()">Quick game</button>
      <button (click)="playQuiz()">Play a quiz</button>
      ......@@ -10,5 +10,5 @@
      <div class="right-side">
      <app-form-play-quiz *ngIf="showPlayQuiz"></app-form-play-quiz>
      <app-my-quiz *ngIf="showMyQuiz"></app-my-quiz>
      </div>
      </main>
      </div>
      </div>
      \ No newline at end of file
      src/app/modules/home/home.module.ts
      + 3
      − 2
      View file @ 6ff6560d
      ......@@ -10,6 +10,7 @@ import { HomePageComponent } from './home-page/home-page.component';
      import { BrowserModule } from '@angular/platform-browser';
      import { FormPlayQuizComponent } from './form-play-quiz/form-play-quiz.component';
      import { MatIconModule } from '@angular/material/icon';
      import { SharedModule } from '../../shared/shared.module';
      @NgModule({
      declarations: [
      ......@@ -22,6 +23,6 @@ import { MatIconModule } from '@angular/material/icon';
      FormPlayQuizComponent,
      ],
      exports: [MultipleChoiceComponent],
      imports: [CommonModule, ReactiveFormsModule, BrowserModule, MatIconModule],
      imports: [CommonModule, ReactiveFormsModule, BrowserModule, MatIconModule, SharedModule],
      })
      export class HomeModule {}
      export class HomeModule { }
      src/app/modules/home/my-quiz/my-quiz.component.css
      + 8
      − 21
      View file @ 6ff6560d
      ......@@ -18,7 +18,8 @@
      .scrollable-list {
      height: 45%;
      width: 100%;
      overflow-y: auto; /* Ajoute une scrollbar verticale si nécessaire */
      overflow-y: auto;
      /* Ajoute une scrollbar verticale si nécessaire */
      border: 4px solid #F3F3F3;
      padding: 0;
      border-radius: 10px;
      ......@@ -26,31 +27,17 @@
      }
      /* Optionnel: Personnalisation de la scrollbar */
      .scrollable-list::-webkit-scrollbar {
      width: 10px;
      }
      .scrollable-list::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 5px;
      }
      .scrollable-list::-webkit-scrollbar-thumb:hover {
      background-color: #555;
      }
      input[type="radio"] {
      display: none;
      }
      .radio-label > h3{
      .radio-label>h3 {
      margin: 10px 5px 5px 5px;
      }
      .radio-label > p{
      .radio-label>p {
      margin: 5px 5px 5px 10px;
      }
      }
      /* Style for the custom buttons */
      .radio-label {
      ......@@ -67,11 +54,11 @@ input[type="radio"] {
      align-items: center;
      }
      input[type="radio"] + .radio-label:hover {
      input[type="radio"]+.radio-label:hover {
      background-color: #e0e0e0;
      }
      }
      input[type="radio"]:checked + .radio-label {
      input[type="radio"]:checked+.radio-label {
      color: #2B73FE;
      }
      ......
      src/app/modules/home/my-quiz/my-quiz.component.html
      + 4
      − 45
      View file @ 6ff6560d
      <div class="container">
      <p class="title">My recent quiz</p>
      <input type="search" class="inputRecherche">
      <ul class="scrollable-list">
      <li class="listeItem">
      <input type="radio" id="option1" name="options" value="1">
      <label for="option1" class="radio-label">
      <h3>Video games</h3>
      <p>12/20 Questions | Medium</p>
      </label>
      </li>
      <li class="listeItem">
      <input type="radio" id="option2" name="options" value="2">
      <label for="option2" class="radio-label">
      <h3>Video games</h3>
      <p>12/20 Questions | Medium</p>
      </label>
      </li>
      <li class="listeItem">
      <input type="radio" id="option3" name="options" value="3">
      <label for="option3" class="radio-label">
      <h3>Video games</h3>
      <p>12/20 Questions | Medium</p>
      </label>
      </li>
      <li class="listeItem">
      <input type="radio" id="option4" name="options" value="4">
      <label for="option4" class="radio-label">
      <h3>Video games</h3>
      <p>12/20 Questions | Medium</p>
      </label>
      </li>
      <li class="listeItem">
      <input type="radio" id="option5" name="options" value="5">
      <label for="option5" class="radio-label">
      <h3>Video games</h3>
      <p>12/20 Questions | Medium</p>
      </label>
      </li>
      <li class="listeItem">
      <input type="radio" id="option6" name="options" value="6">
      <label for="option6" class="radio-label">
      <h3>Video games</h3>
      <p>12/20 Questions | Medium</p>
      </label>
      </li>
      </ul>
      <input type="submit" value="PLAY" class="blueButton">
      <div class="scrollable-list">
      <app-quiz-list [quizList]="quizList"></app-quiz-list>
      </div>
      <input type="submit" value="PLAY" class="blueButton">
      </div>
      \ No newline at end of file
      src/app/modules/home/my-quiz/my-quiz.component.ts
      + 25
      − 0
      View file @ 6ff6560d
      import { Component } from '@angular/core';
      import { Router } from '@angular/router';
      @Component({
      selector: 'app-my-quiz',
      ......@@ -6,5 +7,29 @@ import { Component } from '@angular/core';
      styleUrls: ['./my-quiz.component.css', '../../../../styles.css'],
      })
      export class MyQuizComponent {
      quizList: any[] = [];
      constructor(
      private router: Router
      ) { }
      ngOnInit(): void {
      this.quizList = [
      { title: 'Quiz 1', content: 'Quiz 1 Content' },
      { title: 'Quiz 2', content: 'Quiz 2 Content' },
      { title: 'Quiz 3', content: 'Quiz 3 Content' },
      { title: 'Quiz 4', content: 'Quiz 4 Content' },
      { title: 'Quiz 5', content: 'Quiz 5 Content' },
      { title: 'Quiz 6', content: 'Quiz 6 Content' },
      { title: 'Quiz 7', content: 'Quiz 7 Content' },
      { title: 'Quiz 8', content: 'Quiz 8 Content' },
      { title: 'Quiz 9', content: 'Quiz 9 Content' },
      { title: 'Quiz 10', content: 'Quiz 10 Content' },
      { title: 'Quiz 11', content: 'Quiz 11 Content' },
      { title: 'Quiz 12', content: 'Quiz 12 Content' },
      { title: 'Quiz 13', content: 'Quiz 13 Content' },
      { title: 'Quiz 14', content: 'Quiz 14 Content' },
      { title: 'Quiz 15', content: 'Quiz 15 Content' }
      ];
      }
      }
      src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
      + 186
      − 26
      View file @ 6ff6560d
      .question-table {
      .header {
      display: flex;
      flex-direction: row;
      align-items: center;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 10vh;
      }
      .w-fit {
      width: fit-content !important;
      .header mat-icon {
      width: auto;
      height: auto;
      margin: 0;
      font-size: 8vmin;
      padding-right: 5vw;
      /* Your profile */
      font-style: normal;
      font-weight: 500;
      color: #00B3F4;
      }
      .question-table tbody td:nth-child(2) {
      flex: 0 0 auto;
      justify-content: center;
      .header h1 {
      width: auto;
      height: auto;
      margin: 0;
      font-size: 8vmin;
      padding-left: 5vw;
      /* Your profile */
      font-style: normal;
      font-weight: 500;
      color: #00B3F4;
      }
      .question-table tbody td:nth-child(3),
      .question-table tbody td:nth-child(4) {
      flex: 1;
      .header mat-icon:hover {
      cursor: pointer;
      color: #2B73FE;
      }
      .m-10 {
      margin: 10px;
      .container {
      display: flex;
      flex-direction: column;
      width: 90vw;
      margin-left: 5%;
      height: 70vh;
      background-color: #F3F3F3;
      border-radius: 10px;
      border: 0.5vmin solid #DBDBDB;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      }
      .cell {
      border: 1px solid #ccc;
      input {
      height: 3vmin;
      width: calc(90vw/2);
      margin-top: 0.5vmin;
      margin-bottom: 0.5vmin;
      /*padding-left: 1vmin;
      padding-right: 1vmin; */
      border-radius: 5px;
      border: 0.25vmin solid #DBDBDB;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      }
      .row {
      max-width: 100%;
      select {
      height: 3vmin;
      width: auto;
      margin-top: 0.5vmin;
      margin-bottom: 0.5vmin;
      /*padding-left: 1vmin;
      padding-right: 1vmin; */
      border-radius: 5px;
      border: 0.25vmin solid #DBDBDB;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      }
      .add-cell {
      max-width: 100%;
      .quiz-info-wrapper {
      display: flex;
      justify-content: center;
      border: 2px solid black;
      flex-wrap: nowrap;
      flex-direction: row;
      justify-content: left;
      align-items: center;
      width: 100%;
      /*margin-top: 1vmin;*/
      }
      .add-cell-question {
      .label-wrapper {
      width: 30%;
      text-align: right;
      font-size: 3vmin;
      margin: 0;
      margin-right: 5%;
      flex-shrink: 0;
      }
      .quiz-info {
      display: flex;
      flex-direction: column;
      width: 100%;
      display: table-row;
      text-align: center;
      border: 2px solid rgba(0, 0, 0, 0.808);
      height: 8vh;
      }
      .bigger-icon {
      transform: scale(1.2);
      .quiz-info-wrapper select {
      width: 30%;
      }
      hr {
      width: 100%;
      height: 0.5vmin;
      background-color: #DBDBDB;
      border: none;
      }
      /*****************************************/
      /* questions Info */
      /*****************************************/
      .question-info {
      height: 58vh;
      overflow: auto;
      }
      /* .question-table {
      height: 100%;
      overflow: scroll;
      } */
      .question-cell {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      margin-top: 1vmin;
      }
      .answers-cell {
      display: flex;
      flex-direction: row;
      padding-top: 2vmin;
      }
      .answers-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      }
      .answer-wrapper {
      width: 70%;
      }
      .answer-cell {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      }
      mat-icon {
      height: 100%;
      }
      .answer-cell input {
      width: calc(45vw - 2.5vmin);
      }
      span {
      flex-shrink: 0;
      }
      .add-cell {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      /* margin-top: 1vmin; */
      }
      .add-cell p {
      margin: 0;
      margin-left: 1%;
      font-size: 1.5vmin;
      color: #C9C9C9;
      }
      .btn-group {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      width: 96%;
      margin-left: 2%;
      margin-top: 0.5%;
      }
      \ No newline at end of file
      src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
      + 77
      − 66
      View file @ 6ff6560d
      <div class="col-md-12">
      <div class="card">
      <div class="row">
      <div class="col-md-12">
      <form class="m-10" (ngSubmit)="createQuiz()" [formGroup]="quizForm">
      <label class="m-10">Quiz title : </label>
      <input class="m-10" type="text" formControlName="title" />
      <label class="m-10">Difficulty : </label>
      <div class="question-marks">
      <div class="header">
      <h1>Create your own quiz</h1>
      <mat-icon (click)="createQuiz()">save</mat-icon>
      </div>
      <div class="container">
      <form [formGroup]="quizForm">
      <div class="quiz-info">
      <div class="quiz-info-wrapper">
      <div class="label-wrapper">
      <label for="title">QUIZ TITLE </label>
      </div>
      <input type="text" formControlName="title" placeholder="Write the quiz title..." />
      </div>
      <div class="quiz-info-wrapper">
      <div class="label-wrapper">
      <label for="difficulty">QUIZ DIFFICULTY </label>
      </div>
      <select formControlName="difficulty">
      <option value="easy">Easy</option>
      <option value="medium">Medium</option>
      <option value="hard">Hard</option>
      </select>
      <table class="question-table">
      <thead>
      <tr>
      <th class="photo-cell">Question</th>
      <th class="task-type-cell">Answers</th>
      </tr>
      </thead>
      <tbody formArrayName="questions">
      <tr *ngFor="let question of questions.controls; let i = index" [formGroupName]="i">
      <td class="cell question-cell">
      <label>Question : </label>
      <input type="text" formControlName="question" />
      </td>
      <td class="cell answers-cell" formArrayName="answers">
      <table class="answers-table">
      <tr
      *ngFor="let answer of getAnswers(i).controls; let j = index"
      [formGroupName]="j"
      >
      <td>
      <input type="text" formControlName="answer" />
      </td>
      <td>
      <input type="checkbox" [formControlName]="'right_answer'" />
      </td>
      <td (click)="removeAnswer(i, j)">
      <mat-icon style="color: red">delete</mat-icon>
      </td>
      </tr>
      <span *ngIf="getAnswers(i).errors?.['duplicateAnswer']" style="color: red"
      >All answers need to be unique.</span
      >
      <tr class="add-cell" (click)="addAnswer(i)">
      <td>
      <mat-icon style="color: brown">add</mat-icon>
      </td>
      </tr>
      </table>
      </td>
      <td (click)="removeQuestion(i)">
      <mat-icon style="color: red">delete</mat-icon>
      </td>
      </tr>
      <tr class="add-cell-question" (click)="addQuestion()">
      <td colspan="5">
      <mat-icon [style.color]="'brown'">add</mat-icon>
      </td>
      </tr>
      </tbody>
      </table>
      </form>
      <div class="center-button">
      <button (click)="createQuiz()" class="btn btn-secondary btn-success" [disabled]="quizForm.invalid">
      Add
      </button>
      </div>
      </div>
      </div>
      <hr>
      <div class="question-info">
      <div class="question-table">
      <div formArrayName="questions">
      <div class="question-row" *ngFor="let question of questions.controls; let i = index"
      [formGroupName]="i">
      <div class="cell question-cell">
      <div class="label-wrapper">
      <label>QUESTION {{i + 1}} </label>
      </div>
      <input type="text" formControlName="question" placeholder="Write a question..." />
      <!-- the button bellow is temporary -->
      <mat-icon style="color: red" (click)="removeQuestion(i)">delete</mat-icon>
      </div>
      <div class="cell answers-cell" formArrayName="answers">
      <div class="label-wrapper">
      <label>ANSWERS </label>
      </div>
      <div class="answer-wrapper">
      <div class="answers-list"
      *ngFor="let answer of getAnswers(i).controls; let j = index"
      [formGroupName]="j">
      <div class="answer-cell">
      <!-- answer index 0 is always the correct anwser -->
      <div *ngIf="j == 0" class="answer-cell">
      <mat-icon style="color: green">check</mat-icon>
      <input type="text" formControlName="answer"
      placeholder="Write true answer..." />
      </div>
      <div *ngIf="j>0" class="answer-cell">
      <mat-icon style="color: red">clear</mat-icon>
      <input type="text" formControlName="answer"
      placeholder="Write wrong answer..." />
      <mat-icon *ngIf="j > 1" (click)="removeAnswer(i, j)"
      style="color: red">delete</mat-icon>
      </div>
      </div>
      </div>
      <span *ngIf="getAnswers(i).errors?.['duplicateAnswer']" style="color: red">All
      answers need to be unique.
      </span>
      <div class="add-cell" (click)="addAnswer(i)" *ngIf="getAnswers(i).length<4">
      <!-- <mat-icon style="color: brown">add</mat-icon> -->
      <button class="questionsButton">+ ADD AN ANSWER</button>
      <p>up to 4</p>
      </div>
      </div>
      </div>
      <hr>
      </div>
      <div class="btn-group">
      <button (click)="addQuestion()" class="questionsButton">+ ADD A QUESTION</button>
      <button class="questionsButton">ADD FROM DATABASE</button>
      </div>
      </div>
      </div>
      </div>
      </form>
      </div>
      </div>
      </div>
      \ No newline at end of file
      src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
      + 42
      − 9
      View file @ 6ff6560d
      import { Component, OnInit } from '@angular/core';
      import { AbstractControl, FormArray, FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
      import { Router } from '@angular/router';
      import Swal from 'sweetalert2';
      @Component({
      templateUrl: './create-custom-quiz.component.html',
      ......@@ -7,14 +9,18 @@ import { AbstractControl, FormArray, FormBuilder, FormGroup, ValidationErrors, V
      })
      export class CreateCustomQuizComponent implements OnInit {
      quizForm: FormGroup;
      constructor(private fb: FormBuilder) {
      router: any;
      constructor(
      private fb: FormBuilder,
      router: Router
      ) {
      this.quizForm = this.fb.group({
      title: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
      difficulty: this.fb.control('', [Validators.required]),
      difficulty: this.fb.control('medium', [Validators.required]),
      questions: this.fb.array([this.createQuestion()], [Validators.required]),
      });
      }
      ngOnInit(): void {}
      ngOnInit(): void { }
      get questions(): FormArray {
      return this.quizForm.get('questions') as FormArray;
      ......@@ -37,7 +43,7 @@ export class CreateCustomQuizComponent implements OnInit {
      createAnswer() {
      return this.fb.group({
      answer: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
      right_answer: this.fb.control(false, [Validators.required]),
      right_answer: this.fb.control(true, [Validators.required]),
      });
      }
      addAnswer(i: number) {
      ......@@ -53,14 +59,41 @@ export class CreateCustomQuizComponent implements OnInit {
      }
      removeQuestion(i: number) {
      this.questions.removeAt(i);
      Swal.fire({
      title: "Are you sure you want to delete this question?",
      text: "You won't be able to revert this!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, delete it!"
      }).then((result) => {
      if (result.isConfirmed) {
      this.questions.removeAt(i);
      }
      });
      }
      answersValidators(formArray: AbstractControl): ValidationErrors | null {
      const names = formArray.value.map((answer: any) => answer.answer.toLowerCase());
      const hasDuplicates = names.some((name: string, index: number) => names.indexOf(name.toLowerCase()) !== index);
      return hasDuplicates ? { duplicateAnswer: true } : null;
      const answersValues = formArray.value.map((answer: any) => answer.answer.toLowerCase()).filter((answer: string) => answer.trim() !== '');
      // check if the text already exist in another answer
      const hasDuplicates = answersValues.some((name: string, index: number) => answersValues.indexOf(name.toLowerCase()) !== index);
      // check if the text is empty
      const hasEmpty = answersValues.some((name: string) => name.trim() === '');
      return { duplicateAnswer: hasDuplicates, emptyAnswer: hasEmpty };
      }
      createQuiz() {}
      createQuiz() {
      if (this.quizForm.valid) {
      console.log(this.quizForm.value);
      this.router.navigate(['profile/']);
      } else {
      Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Please fill all the required fields!',
      });
      console.log(this.quizForm.value);
      }
      }
      }
      src/app/modules/profile/profile-info/profile-info.component.css
      + 21
      − 22
      View file @ 6ff6560d
      ......@@ -3,13 +3,13 @@
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: 40% 40%;
      grid-template-rows: 10% 85%;
      grid-template-rows: 5% 85%;
      grid-gap: 0 7%;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 90vh;
      height: 88%;
      }
      .grid {
      ......@@ -41,7 +41,11 @@
      border: 1vmin solid #F3F3F3;
      }
      .list-wrapper {
      .grid .container {
      height: 89%;
      }
      .scrollable-list {
      /* max-height: 95%; */
      overflow-y: auto;
      overflow-x: hidden;
      ......@@ -49,35 +53,30 @@
      }
      .form-group {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-gap: 0 1%;
      width: 100%;
      height: 10%;
      }
      hr {
      width: 106%;
      width: 100%;
      height: 1vmin;
      margin: 0;
      margin-left: -6%;
      background-color: #F3F3F3;
      border: none;
      }
      button {
      background-color: #fff;
      /* height: 28vh; */
      /* padding: auto;
      margin: 2vh; */
      border-radius: 10px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* font-size: 2rem; */
      font-family: sans-serif;
      border: 0;
      color: black;
      .blueButton {
      vertical-align: middle;
      height: 3vmin;
      font-size: 2.5vmin;
      margin-top: 0.5vmin;
      margin-bottom: 0.5vmin;
      }
      input {
      height: 3vmin;
      margin-top: 0.5vmin;
      margin-bottom: 0.5vmin;
      }
      .profile_info,
      ......
      src/app/modules/profile/profile-info/profile-info.component.html
      + 5
      − 9
      View file @ 6ff6560d
      ......@@ -24,23 +24,19 @@
      <div *ngIf="isLogged">
      <h3>Your quizzes</h3>
      <div class="grid">
      <!-- <form [formGroup]="form" (ngSubmit)="submitForm()"> -->
      <form>
      <div class="form-group">
      <input
      type="text"
      class="form-control"
      placeholder="Search a quiz..."
      formControlName="quizName"
      />
      <button class="btn btn-primary" type="submit">Search</button>
      <input type="text" class="inputRecherche" placeholder="Search a quiz..."
      formControlName="quizName" />
      </div>
      </form>
      <div class="container">
      <div class="list-wrapper">
      <div class="scrollable-list">
      <app-quiz-list [quizList]="quizList"></app-quiz-list>
      </div>
      <div class="new-quiz">
      <button class="btn btn-primary" (click)="newQuiz()">Create a new quiz</button>
      <button class="blueButton" (click)="newQuiz()">Create a new quiz</button>
      </div>
      </div>
      </div>
      ......
      src/app/shared/header/header.component.css
      + 5
      − 0
      View file @ 6ff6560d
      ......@@ -7,6 +7,7 @@
      background-color: #F3F3F3;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      position: absolute;
      top: 0;
      display: flex;
      /* padding-inline: 1%; */
      }
      ......@@ -24,4 +25,8 @@ button {
      button:hover {
      color: #00B3F4;
      }
      .selected {
      color: #00B3F4;
      }
      \ No newline at end of file
      src/app/shared/header/header.component.html
      + 10
      − 4
      View file @ 6ff6560d
      <div class="header">
      <button [routerLink]="['/']">Home</button>
      <button [routerLink]="['/community']">Communauté</button>
      <button [routerLink]="['/profile']">Profile</button>
      </div>
      <button (click)="navigate('/home')" [ngClass]="{'selected': homePage}">
      Home
      </button>
      <button (click)="navigate('/community')" [ngClass]="{'selected': communityPage}">
      Communauté
      </button>
      <button (click)="navigate('/profile')" [ngClass]="{'selected': profilePage}">
      Profile
      </button>
      </div>
      \ No newline at end of file
      src/app/shared/header/header.component.ts
      + 32
      − 2
      View file @ 6ff6560d
      import { Component } from '@angular/core';
      import { Component, Input } from '@angular/core';
      import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
      import { filter } from 'rxjs';
      @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrl: './header.component.css',
      })
      export class HeaderComponent {}
      export class HeaderComponent {
      homePage: boolean = false;
      communityPage: boolean = false;
      profilePage: boolean = false;
      constructor(private router: Router, private route: ActivatedRoute) { }
      ngOnInit(): void {
      this.changeSelect();
      }
      changeSelect(): void {
      this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
      this.homePage = this.router.url.includes('home');
      this.communityPage = this.router.url.includes('community');
      this.profilePage = this.router.url.includes('profile');
      });
      }
      navigate(route: string): void {
      this.changeSelect();
      console.log({
      'homePage': this.homePage,
      'communityPage': this.communityPage,
      'profilePage': this.profilePage,
      });
      this.router.navigate([route]);
      }
      }
      src/styles.css
      + 36
      − 5
      View file @ 6ff6560d
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
      /* You can add global styles to this file, and also import other style files */
      html,
      body {
      ......@@ -8,7 +10,7 @@ body {
      }
      main {
      padding-top: 10vh;
      margin-top: 10vh;
      /* header size */
      height: 90vh;
      }
      ......@@ -18,6 +20,7 @@ h1,
      h2,
      h3,
      h4,
      label,
      p {
      font-family: 'Roboto';
      }
      ......@@ -29,7 +32,7 @@ p {
      h1 {
      height: 10vh;
      margin: 0;
      margin-left: 7vw;
      margin-left: 5vw;
      font-size: 8vmin;
      /* Your profile */
      font-style: normal;
      ......@@ -55,6 +58,9 @@ h1 {
      }
      .blueButton {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2B73FE;
      color: #FFFFFF;
      font-weight: bold;
      ......@@ -65,13 +71,18 @@ h1 {
      border-style: solid;
      height: 100px;
      width: 100%;
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      }
      .blueButton:hover {
      background: #00B3F4;
      background: #FFFFFF;
      color: #2B73FE;
      }
      .whiteButton {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #FFFFFF;
      color: #2B73FE;
      font-weight: bold;
      ......@@ -82,6 +93,7 @@ h1 {
      border-style: solid;
      height: 100px;
      width: 100%;
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      }
      .whiteButton:hover {
      ......@@ -89,11 +101,12 @@ h1 {
      }
      .questionsButton {
      width: 11vw;
      width: 20vw;
      height: 2.5vh;
      font-size: 1.25vmin;
      background-color: #FEFEFE;
      border-radius: 5px;
      border-radius: 20px;
      border: 0.25vmin solid #DBDBDB;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      ......@@ -117,4 +130,22 @@ h1 {
      /* margin: 2%; */
      padding: 20px;
      font-size: 2vmin;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      }
      /* scrollable lists */
      .scrollable-list::-webkit-scrollbar {
      width: 10px;
      }
      .scrollable-list::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 5px;
      }
      .scrollable-list::-webkit-scrollbar-thumb:hover {
      background-color: #555;
      }
      \ No newline at end of file
      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