Skip to content

K
kus-admin
Commit ce04e4b4 by Иван Кубота
Options

Merge branch 'm3' of gitlab.quokka.pub:Zibx/kus-admin into m3

parents 2a07b202 88dd91b9
Showing with 794 additions and 43 deletions
public/uploads/images/correct.svg 0 → 100644
<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4.5L4.21429 8L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
public/uploads/images/incorrect.svg 0 → 100644
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.61108 1.2295L1.22724 7.61169C0.906455 7.9324 0.906455 8.45237 1.22724 8.77307C1.54803 9.09378 2.06813 9.09378 2.38892 8.77307L8.77276 2.39088C9.09354 2.07017 9.09355 1.5502 8.77276 1.2295C8.45197 0.908792 7.93187 0.908792 7.61108 1.2295Z" fill="white" stroke="white" stroke-width="0.5"/>
<path d="M8.77276 7.60913L2.38892 1.22693C2.06813 0.906223 1.54803 0.906223 1.22724 1.22693C0.906455 1.54763 0.906454 2.0676 1.22724 2.38831L7.61108 8.7705C7.93187 9.09121 8.45197 9.09121 8.77276 8.7705C9.09355 8.4498 9.09355 7.92983 8.77276 7.60913Z" fill="white" stroke="white" stroke-width="0.5"/>
</svg>
src/svg/icon-questions.svg 0 → 100644
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="45" cy="45" r="43.5" fill="white" stroke="#006C43" stroke-width="3"/>
<path d="M40.4989 23.4947L69.333 32.264C70.1256 32.5051 70.5729 33.3431 70.3322 34.1357L59.2087 70.7602C58.968 71.5529 58.1303 72 57.3377 71.759L28.5036 62.9897C27.711 62.7486 27.2637 61.9106 27.5044 61.1179L38.6279 24.4935C38.8687 23.7008 39.7063 23.2536 40.4989 23.4947Z" fill="white" stroke="#006C43" stroke-width="3"/>
<path d="M30.0092 25.3322L61.724 25.1484C62.5524 25.1436 63.2281 25.8112 63.2332 26.6396L63.4815 66.8476C63.4866 67.676 62.8192 68.3515 61.9908 68.3563L30.276 68.5401C29.4476 68.5449 28.7719 67.8773 28.7668 67.0488L28.5185 26.8408C28.5134 26.0124 29.1808 25.337 30.0092 25.3322Z" fill="white" stroke="#006C43" stroke-width="3"/>
<path d="M50.6963 21.4771C50.5219 19.2139 48.6159 17.4461 46.2996 17.4621C43.9833 17.4781 42.111 19.268 41.962 21.5283L36.7345 21.5571L36.7911 26.9566L55.9804 26.8478L55.9238 21.4483L50.6963 21.4771ZM46.3363 23.0814C45.4563 23.09 44.7403 22.3852 44.7319 21.4958C44.7229 20.6192 45.4303 19.9064 46.3232 19.8984C47.2033 19.8897 47.9193 20.5946 47.9277 21.484C47.9367 22.3605 47.2293 23.0733 46.3363 23.0814Z" fill="#006C43"/>
<path d="M40.1242 37.29C40.8068 36.1591 40.4397 34.6905 39.3044 34.0097C38.1691 33.3289 36.6954 33.6937 36.0128 34.8245C35.3302 35.9553 35.6972 37.424 36.8325 38.1048C37.9679 38.7856 39.4416 38.4208 40.1242 37.29Z" fill="#D2E744"/>
<path d="M38.067 49.8364C39.3913 49.8812 40.501 48.8484 40.5455 47.5293C40.5901 46.2103 39.5526 45.1047 38.2283 45.0598C36.904 45.0149 35.7943 46.0478 35.7498 47.3668C35.7052 48.6858 36.7427 49.7915 38.067 49.8364Z" fill="#D2E744"/>
<path d="M40.5876 59.0009C40.7534 57.6916 39.8222 56.4959 38.5076 56.3302C37.193 56.1645 35.9929 57.0916 35.827 58.4008C35.6612 59.7101 36.5924 60.9058 37.907 61.0715C39.2216 61.2372 40.4217 60.3102 40.5876 59.0009Z" fill="#D2E744"/>
<path d="M38.0689 37.7922L36.2486 35.9946L37.2589 34.9774L38.0584 35.7546L40.6281 33.1593L41.6634 34.1667L38.0689 37.7922Z" fill="#006C43"/>
<path d="M38.139 49.0334L36.3186 47.2358L37.329 46.2187L38.1284 46.9958L40.6981 44.4005L41.7334 45.4079L38.139 49.0334Z" fill="#006C43"/>
<path d="M38.2092 60.2746L36.3882 58.4906L37.3992 57.4599L38.198 58.2507L40.7683 55.6417L41.803 56.6627L38.2092 60.2746Z" fill="#006C43"/>
<path d="M49.744 33.0628L44.3785 33.0939C44.0202 33.096 43.7317 33.388 43.7339 33.7463C43.7361 34.1045 44.0283 34.3932 44.3865 34.3911L49.7521 34.36C50.1103 34.3579 50.3989 34.0659 50.3967 33.7076C50.3944 33.3494 50.1023 33.0607 49.744 33.0628Z" fill="#006C43"/>
<path d="M55.8755 35.3125L44.3956 35.3791C44.0373 35.3811 43.7487 35.6732 43.751 36.0314C43.7532 36.3896 44.0453 36.6783 44.4036 36.6763L55.8836 36.6097C56.2418 36.6076 56.5304 36.3156 56.5282 35.9574C56.5259 35.5991 56.2338 35.3104 55.8755 35.3125Z" fill="#006C43"/>
<path d="M55.8882 37.5821L44.4082 37.6486C44.05 37.6507 43.7614 37.9427 43.7636 38.3009C43.7659 38.6592 44.058 38.9479 44.4163 38.9458L55.8962 38.8793C56.2545 38.8772 56.5431 38.5851 56.5408 38.2269C56.5386 37.8687 56.2464 37.58 55.8882 37.5821Z" fill="#006C43"/>
<path d="M49.8208 44.4534L44.4552 44.4845C44.097 44.4866 43.8084 44.7787 43.8106 45.1369C43.8129 45.4951 44.105 45.7838 44.4633 45.7817L49.8288 45.7506C50.1871 45.7486 50.4756 45.4565 50.4734 45.0983C50.4712 44.7401 50.179 44.4513 49.8208 44.4534Z" fill="#006C43"/>
<path d="M55.9388 46.6904L44.4588 46.757C44.1006 46.7591 43.812 47.0511 43.8142 47.4093C43.8164 47.7676 44.1086 48.0563 44.4668 48.0542L55.9468 47.9876C56.305 47.9856 56.5936 47.6935 56.5914 47.3353C56.5892 46.9771 56.297 46.6884 55.9388 46.6904Z" fill="#006C43"/>
<path d="M55.965 48.96L44.485 49.0265C44.1268 49.0286 43.8382 49.3207 43.8404 49.6789C43.8426 50.0371 44.1348 50.3258 44.493 50.3237L55.973 50.2572C56.3312 50.2551 56.6198 49.963 56.6176 49.6048C56.6154 49.2466 56.3232 48.9579 55.965 48.96Z" fill="#006C43"/>
<path d="M49.8899 55.7083L44.5243 55.7394C44.1661 55.7415 43.8775 56.0336 43.8797 56.3918C43.8819 56.75 44.1741 57.0387 44.5323 57.0366L49.8979 57.0055C50.2561 57.0034 50.5447 56.7114 50.5425 56.3531C50.5403 55.9949 50.2481 55.7062 49.8899 55.7083Z" fill="#006C43"/>
<path d="M56.0215 57.958L44.5415 58.0246C44.1833 58.0266 43.8947 58.3187 43.8969 58.6769C43.8992 59.0351 44.1913 59.3238 44.5496 59.3218L56.0295 59.2552C56.3878 59.2532 56.6764 58.9611 56.6741 58.6029C56.6719 58.2447 56.3798 57.956 56.0215 57.958Z" fill="#006C43"/>
<path d="M56.0339 60.2285L44.5539 60.2951C44.1957 60.2971 43.9071 60.5892 43.9093 60.9474C43.9115 61.3056 44.2037 61.5944 44.5619 61.5923L56.0419 61.5257C56.4001 61.5237 56.6887 61.2316 56.6865 60.8734C56.6843 60.5152 56.3921 60.2265 56.0339 60.2285Z" fill="#006C43"/>
</svg>
src/svg/icon-test.svg 0 → 100644
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="45" cy="45" r="43.5" fill="white" stroke="#EC7B3F" stroke-width="3"/>
<path d="M45 46.5625C50.1781 46.5625 54.375 42.3656 54.375 37.1875C54.375 32.0094 50.1781 27.8125 45 27.8125C39.8219 27.8125 35.625 32.0094 35.625 37.1875C35.6795 42.3656 39.8765 46.5625 45 46.5625ZM45 30.3198C48.8154 30.3198 51.8677 33.4266 51.8677 37.1875C51.8677 41.0029 48.7609 44.0552 45 44.0552C41.2391 44.0552 38.1323 40.9484 38.1323 37.1875C38.1323 33.4266 41.2391 30.3198 45 30.3198Z" fill="#EC7B3F"/>
<path d="M43.9419 39.9782C44.1524 40.2539 44.4682 40.3642 44.8366 40.3642C45.1524 40.3642 45.4682 40.1988 45.7314 39.9782L49.0998 36.173C49.5735 35.6767 49.5208 34.8495 49.0471 34.4083C48.5735 33.912 47.784 33.9671 47.3629 34.4635L44.8366 37.276L43.9419 36.2282C43.4682 35.7318 42.7314 35.6767 42.2577 36.173C41.784 36.6693 41.7314 37.4414 42.205 37.9377L43.9419 39.9782Z" fill="#EC7B3F"/>
<path d="M67.7895 51.7831H59.7895V22.261C59.7895 21.0478 58.8421 20 57.6316 20H24.5263C23.3158 20 22.3158 21.0478 22.3158 22.261V29.8346H21.2105C20.5263 29.8346 20 30.386 20 31.1029C20 31.8199 20.5263 32.3713 21.2105 32.3713H22.3684V39.0993H21.2105C20.5263 39.0993 20 39.6507 20 40.3676C20 41.0846 20.5263 41.636 21.2105 41.636H22.3684V48.364H21.2105C20.5263 48.364 20 48.9154 20 49.6324C20 50.3493 20.5263 50.9007 21.2105 50.9007H22.3684V57.6287H21.2105C20.5263 57.6287 20 58.1801 20 58.8971C20 59.614 20.5263 60.1654 21.2105 60.1654H22.3684V67.6838C22.3684 68.9522 23.3684 70 24.5789 70H57.6316C58.8421 70 59.7895 68.9522 59.7895 67.6838V61.4338H67.7895C69 61.4338 70 60.386 70 59.1176V54.1544C70 52.8309 69 51.7831 67.7895 51.7831ZM42.3684 58.8419L38.9474 56.5809L42.3158 54.3199H44.1053V58.8971H42.3684V58.8419ZM46.5263 54.2647L62.2632 54.1544V58.8419H46.5263V54.2647ZM24.7368 60.0551H25.8947C26.5789 60.0551 27.1053 59.5037 27.1053 58.7868C27.1053 58.0699 26.5789 57.5184 25.8947 57.5184H24.7368V50.8456H25.8947C26.5789 50.8456 27.1053 50.2941 27.1053 49.5772C27.1053 48.8603 26.5789 48.3088 25.8947 48.3088H24.7368V41.5809H25.8947C26.5789 41.5809 27.1053 41.0294 27.1053 40.3125C27.1053 39.5956 26.5789 39.0441 25.8947 39.0441H24.7368V32.3162H25.8947C26.5789 32.3162 27.1053 31.7647 27.1053 31.0478C27.1053 30.3309 26.5789 29.7794 25.8947 29.7794H24.7368V22.4816H29.6842V67.3529H24.7368V60.0551ZM57.4211 67.4081H32.1579V22.4816H57.4211V51.7831H42.3158C41.8947 51.7831 41.4737 51.8934 41.1579 52.114L37.4211 54.5956C36.7895 55.0368 36.3684 55.7537 36.3684 56.5809C36.3684 57.4081 36.7368 58.125 37.4211 58.5662L41.1579 61.0478C41.5263 61.2684 41.8947 61.3787 42.3158 61.3787H57.3684V67.4081H57.4211ZM64.6842 58.8419V54.0993H67.5789L67.7895 58.8419H64.6842Z" fill="#EC7B3F"/>
</svg>
src/view/block/questionBlock/QuestionBlock.jsx
import './questionBlock.scss';
import Button from '../../cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
import LinkIcon from '/svg/link.svg';
const QuestionBlock = D.declare('view.block.QuestionBlock', () => {
return <div class="question-block">
......@@ -9,38 +11,62 @@ const QuestionBlock = D.declare('view.block.QuestionBlock', () => {
<div className="question-block__text">
<ul className="question-block__options">
<li className="question-block__option">
<label className="radio-button">
<input type="radio" name="group" className="radio-button__field"/>
<span className="radio-button__indicator"></span>
<span className="radio-button__desc">Вареная сгущенка</span>
<label className="picker-button">
<input type="radio" name="group" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Вареная сгущенка</span>
</label>
</li>
<li className="question-block__option">
<label className="radio-button">
<input type="radio" name="group" className="radio-button__field"/>
<span className="radio-button__indicator"></span>
<span className="radio-button__desc">Мука</span>
<label className="picker-button">
<input type="radio" name="group" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Мука</span>
</label>
</li>
<li className="question-block__option">
<label className="checkbox">
<input type="checkbox" className="checkbox__field"/>
<span className="checkbox__indicator"></span>
<span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
<label className="picker-button picker-button--correct">
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Вареная сгущенка <b>Это верный ответ</b><a class="picker-button__link" href="#" aria-label="Просмотр карточки"><LinkIcon width="32" height="32"/></a></span>
</label>
</li>
<li className="question-block__option">
<label className="checkbox">
<input type="checkbox" className="checkbox__field"/>
<span className="checkbox__indicator"></span>
<span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
<label className="picker-button picker-button--incorrect">
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Вареная сгущенка <b>Этот ответ был выбран неверно</b></span>
</label>
</li>
<li className="question-block__option">
<label className="checkbox">
<input type="checkbox" className="checkbox__field"/>
<span className="checkbox__indicator"></span>
<span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
<label className="picker-button picker-button--multiple">
<input type="checkbox" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
<li className="question-block__option">
<label className="picker-button picker-button--multiple">
<input type="checkbox" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
<li className="question-block__option">
<label className="picker-button picker-button--multiple">
<input type="checkbox" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
<li className="question-block__option">
<label className="picker-button picker-button--multiple picker-button--correct">
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
<li className="question-block__option">
<label className="picker-button picker-button--multiple picker-button--incorrect">
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
</ul>
......
src/view/block/questionBlock/questionBlock.scss
.question-block__title {
@include headline;
margin: 0 0 15px;
}
.question-block__notify {
@include mainBodyText;
margin: 0 0 25px;
}
.question-block__body {
display: flex;
align-items: flex-start;
}
.question-block__text {
margin-right: 50px;
min-width: calc(50% - 25px);
}
.question-block__image {
flex: none;
margin-top: -10px;
margin-left: auto;
width: calc(50% - 25px);
}
.question-block__image-wrapper {
position: relative;
padding-top: 59%;
background-image: linear-gradient(180deg, #FFFFFF 0%, #D1D1D1 125.35%);;
border: 5px solid $bg-main;
border-radius: 10px;
overflow: hidden;
}
.question-block__image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.question-block__options {
@include list-reset;
margin-bottom: 42px;
}
.question-block__option {
margin-bottom: 10px;
}
.question-block__option:last-child {
margin-bottom: 0;
}
.picker-button {
position: relative;
display: block;
box-sizing: border-box;
padding: 5px 0 0 50px;
min-height: 39px;
cursor: pointer;
&__desc {
@include bodyText;
display: block;
}
&__indicator {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 30px;
height: 30px;
background-color: $bg-main;
background-repeat: no-repeat;
background-position: center;
background-size: 9px auto;
border: 2px solid #C9C7C7;
border-radius: 50%;
transition: border-color 0.3s ease;
&::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background-color: $accent-main;
background-repeat: no-repeat;
background-position: center;
background-size: 9px auto;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
}
&__field {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
&:checked + .picker-button__indicator {
border-color: $accent-main;
&::after {
opacity: 1;
}
}
}
&__link {
@include hover;
transform: translateY(-5px);
display: inline-block;
vertical-align: top;
margin-left: 15px;
color: $accent-dark;
}
&--multiple {
.picker-button__indicator {
border-radius: 6px;
&::after {
border-radius: 3px;
}
}
}
&--disabled {
cursor: default;
pointer-events: none;
.picker-button__desc {
color: rgba(201, 199, 199, 0.5);
}
}
&--correct {
cursor: default;
.picker-button__desc {
color: $accent-main;
}
.picker-button__indicator {
background-color: $accent-main;
background-image: url("/uploads/images/correct.svg");
border-color: $accent-main;
cursor: default;
&::after {
opacity: 0;
}
}
}
&--incorrect {
cursor: default;
.picker-button__desc {
color: $red;
pointer-events: none;
}
.picker-button__indicator {
background-color: $red;
background-image: url("/uploads/images/incorrect.svg");
border-color: $red;
cursor: default;
&::after {
opacity: 0;
}
}
}
.picker-button__desc b {
font-weight: 500;
color: $text-main;
}
}
src/view/cmp/button/button.scss
......@@ -121,10 +121,36 @@
}
}
.button--thirdery {
background: $persimmon;
color: #fff
.button-orange {
color: $bg-main;
background-color: $persimmon;
border-color: $persimmon;
@media (max-width: $mobile) {
font-size: 16px;
}
&:hover,
&:active {
color: $bg-main;
background-color: darken($persimmon, 10%);
border-color: darken($persimmon, 10%);
}
&:focus {
color: $bg-main;
background-color: $persimmon;
border-color: lighten($persimmon, 10%);
outline: none;
}
&:disabled {
color: $bg-main;
background-color: $gray-medium;
border-color: $gray-medium;
}
}
.button--bordered {
padding: 5px 44px;
min-width: 200px;
......
src/view/cmp/categoryCard/CategoryCard.jsx 0 → 100644
import './categoryCard.scss';
const CategoryCard = D.declare('view.cmp.CategoryCard', () => {
return <div class="category-card">
<div className="category-card__body">
<div className="category-card__image">
<img src="/uploads/images/pict1.jpg" alt=""/>
</div>
<h3 className="category-card__title">Топ-35</h3>
</div>
<div className="category-card__footer">
<p>Карточек: <b>35</b></p>
<p>Просмотрено: <em>3</em>&nbsp;|&nbsp;<i>32</i></p>
</div>
</div>
})
export default CategoryCard;
export {CategoryCard};
src/view/cmp/categoryCard/categoryCard.scss 0 → 100644
.category-card {
display: flex;
flex-direction: column;
flex-grow: 1;
box-sizing: border-box;
width: 190px;
min-height: 230px;
max-width: 100%;
background-color: $bg-main;
border: 1px solid transparent;
border-radius: 8px;
box-shadow: 5px 0 30px 0 #CECECE;
transition: all 0.3s ease;
cursor: pointer;
@media (max-width: $mobile) {
width: 160px;
min-height: 210px;
}
&:hover,
&:focus {
border-color: $accent-main;
}
&:active {
box-shadow: 0 0 20px 0 rgba(#CECECE, 0.5);
}
}
.category-card__body {
margin-bottom: auto;
padding: 10px 10px 0;
text-align: center;
}
.category-card__image {
position: relative;
margin-bottom: -3px;
width: 100%;
height: 110px;
background-color: #DFDFDF;
background-image: url("/uploads/images/no_picture.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 6px;
overflow: hidden;
@media (max-width: $mobile) {
margin-bottom: 0;
height: 90px;
}
}
.category-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.category-card__title {
display: flex;
flex-direction: column;
justify-content: center;
margin: 8px auto;
max-width: 120px;
min-height: 34px;
text-align: center;
font-weight: 700;
font-size: 16px;
line-height: 17px;
color: $text-main;
word-break: break-word;
}
.category-card__footer {
@include caption;
padding: 7px 10px 16px;
color: #828282;
border-top: 1px solid #e0e0e0;
@media (max-width: $mobile) {
margin-top: -3px;
padding: 15px 10px 8px;
font-weight: 400;
font-size: 12px;
line-height: 17px;
letter-spacing: 0.01em;
}
}
.category-card__footer p {
margin: 0 0 3px;
}
.category-card__footer p:last-child {
margin-bottom: 0;
}
.category-card__footer b {
font-weight: 500;
color: $text-main;
@media (max-width: $mobile) {
font-weight: 400;
}
}
.category-card__footer em {
font-style: normal;
color: $accent-main;
}
.category-card__footer i {
font-style: normal;
color: $red;
}
src/view/cmp/infoCard/infoCard.scss
......@@ -19,6 +19,10 @@
@include title;
margin: 0 0 5px;
text-align: center;
@media (max-width: $mobile) {
text-align: left;
}
}
.info-card__category {
......@@ -32,6 +36,7 @@
@media (max-width: $mobile) {
margin-bottom: 17px;
text-align: left;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
......
src/view/cmp/productCard/productCard.scss
......@@ -52,7 +52,7 @@
}
.product-card__list {
max-width: calc(100% - 350px);
max-width: calc(100% - 380px);
@media (max-width: $mobile) {
box-sizing: border-box;
......
src/view/cmp/quizProgress/QuizProgress.jsx
......@@ -4,13 +4,13 @@ import ForwardArr from '/svg/forward.svg';
const QuizProgress = D.declare('view.cmp.QuizProgress', () => {
return <div class="quiz-progress">
<button class="quiz-progress__control quiz-progress__control--back quiz-progress__control--disabled" type="button" aria-label="Перейти к предыдущему вопросу">
<ForwardArr width="9" height="16"/>
<ForwardArr width="11" height="18"/>
</button>
<ul className="quiz-progress__list">
{(()=>{
var out = [];
var el;
for (var i = 0; i < 30; i++) {
for (var i = 0; i < 19; i++) {
var arr = ['quiz-progress__item'];
if (i < 5) {
arr.push('quiz-progress__item--disabled');
......@@ -34,8 +34,8 @@ const QuizProgress = D.declare('view.cmp.QuizProgress', () => {
return out;
})()}
</ul>
<button class="quiz-progress__control quiz-progress__control--forward quiz-progress__control--disabled" type="button" aria-label="Перейти к следующему вопросу">
<ForwardArr width="9" height="16"/>
<button class="quiz-progress__control quiz-progress__control--forward" type="button" aria-label="Перейти к следующему вопросу">
<ForwardArr width="11" height="18"/>
</button>
</div>
})
......
src/view/cmp/quizProgress/quizProgress.scss
.quiz-progress {
display: flex;
max-width: 100%;
color: $text-main;
background-color: $bg-main;
border: 1px solid #D0D0D0;
border-radius: 25px;
}
.quiz-progress__list {
......@@ -9,8 +13,61 @@
}
.quiz-progress__item {
flex: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: -1px 4px -1px 0;
width: 50px;
height: 50px;
text-align: center;
font-weight: 600;
font-size: 18px;
line-height: 22px;
border: 2px solid transparent;
border-radius: 25px;
cursor: pointer;
}
.quiz-progress__item--disabled {
color: #C9C7C7;
}
.quiz-progress__item--true {
color: $accent-main;
}
.quiz-progress__item--false {
color: $red;
}
.quiz-progress__item--true.quiz-progress__item--current {
color: $text-main;
border-color: $accent-main;
box-shadow: 2px 1px 5px #BEDDD1;
}
.quiz-progress__item--false.quiz-progress__item--current {
color: $red;
border-color: $red;
box-shadow: 2px 1px 5px #DDBEBE;
}
.quiz-progress__control {
@include btn-reset;
@include hover;
flex: none;
width: 56px;
border-radius: 25px;
}
.quiz-progress__control--back svg {
transform: scale(-1,1);
}
.quiz-progress__control--disabled {
display: none;
}
src/view/page/account/welcomePage.scss
......@@ -246,5 +246,102 @@
}
button.welcome-page__button--wide {
padding-left: 20px;
min-width: 275px;
}
.welcome-page__headline {
@include mainTitle;
margin: 48px 0 62px;
@media (max-width: $mobile) {
margin: 30px 0;
font-size: 20px;
line-height: 25px;
}
}
.welcome-page__nav {
@include list-reset;
display: flex;
justify-content: space-between;
@media (max-width: $tablet - 1) {
flex-direction: column;
justify-content: flex-start;
}
}
.welcome-page__nav-item {
flex: none;
margin-bottom: 40px;
width: calc(50% - 40px);
@media (max-width: $tablet - 1) {
width: auto;
max-width: 700px;
}
}
.welcome-page__nav-button {
@include btn-reset;
@include mainCaption;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
padding-left: 120px;
min-height: 90px;
text-align: left;
letter-spacing: 0.65px;
@media (max-width: $mobile) {
padding-left: 60px;
}
}
.welcome-page__nav-button b {
@include lesserHeadline;
margin-bottom: 6px;
max-width: 250px;
color: $text-main;
letter-spacing: 1px;
}
.welcome-page__nav-button svg {
color: $accent-dark;
transition: color 0.3s ease;
}
.welcome-page__nav-button-icon {
position: absolute;
top: 0;
left: 0;
@media (max-width: $mobile) {
width: 50px;
height: 50px;
}
}
.welcome-page__nav-button-icon svg {
display: block;
max-width: 100%;
max-height: 100%;
}
.welcome-page__nav-button:hover {
svg {
color: $accent-medium;
}
}
.welcome-page__nav-button:active,
.welcome-page__nav-button:focus {
outline: none;
svg {
color: $accent-main;
}
}
src/view/page/index.jsx
......@@ -13,6 +13,8 @@ export {InfoPage} from "./product/InfoPage";
export {QuizPage} from "./quiz/QuizPage";
export {ChooseType} from "./test/demo/ChooseType"
export {WelcomeDemoFinal} from "./test/demo/WelcomeDemoFinal"
export {WelcomeDemoFinalLastNotification} from "./test/demo/WelcomeDemoFinalLastNotification"
\ No newline at end of file
export {ChooseType} from "./test/demo/ChooseType";
export {WelcomeDemoFinal} from "./test/demo/WelcomeDemoFinal";
export {WelcomeDemoFinalLastNotification} from "./test/demo/WelcomeDemoFinalLastNotification";
export {KnowledgeBasePage} from './knowledge/KnowledgeBasePage';
src/view/page/knowledge/KnowledgeBasePage.jsx 0 → 100644
import ArrActive from "/svg/arrow_active.svg";
import CategoryCard from '../../cmp/categoryCard/CategoryCard.jsx';
const KnowledgeBasePage = D.declare('view.page.KnowledgeBasePage', () => {
return <div class="info-page">
<div className="info-page__wrapper">
<h1 className="info-page__headline">База знаний</h1>
<h2 className="info-page__title">Категории</h2>
<div className="info-page__inner">
<ul className="info-page__categories">
{(() => {
var out = [];
var el;
for (var i = 0; i < 30; i++) {
el = <li className="info-page__category"><CategoryCard/></li>;
out.push(el);
}
return out;
})()}
{/*<li className="info-page__category">*/}
{/*<CategoryCard/>*/}
{/*</li>*/}
</ul>
</div>
</div>
</div>
})
export default KnowledgeBasePage;
export {KnowledgeBasePage};
src/view/page/product/infoPage.scss
......@@ -66,3 +66,88 @@
padding: 0;
}
}
.info-page__headline {
@include title;
margin: 0 0 24px;
text-align: center;
@media (max-width: $mobile) {
margin: -29px 0 6px;
padding-left: 10px;
text-align: left;
font-weight: 700;
font-size: 20px;
line-height: 25px;
}
}
.info-page__title {
@include headline;
margin: 0 0 20px;
text-align: center;
@media (max-width: $mobile) {
margin-bottom: 7px;
padding-left: 10px;
text-align: left;
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
}
}
.info-page__inner {
display: flex;
flex-direction: column;
margin: 0 auto;
width: 1000px;
max-width: 100%;
}
.info-page__categories {
@include list-reset;
display: flex;
flex-wrap: wrap;
margin: 0 -25px;
width: calc(100% + 240px);
@media (max-width: 1509px) {
align-self: center;
margin: 0;
width: 1200px;
}
@media (max-width: 1260px) {
width: 960px;
}
@media (max-width: 1030px) {
width: 720px;
}
@media (max-width: 790px) {
width: 480px;
}
@media (max-width: $mobile) {
align-self: auto;
margin-left: -10px;
width: calc(100% + 20px);
}
}
.info-page__category {
display: flex;
flex-direction: column;
margin: 25px;
@media (max-width: $mobile) {
margin: 10px;
}
@media (max-width: 359px) {
width: calc(50% - 20px);
}
}
src/view/page/quiz/quizPage.scss
......@@ -3,19 +3,38 @@
}
.quiz-page__wrapper {
width: 100%;
margin: 0 auto;
width: 1000px;
max-width: 100%;
}
.quiz-page__header {
text-align: center;
min-height: 120px;
}
.quiz-page__title {
@include title;
margin: 0;
margin: 0 0 14px;
}
.quiz-page__subtitle {
@include mainBodyText;
margin: 0;
margin: 0 0 14px;
}
.quiz-page__progress {
margin-bottom: 24px;
width: calc(100% + 80px);
}
.quiz-page__notify {
@include bodyText;
margin: 0 0 30px;
text-align: center;
}
.quiz-page__notify b {
font-weight: 500;
color: $sienna;
}
src/view/page/test/demo/ChooseType.jsx
import {ACTION} from "/controller/Action";
import Arr from '/svg/arr.svg';
import TestIcon from '/svg/icon-test.svg';
import QuestionIcon from '/svg/icon-questions.svg';
const ChooseType = D.declare( 'view.page.ChooseType', () => {
return <div>
<h1>Пробное тестирование</h1>
<button onClick={ACTION.TEST.DEMO.GOTO_FINAL_WELCOME.execute}>Тренировка итогового тестирования</button>
<button onClick={ACTION.TEST.DEMO.LIMITLESS.execute}>Бесконечная генерация вопросов</button>
return <div class="welcome-page">
<div class="welcome-page__wrapper">
<h1 class="welcome-page__headline">Пробное тестирование</h1>
<ul class="welcome-page__nav">
<li class="welcome-page__nav-item">
<button class="welcome-page__nav-button" onClick={ACTION.TEST.DEMO.GOTO_FINAL_WELCOME.execute}>
<span class="welcome-page__nav-button-icon">
<TestIcon width="90" height="90"/>
</span>
<b>Тренировка итогового тестирования</b>
<span>Попробуй пройти это тестирование, чтобы подготовиться к&nbsp;настоящему итоговому!&nbsp;<Arr width="16" height="11"/></span>
</button>
</li>
<li class="welcome-page__nav-item">
<button class="welcome-page__nav-button" onClick={ACTION.TEST.DEMO.LIMITLESS.execute}>
<span class="welcome-page__nav-button-icon">
<QuestionIcon width="90" height="90"/>
</span>
<b>Бесконечная генерация вопросов</b>
<span>Мы&nbsp;будем показывать тебе вопросы, генерируя их&nbsp;бесконечно. Эта тренировка&nbsp;- лучший способ выучить новые карточки.&nbsp;<Arr width="16" height="11"/></span>
</button>
</li>
</ul>
</div>
</div>
} );
ChooseType.route = new Route('/demo/choose');
......
src/view/page/test/demo/WelcomeDemoFinal.jsx
......@@ -4,7 +4,9 @@ import Arr from "/svg/arr.svg";
import Info from "/view/block/info/Info";
const WelcomeDemoFinal = D.declare( 'view.page.WelcomeDemoFinal', () => {
return <Info
return <div className="welcome-page">
<div className="welcome-page__wrapper">
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-final-mob.svg" media={"(max-width: 767px)"}/>
......@@ -12,7 +14,7 @@ const WelcomeDemoFinal = D.declare( 'view.page.WelcomeDemoFinal', () => {
</picture>
}
buttons={[
<Button class={"button button--thirdery welcome-page__button"} type={"button"}
<Button class={"button button--primary button-orange welcome-page__button welcome-page__button--wide"} type={"button"}
onclick={ACTION.TEST.DEMO.GOTO_FINAL_LAST_NOTIFICATION.execute}>
<span>Начать тестирование</span><Arr width="17" height="11"/>
</Button>
......@@ -25,6 +27,8 @@ const WelcomeDemoFinal = D.declare( 'view.page.WelcomeDemoFinal', () => {
</div>
</div>
</Info>
</div>
</div>
} );
WelcomeDemoFinal.route = new Route('/demo/final');
export default WelcomeDemoFinal;
......
src/view/page/test/demo/WelcomeDemoFinalLastNotification.jsx
......@@ -4,7 +4,9 @@ import Arr from "/svg/arr.svg";
import Info from "/view/block/info/Info";
const WelcomeDemoFinalLastNotification = D.declare( 'view.page.WelcomeDemoFinalLastNotification', () => {
return <Info
return <div className="welcome-page">
<div className="welcome-page__wrapper">
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-warning-mob.svg" media={"(max-width: 767px)"}/>
......@@ -12,7 +14,7 @@ const WelcomeDemoFinalLastNotification = D.declare( 'view.page.WelcomeDemoFinalL
</picture>
}
buttons={[
<Button class={"button button--thirdery welcome-page__button welcome-page__button--wide"} type={"button"}
<Button class={"button button--primary button-orange welcome-page__button welcome-page__button--wide"} type={"button"}
onclick={ACTION.TEST.DEMO.GOTO_FINAL_TEST.execute}
>
<span>Я готов! Начать</span><Arr width="17" height="11"/>
......@@ -25,6 +27,8 @@ const WelcomeDemoFinalLastNotification = D.declare( 'view.page.WelcomeDemoFinalL
</div>
</div>
</Info>
</div>
</div>
} );
WelcomeDemoFinalLastNotification.route = new Route('/demo/final/notify');
......
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