PUNKT-31:Modyfikacja wyglądu aplikacji - rozwiązywanie testów.
This commit is contained in:
parent
40eda6183e
commit
4ab37abeab
@ -1,6 +1,70 @@
|
|||||||
.answers{
|
.answers{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
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>
|
<form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
|
||||||
<div class="alert alert-grey question">
|
<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 class="answers">
|
||||||
<div *ngFor="let item of question.answers">
|
<div *ngFor="let item of question.answers" >
|
||||||
<input type="radio" name="answer" [value]="item.content" ngModel> {{item.content}}
|
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -40,3 +40,16 @@
|
|||||||
display: block;
|
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 *ngIf="test">
|
||||||
<div class="header">
|
<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>
|
<span>
|
||||||
<div *ngIf="currentUser">Twój maksymalny wynik: {{prevMaxResult}}/{{maxPoints}}</div>
|
<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>
|
<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>
|
||||||
|
|
||||||
<div *ngIf="!isStarted">
|
<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>
|
||||||
<div *ngIf="isStarted && !isEnded">
|
<div *ngIf="isStarted && !isEnded">
|
||||||
|
|
||||||
@ -54,8 +54,8 @@
|
|||||||
<p-dialog header="Potwierdź" [(visible)]="display">
|
<p-dialog header="Potwierdź" [(visible)]="display">
|
||||||
Czy chcesz usunąć test?
|
Czy chcesz usunąć test?
|
||||||
<p-footer>
|
<p-footer>
|
||||||
<button type="button" pButton icon="pi pi-check" (click)="deleteTest()" label="TAK"></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="ui-button-secondary"></button>
|
<button type="button" pButton icon="pi pi-close" (click)="display=false" label="NIE" class="button" ></button>
|
||||||
</p-footer>
|
</p-footer>
|
||||||
</p-dialog>
|
</p-dialog>
|
||||||
</div>
|
</div>
|
Binary file not shown.
Before Width: | Height: | Size: 335 KiB |
@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>StudyCave</title>
|
<title>Punktonerzy</title>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<!-- <script>document.write('<base href="' + document.location + '" />');</script> -->
|
<!-- <script>document.write('<base href="' + document.location + '" />');</script> -->
|
||||||
|
|
||||||
|
@ -152,9 +152,13 @@ a:hover{
|
|||||||
background-color: #000080;
|
background-color: #000080;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border-color: #000080;
|
||||||
|
border-bottom: #000080;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover
|
.button:hover
|
||||||
{
|
{
|
||||||
background-color: orange;
|
background-color: orange;
|
||||||
|
border-color: orange;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user