PUNKT-31:Modyfikacja wyglądu aplikacji - rozwiązywanie testów.

FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css

@@ -1,6 +1,70 @@
 .answers{
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     justify-content: flex-start;
-}
+
+}
+
+.pytanie
+{
+  background-color: white;
+  color: black;
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+  border: 10px solid white;
+  font-size: larger;
+
+}
+
+
+
+
+.radio-answer
+{
+  display: none;
+}
+
+label
+{
+  clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
+  background-color: #000080;
+  width: 300px;
+  text-align: center;
+  border: 3px solid #000080;
+  border-bottom: #000080;
+  color: white;
+  cursor: pointer;
+  margin-top:10px;
+  font-size: large;
+}
+
+label:hover
+{
+  background-color: orange;
+  border-color: orange;
+}
+
+.radio-answer:checked + label
+{
+  background-color: orange;
+  border-color: orange;
+}
+
+@media screen and (max-width: 800px) {
+  label
+  {
+    width: 254px;
+  }
+
+  .pytanie
+  {
+    width: 100%;
+  }
+
+  .alert-grey
+  {
+    background-color: #181616;
+  }
+}

FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.html

@@ -1,12 +1,15 @@
 <form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
   <div class="alert alert-grey question">
-    {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="timeLeft === 0">Czas: bez limitu</span>
+    Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="timeLeft === 0">Czas: bez limitu</span>
+   <div class="pytanie">{{question.question}} </div>
     <div class="answers">
-      <div *ngFor="let item of question.answers">
-        <input type="radio" name="answer" [value]="item.content" ngModel> {{item.content}}
+      <div *ngFor="let item of question.answers" >
+
+        <input type="radio" name="answer" class="radio-answer" id="{{item.content}}" [value]="item.content" ngModel ><label for="{{item.content}}">{{item.content}}</label>
+
       </div>
     </div>
   </div>
 
   <button class="btn btn-study-cave" type="submit"><i class="fas fa-arrow-right"></i> Dalej</button>
-</form>
+</form>

FrontEnd/src/app/tests/test-details/test-details.component.css

@@ -7,7 +7,7 @@
 
 .content{
     background-color: #181616;
-    padding: 30px; 
+    padding: 30px;
     margin-top: 2rem;
     margin-bottom: 2rem;
     text-align: center;
@@ -39,4 +39,17 @@
     .header{
         display: block;
     }
-}
+}
+
+.button
+{
+  background-color: #000080;
+  border-color: #000080;
+  color:white;
+}
+
+.button:hover
+{
+  background-color: orange;
+  border-color: orange;
+}

FrontEnd/src/app/tests/test-details/test-details.component.html

@@ -3,7 +3,7 @@
 
     <div *ngIf="test">
       <div class="header">
-        <button class="btn btn-study-cave" (click)="back()"><i class="fas fa-arrow-left"></i> Powrót</button>
+        <button class="button" (click)="back()"><i class="fas fa-arrow-left"></i> Powrót</button>
         <span>
           <div *ngIf="currentUser">Twój maksymalny wynik: {{prevMaxResult}}/{{maxPoints}}</div>
           <button title="Usuń" *ngIf="currentUser && currentUser.username === test.owner && (!isStarted || isEnded)" class="btn btn-study-cave" (click)="openPopup()"><i class="fas fa-trash-alt"></i></button>
@@ -23,7 +23,7 @@
       </div>
 
       <div *ngIf="!isStarted">
-        <button class="btn btn-study-cave" (click)="start()"> <i class="far fa-play-circle"></i> Rozpocznij test</button>
+        <button class="button" (click)="start()"> <i class="far fa-play-circle"></i> Rozpocznij test</button>
       </div>
       <div *ngIf="isStarted && !isEnded">
 
@@ -54,8 +54,8 @@
   <p-dialog header="Potwierdź" [(visible)]="display">
     Czy chcesz usunąć test?
     <p-footer>
-        <button type="button" pButton icon="pi pi-check" (click)="deleteTest()" label="TAK"></button>
-        <button type="button" pButton icon="pi pi-close" (click)="display=false" label="NIE" class="ui-button-secondary"></button>
+        <button type="button" pButton icon="pi pi-check" (click)="deleteTest()" label="TAK" class="button" ></button>
+        <button type="button" pButton icon="pi pi-close" (click)="display=false" label="NIE" class="button" ></button>
     </p-footer>
 </p-dialog>
-</div>
+</div>

FrontEnd/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>StudyCave</title>
+  <title>Punktonerzy</title>
   <base href="/">
   <!-- <script>document.write('<base href="' + document.location + '" />');</script> -->
 
@@ -15,7 +15,7 @@
   <script language="javascript" type="text/javascript" src="./assets/js/standard_fonts_metrics.js"></script>
   <script language="javascript" type="text/javascript" src="./assets/js/jspdf.customfonts.min.js"></script>
   <script language="javascript" type="text/javascript" src="./assets/js/split_text_to_size.js"></script>
-  
+
 </head>
 <body>
   <app-root></app-root>

FrontEnd/src/styles.css

@@ -152,9 +152,13 @@ a:hover{
   background-color: #000080;
   width: 180px;
   text-align: center;
+  border-color: #000080;
+  border-bottom: #000080;
+  color: white;
 }
 
 .button:hover
 {
   background-color: orange;
+  border-color: orange;
 }