fix quiz and tracker modal styles

This commit is contained in:
Victor Batischev 2024-02-08 15:42:08 +03:00
parent 81d2ee4098
commit 5b44a97329
9 changed files with 31 additions and 60 deletions

View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -5,7 +5,6 @@ import "./modalSelect.scss";
export const ModalSelect = ({ active, children }) => { export const ModalSelect = ({ active, children }) => {
return ( return (
<div className={active ? "project__settings active" : "project__settings "}> <div className={active ? "project__settings active" : "project__settings "}>
<span className="project__settings-ellipsis">...</span>
{children} {children}
</div> </div>
); );

View File

@ -1,29 +1,30 @@
.project { .project {
&__settings { &__settings {
position: absolute; position: absolute;
padding: 32px 23px 10px 11px; padding: 0 10px;
background: #e1fccf; background: #e1fccf;
border-radius: 12px; border-radius: 12px;
transform: scale(0); transform: scale(0);
bottom: -40px; bottom: -30px;
right: -120px; right: -130px;
@media (max-width: 1050px) { @media (max-width: 1050px) {
right: 10px; right: 5px;
padding-top: 10px; bottom: -30px;
bottom: -75px;
} }
&-menu { &-menu {
font-size: 14px; font-size: 14px;
line-height: 38px; padding: 5px 0;
div { div {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 2px 0;
img { img {
margin-right: 12px; width: 12px;
margin-right: 5px;
} }
p:hover { p:hover {

View File

@ -109,7 +109,7 @@ export const ProjectTicket = ({ project, index }) => {
to={`/profile/statistics/${project.id}`} to={`/profile/statistics/${project.id}`}
className="project__statistics" className="project__statistics"
> >
Просмотреть статистику Посмотреть статистику
</Link> </Link>
<TrackerModal <TrackerModal
@ -133,7 +133,7 @@ export const ProjectTicket = ({ project, index }) => {
</div> </div>
<div> <div>
<img src={link}></img> <img src={link}></img>
<p onClick={copyProjectLink(project.id)}>ссылка на проект</p> <p onClick={copyProjectLink(project.id)}>скопировать ссылку</p>
</div> </div>
<div <div
onClick={() => { onClick={() => {

View File

@ -80,8 +80,8 @@
position: absolute; position: absolute;
font-size: 21px; font-size: 21px;
color: #6f6f6f; color: #6f6f6f;
right: 26px; right: 15px;
top: 10px; top: 0px;
} }
&__avatar { &__avatar {

View File

@ -31,16 +31,14 @@ $maxWidthContainer: 1123;
} }
.quiz-btn { .quiz-btn {
display: flex; display: flex;
font-family: "Lab Grotesque";
align-items: center; align-items: center;
justify-content: 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; white-space: nowrap;
background: #406128; background: #406128;
border-radius: 44px; border-radius: 44px;
color: #fff; color: #fff;
outline: none; outline: none;
//border: 2px solid #52b709;
border: none; border: none;
transition: 0 all ease 0.8s; transition: 0 all ease 0.8s;
padding: 7px 51px; padding: 7px 51px;
@ -48,11 +46,6 @@ $maxWidthContainer: 1123;
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
line-height: 200%; line-height: 200%;
// &:hover{
// text-decoration: none;
// color: #52b709;
// background: #fff;
// }
&_back { &_back {
background: #dddddd; background: #dddddd;
color: #000; color: #000;
@ -68,13 +61,11 @@ $maxWidthContainer: 1123;
} }
} }
.quiz-title_h3 { .quiz-title_h3 {
font-family: "Lab Grotesque";
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 156%; line-height: 156%;
color: #52b709; color: #52b709;
} }
//=============================================
.error-msg { .error-msg {
text-align: center; text-align: center;
@ -140,7 +131,6 @@ $maxWidthContainer: 1123;
.form-task__group { .form-task__group {
display: block; display: block;
margin-bottom: 13px; margin-bottom: 13px;
font-family: "Lab Grotesque";
label { label {
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
@ -312,9 +302,9 @@ $maxWidthContainer: 1123;
} }
.card-introduction { .card-introduction {
padding: 0px 25px; padding: 0px 20px;
margin: 0px 0px 50px 0px; margin: 0px 0px 50px 0px;
flex: 0 1 33.333%; flex: 0 1 33%;
@media (max-width: 850px) { @media (max-width: 850px) {
flex: 0 1 50%; flex: 0 1 50%;
} }
@ -324,14 +314,13 @@ $maxWidthContainer: 1123;
&__body { &__body {
display: flex; display: flex;
gap: 20px; gap: 10px;
} }
&__title { &__title {
font-weight: 900; font-weight: 900;
font-size: 14px; font-size: 18px;
line-height: 171%;
color: #52b709; color: #52b709;
margin: 0 0 30px 0; margin-bottom: 10px;
} }
&__icon { &__icon {
flex: 0 0 25px; flex: 0 0 25px;
@ -343,8 +332,8 @@ $maxWidthContainer: 1123;
} }
&__text { &__text {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 15px;
line-height: 200%; line-height: 20px;
color: #000000; color: #000000;
} }
} }
@ -352,20 +341,8 @@ $maxWidthContainer: 1123;
.quiz-passing-information { .quiz-passing-information {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 12px;
&__container {
// @media (max-width: 600px) {
// display: block;
// }
// @media (max-width: 600px) {
// display: block;
// }
// @media (max-width: 600px) {
// display: block;
// }
}
&__main { &__main {
//flex: 1 1 auto; padding: 30px;
padding: 35px 45px;
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1.2fr 1.2fr 0.6fr; grid-template-columns: 1fr 1.2fr 1.2fr 0.6fr;
@ -388,7 +365,7 @@ $maxWidthContainer: 1123;
} }
&__text { &__text {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 14px;
line-height: 167%; line-height: 167%;
color: #6f6f6f; color: #6f6f6f;
span { span {
@ -399,7 +376,7 @@ $maxWidthContainer: 1123;
&__timer, &__timer,
&__attempt { &__attempt {
display: flex; display: flex;
gap: 23px; gap: 10px;
align-items: center; align-items: center;
} }

View File

@ -70,7 +70,7 @@ export const ProfileCandidate = () => {
<div className="profile-candidate__instructions instructions-candidate"> <div className="profile-candidate__instructions instructions-candidate">
<div className="instructions-candidate__container"> <div className="instructions-candidate__container">
<div className="instructions-candidate___row"> <div className="instructions-candidate___row">
<div className="instructions-candidate__title">Интсрукция:</div> <div className="instructions-candidate__title">Инструкция:</div>
<div className="instructions-candidate__note"> <div className="instructions-candidate__note">
<img <img
className="instructions-candidate__icon" className="instructions-candidate__icon"
@ -93,7 +93,7 @@ export const ProfileCandidate = () => {
alt="" alt=""
/> />
<div className="instructions-candidate__text"> <div className="instructions-candidate__text">
Тесты itguild предназначены для того, чтобы подтверждать Тесты ITguild предназначены для того, чтобы подтверждать
навыки, которые вы указали у себя. навыки, которые вы указали у себя.
</div> </div>
</div> </div>

View File

@ -10,7 +10,6 @@ import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation"; import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest"; import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest";
import { CardIntroduction } from "@components/features/quiz/Card-introduction"; import { CardIntroduction } from "@components/features/quiz/Card-introduction";
import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-information"; import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-information";
@ -43,12 +42,12 @@ export const PassingTests = () => {
{ {
title: "Зачем?", title: "Зачем?",
description: description:
"Тесты itguild предназначены для того, чтобы подтверждать навыки, которые вы указали у себя." "Тесты ITguild предназначены для того, чтобы подтверждать навыки, которые вы указали у себя."
}, },
{ {
title: "Почему именно тестирование?", title: "Почему именно тестирование?",
description: description:
"Тесты itguild заменяют первое техническое собеседование по любой вакансии." "Тесты ITguild заменяют первое техническое собеседование по любой вакансии."
}, },
{ {
title: "Какие тесты нужно проходить?", title: "Какие тесты нужно проходить?",
@ -138,11 +137,6 @@ export const PassingTests = () => {
)} )}
</div> </div>
<Footer /> <Footer />
{/*<Prompt*/}
{/* when={showPrompt}*/}
{/* message="Unsaved changes detected, continue?"*/}
{/* beforeUnload={true}*/}
{/*/>*/}
</div> </div>
); );
}; };

View File

@ -33,7 +33,7 @@ import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg"; import tasks from "assets/icons/trackerTasks.svg";
import archive from "assets/images/archiveIcon.png"; import archive from "assets/images/archiveIcon.png";
import mockAvatar from "assets/images/avatarMok.png"; import mockAvatar from "assets/images/avatarMok.png";
import downloadExel from "assets/images/downloadExel.svg"; import downloadExcel from "assets/images/downloadExcel.svg";
import noProjects from "assets/images/noProjects.png"; import noProjects from "assets/images/noProjects.png";
import statusTimeTask from "assets/images/statusTimeTask.svg"; import statusTimeTask from "assets/images/statusTimeTask.svg";
@ -305,8 +305,8 @@ export const Tracker = () => {
<p>Сверка пройдена</p> <p>Сверка пройдена</p>
</div> </div>
<div> <div>
<img src={downloadExel} alt="#" /> <img src={downloadExcel} alt="#" />
<p>Скачать Exel отчет</p> <p>Скачать Excel отчет</p>
</div> </div>
</div> </div>
</div> </div>