Skip to content

Commit c98892a

Browse files
XodTechXaempel
andcommitted
Squash merge from 'Xaempel/yaqa'
- Fixed margin in modal window - Refactored index.html Co-authored-by: Xaempel <[email protected]>
1 parent 097165c commit c98892a

2 files changed

Lines changed: 73 additions & 64 deletions

File tree

src/css/index.css

Lines changed: 65 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,63 @@ body {
99
margin: 0;
1010
}
1111

12-
footer {
13-
color: #c9c5c5;
12+
#quiz-list {
13+
position: absolute;
14+
top: 120px;
15+
left: 10px;
1416
display: flex;
15-
justify-content: center;
16-
position: fixed;
17-
bottom: 10px;
18-
margin: 5px;
19-
text-align: center;
17+
flex-direction: column;
18+
justify-content: flex-start;
19+
align-items: flex-start;
20+
width: 100vw;
21+
max-height: calc(100vh - 90px);
22+
overflow-y: auto;
23+
max-width: 300px;
2024
}
2125

22-
footer a {
23-
color: #e39471;
24-
/* text-decoration: none; */
26+
.quiz-item {
27+
margin: 10px 0;
28+
padding: 10px;
29+
border: none;
30+
border-radius: 10px;
31+
background-color: #454545;
32+
color: #ffffff;
33+
cursor: pointer;
34+
font-size: 18px;
35+
display: flex;
36+
align-items: center;
37+
width: auto;
38+
max-width: 300px;
39+
transition: background-color 0.2s ease-in-out;
40+
}
41+
42+
.quiz-item .name {
43+
margin-right: 10px;
44+
}
45+
46+
.quiz-item .delete {
47+
font-size: 24px;
48+
cursor: pointer;
49+
margin-left: 10px;
50+
color: #ff0000;
51+
transition: color 0.2s ease-in-out;
52+
}
53+
54+
.quiz-item:hover {
55+
background-color: #5c5c5c;
56+
transform: scale(1.03);
2557
}
2658

2759
.modal {
2860
background-color: #2b2b2b;
2961
padding: 20px;
3062
border-radius: 10px;
31-
box-shadow: 0 0 10px rgba(0,0,0,0.5);
63+
64+
display: flex;
65+
flex-direction: column;
66+
align-items: center;
67+
68+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
3269
width: 500px;
3370
position: absolute;
3471
z-index: 10;
@@ -37,11 +74,26 @@ footer a {
3774
animation: pop-up 0.1s ease-in-out forwards;
3875
}
3976

77+
footer {
78+
color: #c9c5c5;
79+
display: flex;
80+
justify-content: center;
81+
position: fixed;
82+
bottom: 10px;
83+
margin: 5px;
84+
text-align: center;
85+
}
86+
87+
footer a {
88+
color: #e39471;
89+
}
90+
4091
@keyframes pop-up {
4192
0% {
4293
opacity: 0;
4394
transform: scale(0.5);
4495
}
96+
4597
100% {
4698
opacity: 0.9;
4799
transform: scale(1);
@@ -52,8 +104,9 @@ footer a {
52104
position: absolute;
53105
top: 0px;
54106
left: 10px;
55-
107+
56108
}
109+
57110
.add-btn {
58111
position: absolute;
59112
top: 60px;
@@ -130,54 +183,6 @@ button[type="submit"] {
130183
padding-left: 50px;
131184
padding-right: 50px;
132185
margin-top: 10px;
133-
134-
}
135-
136-
#quiz-list {
137-
position: absolute;
138-
top: 120px;
139-
left: 10px;
140-
display: flex;
141-
flex-direction: column;
142-
justify-content: flex-start;
143-
align-items: flex-start;
144-
width: 100vw;
145-
max-height: calc(100vh - 90px);
146-
overflow-y: auto;
147-
max-width: 300px;
148-
}
149-
150-
.quiz-item {
151-
margin: 10px 0;
152-
padding: 10px;
153-
border: none;
154-
border-radius: 10px;
155-
background-color: #454545;
156-
color: #ffffff;
157-
cursor: pointer;
158-
font-size: 18px;
159-
display: flex;
160-
align-items: center;
161-
width: auto;
162-
max-width: 300px;
163-
transition: background-color 0.2s ease-in-out;
164-
}
165-
166-
.quiz-item .name {
167-
margin-right: 10px;
168-
}
169-
170-
.quiz-item .delete {
171-
font-size: 24px;
172-
cursor: pointer;
173-
margin-left: 10px;
174-
color: #ff0000;
175-
transition: color 0.2s ease-in-out;
176-
}
177-
178-
.quiz-item:hover {
179-
background-color: #5c5c5c;
180-
transform: scale(1.03);
181186
}
182187

183188
.delete:hover {

src/index.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, orientation=portrait">
6-
<title>YAQA | Yet Another Quiz App</title>
76
<meta name="description" content="Simple yet powerfull open-source quiz application that generates quizzes from JSON data">
87
<meta name="keywords" content="open source quiz, quiz generator, json quiz, simple quiz app, quiz application, open-source software">
8+
<title>YAQA | Yet Another Quiz App</title>
9+
910
<link rel="stylesheet" href="css/index.css">
1011
<link rel="stylesheet" href="css/quiz.css">
12+
1113
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
1214
<script src = "./js/main.js"></script>
1315
<script src = "./js/generators.js"></script>
@@ -27,8 +29,10 @@ <h3 id="title" class="title">YAQA by XodTech</h3>
2729
<button class="btn" type="submit" onclick="handleSubmit()">Submit</button>
2830
</div>
2931
<div id = "quiz-window" class="quiz-window"></div>
32+
33+
<footer>
34+
<span>YAQA is an <a href="https://github.com/XodTech/yaqa" target="_blank">open-source</a> project available under the terms of <a href="https://github.com/XodTech/yaqa/blob/main/LICENSE" target="_blank">AGPL 3.0 License</a></span>
35+
</footer>
3036
</body>
31-
<footer>
32-
<span>YAQA is an <a href="https://github.com/XodTech/yaqa" target="_blank">open-source</a> project available under the terms of <a href="https://github.com/XodTech/yaqa/blob/main/LICENSE" target="_blank">AGPL 3.0 License</a></span>
33-
</footer>
37+
3438
</html>

0 commit comments

Comments
 (0)