apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quiz styles

Browse Source
This commit is contained in:
Victor Batischev 2024-02-08 16:39:22 +03:00
parent 5b44a97329
commit 51ae926a2f
8 changed files with 50 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ReportForm/ReportForm.jsx
View File

@ -301,7 +301,7 @@ const ReportForm = () => {
className="report-form__footer-btn" className="report-form__footer-btn"
onClick={() => handler()} onClick={() => handler()}
> >
Отпаравить Отправить
</button> </button>
)} )}
<p className="report-form__footer-text"> <p className="report-form__footer-text">

2
src/components/StarRating/StarRating.js
View File

@ -6,7 +6,7 @@ const StarRating = ({
countStars = 1, countStars = 1,
countActiveStars = 1, countActiveStars = 1,
color = "#52B709", color = "#52B709",
size = 61 size = 40
}) => { }) => {
const [shadedStars, setShadedStars] = useState([]); const [shadedStars, setShadedStars] = useState([]);
const [noShadedStars, setNoShadedStars] = useState([]); const [noShadedStars, setNoShadedStars] = useState([]);

6
src/components/features/quiz/AlertResult.jsx
View File

@ -17,14 +17,14 @@ export const AlertResult = ({ info }) => {
className="alert-result__text" className="alert-result__text"
style={{ color: successTest ? "#52B709" : "#5B6871" }} style={{ color: successTest ? "#52B709" : "#5B6871" }}
> >
Благодарим Вас за прохождение теста "{info.questionnaire_title}". Ваши Благодарим Вас за прохождение теста "{info.questionnaire_title}".
результаты проверены, готовы пригласить Вас в команду Ваши результаты проверены, готовы пригласить Вас в команду
</div> </div>
</div> </div>
{!successTest && ( {!successTest && (
<div className="alert-result__column"> <div className="alert-result__column">
<button className="alert-result__button quiz-btn"> <button className="alert-result__button quiz-btn">
Запросить еще попытку Запросить пересдачу
</button> </button>
</div> </div>
)} )}

2
src/components/features/quiz/QuizReport.jsx
View File

@ -35,7 +35,7 @@ export const QuizReport = ({ info }) => {
</div> </div>
<div className="report__column"> <div className="report__column">
<div className="report__status-text">Статус:</div> <div className="report__status-text">Статус:</div>
<div className="report__status">Пройдено!</div> <div className="report__status">Пройден!</div>
</div> </div>
</div> </div>
</div> </div>

87
src/components/features/quiz/quiz.scss
View File

@ -425,10 +425,10 @@ $maxWidthContainer: 1123;
&__container { &__container {
display: block; display: block;
@include adaptiv-value("padding-top", 30, 20, 1); @include adaptiv-value("padding-top", 15, 15, 1);
@include adaptiv-value("padding-bottom", 30, 20, 1); @include adaptiv-value("padding-bottom", 15, 15, 1);
@include adaptiv-value("padding-right", 28, 18, 1); @include adaptiv-value("padding-right", 15, 15, 1);
@include adaptiv-value("padding-left", 28, 18, 1); @include adaptiv-value("padding-left", 15, 15, 1);
} }
&:hover { &:hover {
@ -440,8 +440,8 @@ $maxWidthContainer: 1123;
&__top-head { &__top-head {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 19px; gap: 10px;
margin: 0 0 24px 0; margin-bottom: 15px;
} }
&__title { &__title {
font-weight: 500; font-weight: 500;
@ -459,9 +459,8 @@ $maxWidthContainer: 1123;
p { p {
flex: 0 1 66%; flex: 0 1 66%;
font-weight: 700; font-weight: 500;
font-size: 12px; font-size: 13px;
line-height: 20px;
color: #000000; color: #000000;
margin-bottom: 0; margin-bottom: 0;
@ -485,7 +484,7 @@ $maxWidthContainer: 1123;
border-radius: 12px; border-radius: 12px;
padding: 13px 16px; padding: 13px 16px;
position: absolute; position: absolute;
bottom: 20px; bottom: 0px;
left: 0; left: 0;
display: flex; display: flex;
align-items: center; align-items: center;
@ -494,8 +493,7 @@ $maxWidthContainer: 1123;
gap: 10px; gap: 10px;
p { p {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 13px;
line-height: 129%;
color: #000000; color: #000000;
} }
a { a {
@ -554,27 +552,20 @@ $maxWidthContainer: 1123;
color: #52b709; color: #52b709;
} }
// .block-completed-test__text
&__text { &__text {
max-width: 386px; max-width: 386px;
margin: 0 26px 0 0; margin: 0 26px 0 0;
font-weight: 400; font-weight: 500;
font-size: 12px; font-size: 13px;
line-height: 200%;
color: #000000; color: #000000;
} }
// .block-completed-test__button
&__button { &__button {
display: block; display: block;
} }
} }
.report { .report {
// .report__row
&__row { &__row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -586,35 +577,36 @@ $maxWidthContainer: 1123;
} }
} }
// .report__column
&__column { &__column {
&:first-child { &:first-child {
background: #ffffff; background: #ffffff;
flex: 0 1 22%; flex: 0 1 22%;
border-radius: 12px; border-radius: 12px 0 0 12px;
@media (max-width: 1000px) { @media (max-width: 1000px) {
flex: 0 1 50%; flex: 0 1 50%;
} }
@media (max-width: 600px) {
border-radius: 12px 12px 0 0;
} }
height: 128px; }
border-radius: 0px 12px 0px 0px; height: 90px;
flex: 0 1 26%; flex: 0 1 26%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #e1fccf; background: #e1fccf;
gap: 21px; gap: 10px;
&:last-child { &:last-child {
flex-direction: column; border-radius: 0 12px 12px 0;
gap: 0; gap: 10px;
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
flex: 0 1 50%; flex: 0 1 50%;
} }
@media (max-width: 600px) {
border-radius: 0 0 12px 12px;
}
}
} }
// .report__job-title
&__job-title { &__job-title {
font-weight: 500; font-weight: 500;
@ -623,22 +615,17 @@ $maxWidthContainer: 1123;
color: #000000; color: #000000;
} }
// .report__value
&__value { &__value {
font-weight: 700; font-weight: 700;
font-size: 52px; font-size: 52px;
line-height: 56%; line-height: 56%;
color: #52b709; color: #52b709;
// .report__value_false
&_false { &_false {
color: #5b6871; color: #5b6871;
} }
} }
// .report__text
&__text { &__text {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -646,26 +633,20 @@ $maxWidthContainer: 1123;
color: #000000; color: #000000;
} }
// .report__status-text
&__status-text { &__status-text {
font-weight: 400; font-weight: 500;
font-size: 12px; font-size: 15px;
line-height: 200%;
color: #000000; color: #000000;
width: 50%;
} }
// .report__status
&__status { &__status {
background: #1458dd; background: #1458dd;
border-radius: 44px; border-radius: 5px;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 200%; line-height: 200%;
color: #ffffff; color: #ffffff;
padding: 7px 34px; padding: 7px 14px;
max-width: 154px; max-width: 154px;
} }
} }
@ -673,19 +654,19 @@ $maxWidthContainer: 1123;
.alert-result { .alert-result {
display: flex; display: flex;
align-items: center; align-items: center;
@include adaptiv-value("padding-top", 39, 20, 1); @include adaptiv-value("padding-top", 20, 20, 1);
@include adaptiv-value("padding-bottom", 39, 20, 1); @include adaptiv-value("padding-bottom", 20, 20, 1);
@include adaptiv-value("padding-right", 61, 20, 1); @include adaptiv-value("padding-right", 20, 20, 1);
@include adaptiv-value("padding-left", 61, 20, 1); @include adaptiv-value("padding-left", 20, 20, 1);
background: #fff; background: #fff;
gap: 30px; gap: 10px;
border-radius: 10px; border-radius: 10px;
@media (max-width: 900px) { @media (max-width: 900px) {
flex-wrap: wrap; flex-wrap: wrap;
} }
&__column { &__column {
display: flex; display: flex;
@include adaptiv-value("gap", 44, 14, 1); @include adaptiv-value("gap", 20, 20, 1);
align-items: center; align-items: center;
@media (max-width: 900px) { @media (max-width: 900px) {
flex: 1 1 auto; flex: 1 1 auto;

6
src/pages/Quiz/quiz-page.scss
View File

@ -17,12 +17,12 @@
} }
&__block { &__block {
background: #e1fccf; background: #e1fccf;
border-radius: 12px 12px 0px 0px; border-radius: 12px;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 23px;
line-height: 178%; line-height: 178%;
color: #000000; color: #000000;
padding: 20px 51px; padding: 20px;
margin: 0 0 16px 0; margin: 0 0 16px 0;
} }
&__cards-test { &__cards-test {

2
src/pages/Tracker/Tracker.jsx
View File

@ -306,7 +306,7 @@ export const Tracker = () => {
</div> </div>
<div> <div>
<img src={downloadExcel} alt="#" /> <img src={downloadExcel} alt="#" />
<p>Скачать Excel отчет</p> <p>Скачать Excel-отчет</p>
</div> </div>
</div> </div>
</div> </div>