PUNKT-31:Modyfikacja wyglądu aplikacji - rozwiązywanie testów.
This commit is contained in:
parent
40eda6183e
commit
4ab37abeab
@ -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;
|
||||
}
|
||||
}
|
@ -1,9 +1,12 @@
|
||||
<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>
|
||||
|
@ -40,3 +40,16 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.button
|
||||
{
|
||||
background-color: #000080;
|
||||
border-color: #000080;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.button:hover
|
||||
{
|
||||
background-color: orange;
|
||||
border-color: orange;
|
||||
}
|
||||
|
@ -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>
|
Binary file not shown.
Before Width: | Height: | Size: 335 KiB |
@ -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> -->
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user