From 4be6acf5f093fe770126d4849a807257f6eeb45a Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sun, 1 Dec 2024 16:37:11 +0100
Subject: [PATCH] =?UTF-8?q?add:=20am=C3=A9lioration=20du=20style=20form=20?=
=?UTF-8?q?start=20quiz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../form-play-quiz.component.html | 4 +-
.../form-start-quiz.component.css | 61 +++++++------------
.../form-start-quiz.component.html | 8 +--
.../form-start-quiz.component.ts | 4 +-
4 files changed, 28 insertions(+), 49 deletions(-)
diff --git a/src/app/modules/home/form-play-quiz/form-play-quiz.component.html b/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
index a7cfe8e..94d67da 100644
--- a/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
+++ b/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
@@ -6,6 +6,6 @@
<app-form-start-quiz *ngIf="showStartQuiz"></app-form-start-quiz>
<app-form-create-quiz *ngIf="showCreateQuiz"></app-form-create-quiz>
</div>
-<div class="play-button">
+<!-- <div class="play-button">
<button>Play</button>
-</div>
+</div> -->
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css
index e43a2c7..8275cce 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css
@@ -1,18 +1,26 @@
.container {
- padding: 1rem;
- background-color: #f9f9f9;
- border: 0.1rem solid #e0e0e0;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- background-color: aqua;
- height: 100vh;
+ height: 100%;
+ width: 100%;
+ background-color: #1FA9FF;
display: flex;
- flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
form {
display: flex;
flex-direction: column;
- gap: 130%; /* Espacement vertical */
+ width: 80%;
+}
+
+input {
+ width: 100%;
+ height: 5%;
+ border: 4px solid #1FA9FF;
+ border-radius: 10px;
+ padding: 1rem;
+ font-size: 2vmin;
+
}
.erreur {
@@ -21,45 +29,20 @@ form {
font-weight: bold;
}
-.infos {
- font-size: 24;
- font-weight: bold;
-}
-
-input {
- width: 98%;
- height: 10%;
- border-radius: 10px;
- border-color: #1FA9FF;
- padding: 1%
-}
-
.containerInfo{
+ width: 100%;
background-color: #ffffff;
border-radius: 10px;
padding: 1rem;
}
-button {
- width: 100%;
- height: 20%;
- border-radius: 10px;
- background-color: #2B73FE;
- color: #ffffff;
- font-size: 120%;
+.infos {
+ font-size: 2vmin;
font-weight: bold;
- border-color: #2B73FE;
}
-button:hover {
- width: 100%;
- height: 20%;
- border-radius: 10px;
- background-color: #255fd3;
- color: #ffffff;
- font-size: 120%;
- font-weight: bold;
- border-color: #2B73FE;
-}
+
+
+
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
index 37bd9a8..65446c8 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
@@ -1,9 +1,7 @@
<div class="container">
<form [formGroup]="form" (ngSubmit)="submitForm()">
- <div>
- <p class="erreur">{{erreur}}</p>
- <input type="text" placeholder="Type ID..." formControlName="code" maxlength="6" (ngModelChange)="modelChangeFn($event)">
- </div>
+ <p class="erreur">{{erreur}}</p> <!-- changer ng if -->
+ <input type="text" placeholder="Type ID..." formControlName="code" maxlength="6" (ngModelChange)="modelChangeFn($event)">
<div class="containerInfo">
<p class="infos">About this quiz</p>
<hr>
@@ -11,6 +9,6 @@
<p class="infos">Question : {{question}}</p>
<p class="infos">Score : {{score}}</p>
</div>
- <button type="submit">PLAY</button>
+ <button type="submit" class="blueButton">PLAY</button>
</form>
</div>
\ No newline at end of file
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
index 26e0367..aa58664 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
@@ -7,7 +7,7 @@ import { FormQuizService } from '../../../../services/form-quiz.service';
@Component({
selector: 'app-form-start-quiz',
templateUrl: './form-start-quiz.component.html',
- styleUrl: './form-start-quiz.component.css'
+ styleUrls: ['./form-start-quiz.component.css','../../../../../styles.css'],
})
export class FormStartQuizComponent implements OnInit{
@@ -22,7 +22,6 @@ export class FormStartQuizComponent implements OnInit{
private formQuizService: FormQuizService,
private fb: FormBuilder,
private router: Router,
- // private dialogRef: MatDialogRef<FormStartQuizComponent>,
) {}
ngOnInit(): void {
@@ -46,7 +45,6 @@ export class FormStartQuizComponent implements OnInit{
},
});
- // this.dialogRef.close();
}
}
--
GitLab