Merge branch 'main' of https://git.itguild.info/apuc/guild_front
debag-conflict
This commit is contained in:
@ -18,13 +18,13 @@ export const AlertResult = ({ info }) => {
|
||||
style={{ color: successTest ? "#52B709" : "#5B6871" }}
|
||||
>
|
||||
Благодарим Вас за прохождение теста "{info.questionnaire_title}". Ваши
|
||||
результаты проверены, готовы пригласить Вас в команду
|
||||
результаты проверены, мы готовы пригласить Вас в команду
|
||||
</div>
|
||||
</div>
|
||||
{!successTest && (
|
||||
<div className="alert-result__column">
|
||||
<button className="alert-result__button quiz-btn">
|
||||
Запросить еще попытку
|
||||
Запросить пересдачу
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -3,12 +3,6 @@ import React from "react";
|
||||
import StarRating from "@components/StarRating/StarRating";
|
||||
|
||||
export const QuizReport = ({ info }) => {
|
||||
function correctAnswers() {
|
||||
return info.number_questions * info.percent_correct_answers;
|
||||
}
|
||||
function correctWrongAnswers() {
|
||||
return info.number_questions * (1 - info.percent_correct_answers);
|
||||
}
|
||||
return (
|
||||
<div className="report">
|
||||
<div className="report__row">
|
||||
@ -23,19 +17,13 @@ export const QuizReport = ({ info }) => {
|
||||
</div>
|
||||
<div className="report__column">
|
||||
<div className="report__value">
|
||||
{Boolean(correctAnswers()) ? correctAnswers() : 0}
|
||||
{info.count_correct_answers}/{info.number_questions}
|
||||
</div>
|
||||
<div className="report__text">правильных ответов</div>
|
||||
</div>
|
||||
<div className="report__column">
|
||||
<div className="report__value report__value_false">
|
||||
{Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}
|
||||
</div>
|
||||
<div className="report__text">неправильных ответов</div>
|
||||
</div>
|
||||
<div className="report__column">
|
||||
<div className="report__status-text">Статус:</div>
|
||||
<div className="report__status">Пройдено!</div>
|
||||
<div className="report__status">Пройден!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -31,16 +31,14 @@ $maxWidthContainer: 1123;
|
||||
}
|
||||
.quiz-btn {
|
||||
display: flex;
|
||||
font-family: "Lab Grotesque";
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
|
||||
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
|
||||
white-space: nowrap;
|
||||
background: #406128;
|
||||
border-radius: 44px;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
//border: 2px solid #52b709;
|
||||
border: none;
|
||||
transition: 0 all ease 0.8s;
|
||||
padding: 7px 51px;
|
||||
@ -48,11 +46,6 @@ $maxWidthContainer: 1123;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
line-height: 200%;
|
||||
// &:hover{
|
||||
// text-decoration: none;
|
||||
// color: #52b709;
|
||||
// background: #fff;
|
||||
// }
|
||||
&_back {
|
||||
background: #dddddd;
|
||||
color: #000;
|
||||
@ -68,13 +61,11 @@ $maxWidthContainer: 1123;
|
||||
}
|
||||
}
|
||||
.quiz-title_h3 {
|
||||
font-family: "Lab Grotesque";
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 156%;
|
||||
color: #52b709;
|
||||
}
|
||||
//=============================================
|
||||
|
||||
.error-msg {
|
||||
text-align: center;
|
||||
@ -140,7 +131,6 @@ $maxWidthContainer: 1123;
|
||||
.form-task__group {
|
||||
display: block;
|
||||
margin-bottom: 13px;
|
||||
font-family: "Lab Grotesque";
|
||||
label {
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
@ -312,9 +302,9 @@ $maxWidthContainer: 1123;
|
||||
}
|
||||
|
||||
.card-introduction {
|
||||
padding: 0px 25px;
|
||||
padding: 0px 20px;
|
||||
margin: 0px 0px 50px 0px;
|
||||
flex: 0 1 33.333%;
|
||||
flex: 0 1 33%;
|
||||
@media (max-width: 850px) {
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
@ -324,14 +314,13 @@ $maxWidthContainer: 1123;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
&__title {
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
line-height: 171%;
|
||||
font-size: 18px;
|
||||
color: #52b709;
|
||||
margin: 0 0 30px 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&__icon {
|
||||
flex: 0 0 25px;
|
||||
@ -343,8 +332,8 @@ $maxWidthContainer: 1123;
|
||||
}
|
||||
&__text {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 200%;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
@ -352,20 +341,8 @@ $maxWidthContainer: 1123;
|
||||
.quiz-passing-information {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
&__container {
|
||||
// @media (max-width: 600px) {
|
||||
// display: block;
|
||||
// }
|
||||
// @media (max-width: 600px) {
|
||||
// display: block;
|
||||
// }
|
||||
// @media (max-width: 600px) {
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
&__main {
|
||||
//flex: 1 1 auto;
|
||||
padding: 35px 45px;
|
||||
padding: 30px;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr 1.2fr 0.6fr;
|
||||
@ -388,7 +365,7 @@ $maxWidthContainer: 1123;
|
||||
}
|
||||
&__text {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 167%;
|
||||
color: #6f6f6f;
|
||||
span {
|
||||
@ -399,7 +376,7 @@ $maxWidthContainer: 1123;
|
||||
&__timer,
|
||||
&__attempt {
|
||||
display: flex;
|
||||
gap: 23px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -448,10 +425,10 @@ $maxWidthContainer: 1123;
|
||||
|
||||
&__container {
|
||||
display: block;
|
||||
@include adaptiv-value("padding-top", 30, 20, 1);
|
||||
@include adaptiv-value("padding-bottom", 30, 20, 1);
|
||||
@include adaptiv-value("padding-right", 28, 18, 1);
|
||||
@include adaptiv-value("padding-left", 28, 18, 1);
|
||||
@include adaptiv-value("padding-top", 15, 15, 1);
|
||||
@include adaptiv-value("padding-bottom", 15, 15, 1);
|
||||
@include adaptiv-value("padding-right", 15, 15, 1);
|
||||
@include adaptiv-value("padding-left", 15, 15, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -463,8 +440,8 @@ $maxWidthContainer: 1123;
|
||||
&__top-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 19px;
|
||||
margin: 0 0 24px 0;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
@ -482,9 +459,8 @@ $maxWidthContainer: 1123;
|
||||
|
||||
p {
|
||||
flex: 0 1 66%;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #000000;
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -508,7 +484,7 @@ $maxWidthContainer: 1123;
|
||||
border-radius: 12px;
|
||||
padding: 13px 16px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -517,8 +493,7 @@ $maxWidthContainer: 1123;
|
||||
gap: 10px;
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 129%;
|
||||
font-size: 13px;
|
||||
color: #000000;
|
||||
}
|
||||
a {
|
||||
@ -545,7 +520,6 @@ $maxWidthContainer: 1123;
|
||||
.block-completed-test {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
// .block-completed-test__container
|
||||
|
||||
&__container {
|
||||
padding: 41px 35px 29px 59px;
|
||||
@ -554,8 +528,6 @@ $maxWidthContainer: 1123;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// .block-completed-test__img
|
||||
|
||||
&__img {
|
||||
flex: 0 0 54px;
|
||||
height: 60px;
|
||||
@ -567,8 +539,6 @@ $maxWidthContainer: 1123;
|
||||
}
|
||||
}
|
||||
|
||||
// .block-completed-test__title
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
@ -577,27 +547,20 @@ $maxWidthContainer: 1123;
|
||||
color: #52b709;
|
||||
}
|
||||
|
||||
// .block-completed-test__text
|
||||
|
||||
&__text {
|
||||
max-width: 386px;
|
||||
margin: 0 26px 0 0;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 200%;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
// .block-completed-test__button
|
||||
|
||||
&__button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.report {
|
||||
// .report__row
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -609,36 +572,37 @@ $maxWidthContainer: 1123;
|
||||
}
|
||||
}
|
||||
|
||||
// .report__column
|
||||
|
||||
&__column {
|
||||
&:first-child {
|
||||
background: #ffffff;
|
||||
flex: 0 1 22%;
|
||||
border-radius: 12px;
|
||||
flex: 0 1 40%;
|
||||
border-radius: 12px 0 0 12px;
|
||||
@media (max-width: 1000px) {
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
}
|
||||
height: 128px;
|
||||
border-radius: 0px 12px 0px 0px;
|
||||
flex: 0 1 26%;
|
||||
height: 90px;
|
||||
flex: 0 1 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #e1fccf;
|
||||
gap: 21px;
|
||||
gap: 10px;
|
||||
&:last-child {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
flex: 0 1 50%;
|
||||
border-radius: 0 12px 12px 0;
|
||||
gap: 10px;
|
||||
@media (max-width: 1000px) {
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .report__job-title
|
||||
|
||||
&__job-title {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
@ -646,22 +610,17 @@ $maxWidthContainer: 1123;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
// .report__value
|
||||
|
||||
&__value {
|
||||
font-weight: 700;
|
||||
font-size: 52px;
|
||||
line-height: 56%;
|
||||
color: #52b709;
|
||||
// .report__value_false
|
||||
|
||||
&_false {
|
||||
color: #5b6871;
|
||||
}
|
||||
}
|
||||
|
||||
// .report__text
|
||||
|
||||
&__text {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@ -669,26 +628,20 @@ $maxWidthContainer: 1123;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
// .report__status-text
|
||||
|
||||
&__status-text {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 200%;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
// .report__status
|
||||
|
||||
&__status {
|
||||
background: #1458dd;
|
||||
border-radius: 44px;
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 200%;
|
||||
color: #ffffff;
|
||||
padding: 7px 34px;
|
||||
padding: 7px 14px;
|
||||
max-width: 154px;
|
||||
}
|
||||
}
|
||||
@ -696,19 +649,19 @@ $maxWidthContainer: 1123;
|
||||
.alert-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include adaptiv-value("padding-top", 39, 20, 1);
|
||||
@include adaptiv-value("padding-bottom", 39, 20, 1);
|
||||
@include adaptiv-value("padding-right", 61, 20, 1);
|
||||
@include adaptiv-value("padding-left", 61, 20, 1);
|
||||
@include adaptiv-value("padding-top", 20, 20, 1);
|
||||
@include adaptiv-value("padding-bottom", 20, 20, 1);
|
||||
@include adaptiv-value("padding-right", 20, 20, 1);
|
||||
@include adaptiv-value("padding-left", 20, 20, 1);
|
||||
background: #fff;
|
||||
gap: 30px;
|
||||
gap: 10px;
|
||||
border-radius: 10px;
|
||||
@media (max-width: 900px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&__column {
|
||||
display: flex;
|
||||
@include adaptiv-value("gap", 44, 14, 1);
|
||||
@include adaptiv-value("gap", 20, 20, 1);
|
||||
align-items: center;
|
||||
@media (max-width: 900px) {
|
||||
flex: 1 1 auto;
|
||||
|
||||
Reference in New Issue
Block a user