Ajustes de layout no responsivo (6f12305a) · Commits · Gaston Morales / MCQ Quiz App · GitLab

script.js

+12 −12

Original line number	Diff line number	Diff line
		@@ -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

+62 −4

Original line number	Diff line number	Diff line
		* {
		/* 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%;