Skip to content

M
MCQ Quiz App
Commit 6f12305a authored by Gaston Morales's avatar Gaston Morales
Browse files
Options

Ajustes de layout no responsivo

parent 259e06be
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 16 deletions
script.js
View file @ 6f12305a
......@@ -85,23 +85,23 @@ nextBtn.addEventListener(
selectedThemes.forEach( (themeID) => {
let theme = themeList[themeID];
let num = (theme.maxScoreTheme == 0 ? 0 : (theme.score / theme.maxScoreTheme * 100));
table += "<tr><td class='tg-0lax'>" + theme.name + "</td>" +
"<td class='tg-0lax'>" + theme.score + "</td>" +
"<td class='tg-0lax'>" + theme.maxScoreTheme + "</td>" +
"<td class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "%</td>" +
"<td class='tg-0lax'>" + theme.answeredQuestions + "</td>" +
"<td class='tg-0lax'>" + theme.numberOfQuestions + "</td></tr>\r\n";
table += "<tr><td data-label='Tema' class='tg-0lax'>" + theme.name + "</td>" +
"<td data-label='Pontuação' class='tg-0lax'>" + theme.score + "</td>" +
"<td data-label='Pontuação Máxima' class='tg-0lax'>" + theme.maxScoreTheme + "</td>" +
"<td data-label='% Acerto' class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "%</td>" +
"<td data-label='Questões Respondidas' class='tg-0lax'>" + theme.answeredQuestions + "</td>" +
"<td data-label='Total de Questões' class='tg-0lax'>" + theme.numberOfQuestions + "</td></tr>\r\n";
});
}
else {
themeList.forEach( (theme) => {
let num = (theme.maxScoreTheme == 0 ? 0 : (theme.score / theme.maxScoreTheme * 100));
table += "<tr><td class='tg-0lax'>" + theme.name + "</td>" +
"<td class='tg-0lax'>" + theme.score + "</td>" +
"<td class='tg-0lax'>" + theme.maxScoreTheme + "</td>" +
"<td class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "%</td>" +
"<td class='tg-0lax'>" + theme.answeredQuestions + "</td>" +
"<td class='tg-0lax'>" + theme.numberOfQuestions + "</td></tr>\r\n";
table += "<tr><td data-label='Tema' class='tg-0lax'>" + theme.name + "</td>" +
"<td data-label='Pontuação' class='tg-0lax'>" + theme.score + "</td>" +
"<td data-label='Pontuação Máxima' class='tg-0lax'>" + theme.maxScoreTheme + "</td>" +
"<td data-label='% Acerto' class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "%</td>" +
"<td data-label='Questões Respondidas' class='tg-0lax'>" + theme.answeredQuestions + "</td>" +
"<td data-label='Total de Questões' class='tg-0lax'>" + theme.numberOfQuestions + "</td></tr>\r\n";
});
}
table += "</tbody>\r\n</table>\r\n";
......
style.css
View file @ 6f12305a
* {
/* padding: 0;
margin: 0; */
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
......@@ -321,9 +321,60 @@ button {
vertical-align: middle;
}
@media screen and (max-width: 767px) {
@media screen and (max-width: 600px) {
* {
font-size: 95% !important;
}
.tg {
width: auto !important;
width: 100%;
border: 0;
}
.tg .tg-0lax {
text-align: right;
}
.tg thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.tg tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
.tg td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
.tg td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
.tg td:first-child {
background-color: #979797;
}
.tg td:last-child {
border-bottom: 0;
}
.tg col {
......@@ -346,6 +397,13 @@ button {
left: 50%;
height: 90%;
}
.score-theme-container {
width: 80%;
}
.score-container {
position: unset;
margin: 10% 0;
}
#display-container {
max-width: 100%;
top: 50%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment