Skip to content

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

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

parents cac92781 c988ffb0
Showing with 501 additions and 134 deletions
src/global-styles/base.scss
......@@ -55,4 +55,3 @@ img {
color: #ccdde8;
}
}
src/global-styles/mixins.scss
......@@ -20,6 +20,10 @@
background-size: 100% auto;
background-position: bottom center;
@media (max-width: 1024px) {
padding: 40px;
}
@media (max-width: $mobile) {
margin: 0;
padding: 0 30px 30px;
......
src/global-styles/typography.scss
@mixin mainTitle {
font-weight: 700;
font-size: 44px;
line-height: 50px;
line-height: 1.14;
letter-spacing: 0.01em;
@media (max-width: 1024px) {
font-size: 38px;
}
}
@mixin title {
......@@ -46,6 +50,11 @@
line-height: 23px;
color: $gray-dark;
@media (max-width: 1024px) {
font-size: 17px;
line-height: 22px;
}
@media (max-width: $mobile) {
font-weight: 400;
font-size: 16px;
......
src/main.jsx
import './view/page/login/Login.jsx';
import './view/page/account/WelcomePage.jsx';
import './view/page/account/Account.jsx';
import './view/page/tmp/Fields.jsx';
......@@ -13,8 +14,9 @@ export default function() {
<view.block.Header/>
{Switch({cls: 'page-content__inner', key: 'navigation.current'}, {
login: new view.page.Login(),
main: new view.page.Account(),
fields: new view.page.tmp.Fields()
welcome: new view.page.WelcomePage(),
fields: new view.page.tmp.Fields(),
account: new view.page.Account()
})}
</div>;
};
......
src/svg/logo.svg
<svg width="116" height="41" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="116" height="41" viewBox="0 0 116 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2173 22.6693h3.4287v5.0188l4.7112-5.0188h4.1615l-6.0722 6.5373 6.1507 6.8719h-4.5279l-4.0569-4.7357-.3664.4376v4.2981h-3.4287V22.6693zM26.7754 22.6693h3.481l3.5334 8.4161 3.926-8.4161h3.4811l-8.5325 18.2994H29.131l2.8267-5.8939-5.1823-12.4055zM74.6199 36.0785H72.814V22.6693h3.324v7.8757l6.9882-7.8757h1.6489v13.4092H81.425V28.383l-6.8051 7.6955zM100.636 36.0785h-3.4807l-3.4025-8.4419-3.481 8.4419h-3.4549l5.8105-13.4092h2.1985l5.8101 13.4092zM116 36.0785h-3.481l-3.403-8.4419-3.481 8.4419h-3.481l5.811-13.4092h2.225L116 36.0785zM116 39.2185H36.9307v1.7502H116v-1.7502zM26.1995 39.2185H0v1.7502h26.1995v-1.7502zM55.7229 25.4747L52.87 27.0189c-.5234-.5405-1.0731-.9265-1.5965-1.1582-.5235-.2059-1.1255-.3088-1.8322-.3088-1.2825 0-2.3032.3861-3.1146 1.1324-.7852.7464-1.1778 1.6987-1.1778 2.8827 0 1.1324.3926 2.059 1.1516 2.7796.7591.7207 1.7537 1.081 2.9838 1.081 1.518 0 2.722-.5148 3.5857-1.5443l2.6959 1.8274c-1.4657 1.8789-3.5334 2.8054-6.1769 2.8054-2.408 0-4.2663-.6949-5.6273-2.0847-1.361-1.3899-2.0415-3.0371-2.0415-4.8902 0-1.2869.3403-2.4965.9946-3.5775.6543-1.081 1.5704-1.9561 2.7482-2.5738 1.1778-.6177 2.5126-.9265 3.9522-.9265 1.361 0 2.5649.2574 3.638.7978 1.0993.4891 1.9892 1.2354 2.6697 2.2135zM62.0307 28.2286v4.6328h.8898c1.4658 0 2.4342-.1802 2.9315-.5405.4973-.3603.759-.8751.759-1.57 0-.7721-.2879-1.3898-.8899-1.8531-.602-.4633-1.5704-.6692-2.9576-.6692h-.7328zm0-6.8977v3.8092h.759c.8637 0 1.4919-.1802 1.9106-.5405.4188-.3603.6282-.8236.6282-1.4413 0-.5662-.2094-1.0038-.602-1.3384-.3926-.3345-.9946-.489-1.806-.489h-.8898zm-3.5073 14.8249V18.0623h2.9053c1.6751 0 2.9052.1029 3.6904.3088 1.0993.2831 1.9892.8236 2.6435 1.5957.6543.7722.9684 1.6987.9684 2.754 0 .6949-.157 1.3126-.4449 1.8788-.2879.5662-.7852 1.081-1.4396 1.5957 1.1255.5148 1.9369 1.1582 2.4603 1.9304.5235.7721.7852 1.6986.7852 2.7539 0 1.0295-.2617 1.956-.8113 2.7796-.5235.8494-1.2302 1.4671-2.0677 1.8789-.8376.4118-2.0154.6177-3.5073.6177h-5.1823zM3.50722 28.2029v4.6327h.88989c1.46571 0 2.43412-.1801 2.95758-.5405.4973-.3603.75903-.875.75903-1.57 0-.7721-.28791-1.3898-.88989-1.8531-.60199-.4632-1.5704-.6691-2.95758-.6691h-.75903zm0-6.8977v3.8091h.75903c.86371 0 1.49187-.1801 1.91065-.5405.41877-.3603.62815-.8236.62815-1.4413 0-.5662-.20938-1.0037-.60198-1.3383-.3926-.3346-.99459-.489-1.80596-.489h-.88989zM0 36.13V18.0365h2.90523c1.6751 0 2.90524.103 3.69044.3089 1.09928.2831 1.98917.8236 2.6435 1.5957.65433.7721.96843 1.6987.96843 2.7539 0 .6949-.1571 1.3126-.44496 1.8788-.28791.5663-.7852 1.081-1.43954 1.5958 1.12546.5147 1.9368 1.1582 2.4603 1.9303.5235.7721.7852 1.6987.7852 2.7539 0 1.0295-.2617 1.9561-.8114 2.7797-.5234.8493-1.23012 1.467-2.06767 1.8788-.83754.4118-2.01534.6177-3.50722.6177H0z" fill="#006C43"/>
<path d="M15.416 12.0397s4.6589 1.3898 16.2798 1.3641c18.3475-.0515 36.2238-9.49722 44.8872-10.5782 8.6634-1.08098 13.6101-.05147 16.463 1.64721 2.8529 1.69868 4.4233 4.40113 4.4233 4.40113s-6.7789-4.0408-24.76-.30885C54.7021 12.2713 39.8095 16.0547 24.4458 14.1244c-5.5487-.6949-9.0298-2.0847-9.0298-2.0847z" fill="#AFCA0B"/>
<path d="M60.1201 14.1501s15.0758-4.81291 22.6138-5.19898c7.5117-.36032 10.9927.61771 13.8718 1.75018 2.8791 1.1067 4.0043 2.5995 4.0043 2.5995s-6.3599-2.2392-13.8716-2.2392c-7.5118 0-26.6183 3.0885-26.6183 3.0885zM37.3755 8.59082c7.0668-1.28688 7.5379-1.64721 14.2383-3.91212 5.3131-1.80163 9.6056-3.52605 12.5108-4.066539 3.481-.6434399 4.8944-.6434399 6.2031-.5919647C73.2852.148884 75.9549 1.61593 75.9549 1.61593S73.0497.869537 64.6481 3.67494C58.9685 5.57952 53.158 7.22672 49.6508 7.87016c-2.9576.54049-6.8051 1.08098-12.2753.72066z" fill="#006C43"/>
......
src/view/block/header/Header.jsx
......@@ -14,7 +14,7 @@ export default D.declare('view.block.Header', () => {
{
[
'login',
'main','fields'
'welcome','fields', 'account'
].map(name=>
<button type={'button'} onClick={() => store.set('navigation.current', name)}>{name}</button>
)
......
src/view/block/header/Header.scss
......@@ -29,12 +29,21 @@
padding-top: 20px;
padding-bottom: 20px;
max-width: 100%;
@media (max-width: $mobile) {
padding-top: 15px;
padding-bottom: 5px;
}
}
.page-header__logo {
@include hover;
display: block;
width: 116px;
@media (max-width: $mobile) {
width: 85px;
}
}
.page-header__logo svg {
......@@ -43,11 +52,15 @@
}
.page-header__user-block {
position: relative;
top: 10px;
display: flex;
align-items: center;
margin-right: -2px;
@media (max-width: $mobile) {
position: relative;
margin-right: -12px;
top: 4px;
}
}
.page-header__user-block .page-header__logout-link {
......@@ -57,6 +70,9 @@
color: #030303;
@media (max-width: $mobile) {
margin-left: 0;
padding: 9px 10px;
height: 40px;
font-size: 0;
}
}
......@@ -70,12 +86,18 @@
width: 1px;
height: 33px;
background-color: #303030;
@media (max-width: $mobile) {
display: none;
}
}
.page-header__user-block .page-header__logout-link svg {
display: none;
@media (max-width: $mobile) {
position: static;
transform: none;
display: block;
}
}
......@@ -84,10 +106,23 @@
padding-right: 0;
padding-left: 48px;
color: $accent-dark;
@media (max-width: $mobile) {
padding: 8px 10px;
height: 40px;
font-size: 0;
}
}
.page-header__user-block .page-header__profile-link svg {
color: $accent-main;
@media (max-width: $mobile) {
position: static;
transform: none;
width: 20px;
height: 20px;
}
}
.button-temp {
......
src/view/cmp/button/button.scss
.button {
position: relative;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
padding: 0 32px;
text-align: center;
......
src/view/page/account/Account.jsx
import Info from '/view/block/info/Info.jsx';
import Button from '/view/cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
import './welcomePage.scss';
import './accountPage.scss';
import User from "/svg/user.svg";
export default D.declare('view.page.Account', () =>
<div class="welcome-page">
<div class="welcome-page__wrapper">
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-welcome-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-welcome.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Продолжить</span><Arr width="17" height="11"/>
</Button>
}>
<div className="welcome-page__message">
<h1 className="welcome-page__title">Добро пожаловать!</h1>
<div className="welcome-page__text">
<p>Текст про портал и&nbsp;приветственное сообщение.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut&nbsp;labore et&nbsp;dolore magna aliqua. Ut&nbsp;enim ad&nbsp;minim veniam, quis nostrud exercitation ullamco laboris nisi ut&nbsp;aliquip ex&nbsp;ea&nbsp;commodo consequat. Duis aute irure dolor in&nbsp;reprehenderit in&nbsp;voluptate velit esse cillum dolore eu&nbsp;fugiat nulla pariatur.</p>
export default D.declare('view.page.Account', () => {
return <div class="account-page">
<div class="account-page__wrapper">
<div class="account-page__menu">
<div class="account">
<h2 class="account__headline">Личный кабинет</h2>
<div class="account__info">
<h3 class="account__name">
<User width="32" height="32" />
<span>Иванов Иван</span>
</h3>
<p>Химки-2</p>
<p>Кассир</p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-top-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-top.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--bordered welcome-page__button"} type={"button"}>
<span>Посмотреть мои ответы</span>
</Button>,
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Завершить тестирование</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message welcome-page__message--result welcome-page__message--top">
<h1 className="welcome-page__title"><em>Поздравляем!</em>
<br></br>Вы вошли в ТОП лучших ответов!</h1>
<div className="welcome-page__text">
<p>Ваш результат: <span class="welcome-page__result">98<sup>%</sup></span></p>
<p>Вы верно ответили на <em>19</em> вопросов из 20.</p>
<p><b>ТОП лучших ответов означает, что в&nbsp;следующем тестировании вам нужно будет ответить на&nbsp;меньшее количество вопросов. Отличная работа! Мы&nbsp;гордимся вами!</b></p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-fail-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-fail.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--bordered welcome-page__button"} type={"button"}>
<span>Посмотреть мои ответы</span>
</Button>,
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Завершить тестирование</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message welcome-page__message--result welcome-page__message--fail">
<h1 className="welcome-page__title">Тестирование завершено</h1>
<div className="welcome-page__text">
<p>Ваш результат: <span class="welcome-page__result">55<sup>%</sup></span></p>
<p>Вы верно ответили на <em>9</em> вопросов из 20.</p>
<p><b>К&nbsp;сожалению, это очень низкий результат. Мы&nbsp;верим, что вы&nbsp;можете лучше! При подготовке к&nbsp;следующему тестированию, попробуйте потренироваться на&nbsp;пробном тесте или почитать нашу базу знаний.</b></p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-success-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-success.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--bordered welcome-page__button"} type={"button"}>
<span>Посмотреть мои ответы</span>
</Button>,
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Завершить тестирование</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message welcome-page__message--result welcome-page__message--success">
<h1 className="welcome-page__title"><em>Поздравляем!</em>
<br></br>Вы завершили тестирование!</h1>
<div className="welcome-page__text">
<p>Ваш результат: <span class="welcome-page__result">80<sup>%</sup></span></p>
<p>Вы верно ответили на <em>16</em> вопросов из 20.</p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-warning-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-warning.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Я готов! Начать</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message welcome-page__message--warning">
<h1 className="welcome-page__title"><em>Внимание!</em>
Тестирование
невозможно&nbsp;прервать</h1>
<div className="welcome-page__text">
<p>Это последнее предупреждение. Вы&nbsp;уверены, что готовы начать?</p>
</div>
</div>
</Info>
</div>
<div class="account-page__content">
</div>
</div>
</div>
)
})
src/view/page/account/WelcomePage.jsx 0 → 100644
import Info from '/view/block/info/Info.jsx';
import Button from '/view/cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
import './welcomePage.scss';
export default D.declare('view.page.WelcomePage', () =>
<div class="welcome-page">
<div class="welcome-page__wrapper">
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-welcome-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-welcome.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Продолжить</span><Arr width="17" height="11"/>
</Button>
}>
<div className="welcome-page__message">
<h1 className="welcome-page__title">Добро пожаловать!</h1>
<div className="welcome-page__text">
<p>Текст про портал и&nbsp;приветственное сообщение.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut&nbsp;labore et&nbsp;dolore magna aliqua. Ut&nbsp;enim ad&nbsp;minim veniam, quis nostrud exercitation ullamco laboris nisi ut&nbsp;aliquip ex&nbsp;ea&nbsp;commodo consequat. Duis aute irure dolor in&nbsp;reprehenderit in&nbsp;voluptate velit esse cillum dolore eu&nbsp;fugiat nulla pariatur.</p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-final-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-final.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--bordered welcome-page__button"} type={"button"}>
<span>Сначала потренироваться</span>
</Button>,
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Начать тестирование</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message">
<h1 className="welcome-page__title">Добро пожаловать в&nbsp;итоговое тестирование!</h1>
<div className="welcome-page__text">
<p>Текст про тестирование и&nbsp;его правила.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut&nbsp;labore et&nbsp;dolore magna aliqua.</p>
<p class="welcome-page__date">Тестирование проходит в&nbsp;период: <time>25.08-30.08</time></p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-top-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-top.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--bordered welcome-page__button"} type={"button"}>
<span>Посмотреть мои ответы</span>
</Button>,
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Завершить тестирование</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message welcome-page__message--result welcome-page__message--top">
<h1 className="welcome-page__title"><em>Поздравляем!</em>
<br></br>Вы вошли в ТОП лучших ответов!</h1>
<div className="welcome-page__text">
<p>Ваш результат: <span class="welcome-page__result">98<sup>%</sup></span></p>
<p>Вы верно ответили на <em>19</em> вопросов из 20.</p>
<p><b>ТОП лучших ответов означает, что в&nbsp;следующем тестировании вам нужно будет ответить на&nbsp;меньшее количество вопросов. Отличная работа! Мы&nbsp;гордимся вами!</b></p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-fail-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-fail.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--bordered welcome-page__button"} type={"button"}>
<span>Посмотреть мои ответы</span>
</Button>,
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Завершить тестирование</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message welcome-page__message--result welcome-page__message--fail">
<h1 className="welcome-page__title">Тестирование завершено</h1>
<div className="welcome-page__text">
<p>Ваш результат: <span class="welcome-page__result">55<sup>%</sup></span></p>
<p>Вы верно ответили на <em>9</em> вопросов из 20.</p>
<p><b>К&nbsp;сожалению, это очень низкий результат. Мы&nbsp;верим, что вы&nbsp;можете лучше! При подготовке к&nbsp;следующему тестированию, попробуйте потренироваться на&nbsp;пробном тесте или почитать нашу базу знаний.</b></p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-success-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-success.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--bordered welcome-page__button"} type={"button"}>
<span>Посмотреть мои ответы</span>
</Button>,
<Button class={"button button--primary welcome-page__button"} type={"button"}>
<span>Завершить тестирование</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message welcome-page__message--result welcome-page__message--success">
<h1 className="welcome-page__title"><em>Поздравляем!</em>
<br></br>Вы завершили тестирование!</h1>
<div className="welcome-page__text">
<p>Ваш результат: <span class="welcome-page__result">80<sup>%</sup></span></p>
<p>Вы верно ответили на <em>16</em> вопросов из 20.</p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-warning-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-warning.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={[
<Button class={"button button--primary welcome-page__button welcome-page__button--wide"} type={"button"}>
<span>Я готов! Начать</span><Arr width="17" height="11"/>
</Button>
]}>
<div className="welcome-page__message welcome-page__message--warning">
<h1 className="welcome-page__title"><em>Внимание!</em>
Тестирование
невозможно прервать</h1>
<div className="welcome-page__text">
<p>Это последнее предупреждение. Вы&nbsp;уверены, что&nbsp;готовы начать?</p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-activate-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-activate.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={
<Button class={"button button--primary welcome-page__button welcome-page__button--wide"} type={"button"}>
<span>Продолжить</span><Arr width="17" height="11"/>
</Button>
}>
<div className="welcome-page__message welcome-page__message--warning">
<h1 className="welcome-page__title"><em>Внимание!</em> Тестирование не&nbsp;активировано</h1>
<div className="welcome-page__text">
<p>Текст про&nbsp;то, что тестирование еще не&nbsp;активировано. СТА&nbsp;&mdash; потренироваться на&nbsp;пробном тестировании. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia augue quam, in&nbsp;dapibus nulla ullamcorper nec. Mauris ac&nbsp;magna est.</p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-finished-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-finished.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={
<Button class={"button button--primary welcome-page__button welcome-page__button--wide"} type={"button"}>
<span>Готово</span>
</Button>
}>
<div className="welcome-page__message">
<h1 className="welcome-page__title">Тестирование<br/>завершено</h1>
<div className="welcome-page__text">
<p>Спасибо за&nbsp;участие в&nbsp;тестировании! <br/>Увидимся через месяц!</p>
</div>
</div>
</Info>
<Info
img={
<picture>
<source srcset="/uploads/images/assistant-break-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-break.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={
<Button class={"button button--primary welcome-page__button welcome-page__button--wide"} type={"button"}>
<span>Начать заново</span>
</Button>
}>
<div className="welcome-page__message">
<h1 className="welcome-page__title">Тестирование было прервано</h1>
<div className="welcome-page__text">
<p>Вам придется начать его заново.</p>
<p>Это могло произойти из-за проблем в&nbsp;соединении с&nbsp;интернетом либо из-за нажатия кнопки &laquo;назад&raquo;. Пожалуйста, убедитесь, что&nbsp;Вы находитесь в&nbsp;зоне хорошего приема и&nbsp;начните тестирование снова.</p>
</div>
</div>
</Info>
</div>
</div>
)
src/view/page/account/accountPage.scss 0 → 100644
.account-page {
@include pageInner;
display: flex;
flex-direction: column;
padding: 0;
background-color: $bg-accent;
}
.account-page__wrapper {
display: flex;
flex-grow: 1;
}
.account-page__menu {
box-sizing: border-box;
padding: 23px 20px 50px 50px;
width: 320px;
background-color: $bg-main;
}
.account-page__content {
flex-grow: 1;
max-width: calc(100% - 320px);
}
.account__headline {
margin: 0 0 14px;
font-weight: 500;
font-size: 17px;
line-height: 22px;
color: $gray-medium;
}
.account__info {
@include mainCaption;
padding-bottom: 10px;
border-bottom: 1px solid #747474;
}
.account__info p {
margin: 0;
}
.account__name {
position: relative;
margin: 0 0 8px;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: $text-main;
}
.account__name svg {
position: absolute;
top: 0;
right: 100%;
transform: translate(-18px, 0);
color: $accent-main;
}
src/view/page/account/welcomePage.scss
.welcome-page {
@include pageInner;
background-color: $bg-accent;
@media (max-width: $mobile) {
padding: 0 20px 20px;
}
}
.welcome-page__wrapper {
@include container;
padding-left: 0;
padding-right: 0;
max-width: 1000px;
@media (max-width: $mobile) {
display: flex;
flex-direction: column;
padding-left: 0;
padding-right: 0;
}
}
.welcome-page__inner {
display: flex;
justify-content: space-between;
@media (max-width: $mobile) {
flex-direction: column;
flex-grow: 1;
}
}
.welcome-page__info {
order: -1;
padding-top: 45px;
width: 50%;
max-width: 500px;
@media (max-width: 1024px) {
max-width: 400px;
}
@media (max-width: $mobile) {
order: 2;
flex-grow: 1;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
padding-top: 0;
width: 100%;
max-width: 360px;
}
}
.welcome-page__image {
display: flex;
justify-content: flex-end;
box-sizing: border-box;
padding-top: 10px;
width: 50%;
max-width: calc(100% - 500px);
padding-left: 50px;
max-width: 50%;
@media (max-width: 1024px) {
padding-top: 40px;
padding-left: 0;
}
@media (max-width: $mobile) {
margin: 0 auto 10px;
padding-top: 30px;
width: 100%;
max-width: 280px;
}
}
.welcome-page__title {
@include mainTitle;
margin: 0 0 33px;
@media (max-width: $mobile) {
margin-bottom: 11px;
padding-right: 20px;
font-weight: 700;
font-size: 20px;
line-height: 25px;
}
}
.welcome-page__title em {
......@@ -42,6 +97,16 @@
.welcome-page__text {
@include mainBodyText;
min-height: 97px;
@media (max-width: 1024px) {
min-height: 60px;
}
@media (max-width: $mobile) {
margin-bottom: 40px;
letter-spacing: 0.2px;
}
}
.welcome-page__text p {
......@@ -49,16 +114,31 @@
}
.welcome-page__result {
margin-left: 9px;
font-weight: 700;
font-size: 44px;
line-height: 50px;
line-height: 40px;
letter-spacing: 0.01em;
color: $text-main;
@media (max-width: 1024px) {
font-size: 38px;
}
@media (max-width: $mobile) {
font-size: 32px;
}
}
.welcome-page__result sup {
margin-left: 4px;
font-size: 24px;
line-height: 32px;
@media (max-width: $mobile) {
vertical-align: middle;
font-size: 32px;
}
}
.welcome-page__message em {
......@@ -66,8 +146,41 @@
color: $accent-main;
}
.welcome-page__message--warning em {
color: $sienna;
.welcome-page__message time {
margin-left: 10px;
font-size: 17px;
color: $text-main;
@media (max-width: $mobile) {
margin-left: 0;
font-size: 16px;
letter-spacing: 0.15px;
white-space: nowrap;
}
}
.welcome-page__message--warning {
em {
color: $sienna;
}
}
.welcome-page__message--result p {
margin-bottom: 7px;
}
.welcome-page__message--result p > b {
display: inline-block;
vertical-align: top;
margin-top: 10px;
@media (max-width: $mobile) {
font-weight: 400;
}
}
.welcome-page__message--result p:last-child {
margin-bottom: 0;
}
.welcome-page__message--top {
......@@ -86,14 +199,52 @@
}
}
.welcome-page__date {
@media (max-width: $mobile) {
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: $text-main;
letter-spacing: 0.5px;
}
}
.welcome-page__buttons {
display: flex;
flex-wrap: wrap;
margin-top: 52px;
min-width: 1000px;
max-width: calc(100% - 60px);
@media (max-width: 1168px) {
min-width: calc(100vw - 168px);
}
@media (max-width: $mobile) {
flex-direction: column;
margin-top: auto;
min-width: auto;
width: 100%;
}
}
.welcome-page__buttons button {
margin: 0 40px 30px 0;
padding-left: 40px;
padding-right: 40px;
@media (max-width: $mobile) {
margin: 0 0 20px;
padding-left: 30px;
padding-right: 30px;
}
}
.welcome-page__buttons button:last-child {
@media (max-width: $mobile) {
margin-bottom: 0;
}
}
button.welcome-page__button--wide {
min-width: 275px;
}
src/view/page/login/LoginPhone.jsx
......@@ -40,6 +40,7 @@ export default D.declare('view.page.LoginPhone', ({loginStore}) => {
label={'Введите номер телефона, чтобы продолжить.'}
disabled={loginStore.valTrue('phoneChecking')}
placeholder={'Ваш телефон'}
enterkeyhint={"send"}
invalid={loginStore.valTrue('phoneError')}>
<IF condition={loginStore.valTrue('phoneError')}>
<span className={"field__error-message"}>{loginStore.val('phoneErrorText')}</span>
......
src/view/page/tmp/Fields.jsx
......@@ -18,7 +18,7 @@ export default D.declare('view.page.tmp.Fields', () => {
<div>
<h3>Phone input</h3>
<div style={{display: 'flex'}}>
<div style={{display: 'flex', 'flex-wrap': 'wrap'}}>
<div>
<h5>Empty</h5>
......@@ -49,4 +49,4 @@ export default D.declare('view.page.tmp.Fields', () => {
</div>
</div>
</div>
});
\ No newline at end of file
});
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