Skip to content

K
kus-admin
Commit b5045efd by talequale
Options

labeled field to field

parent c3072914
Showing with 268 additions and 28 deletions
src/global-styles/base.scss
......@@ -6,7 +6,7 @@ body {
min-width: 320px;
font-family: $font;
font-size: 18px;
line-height: 23px;
line-height: 1.28;
color: $text-main;
background-color: $bg-main;
-webkit-font-smoothing: antialiased;
......@@ -41,3 +41,8 @@ img {
flex-direction: column;
flex-grow: 1;
}
.zero-wrapper {
//display: contents;
width: 100%;
}
src/global-styles/mixins.scss
@mixin container {
margin: 0 auto;
padding: 0 20px;
padding: 0 30px;
max-width: 1000px;
@media (max-width: $mobile) {
padding: 0 20px;
}
}
@mixin pageInner {
......@@ -26,3 +30,13 @@
padding: 0;
list-style: none;
}
@mixin hover {
transition: opacity 0.3s ease;
&:hover,
&:focus {
opacity: 0.7;
outline: none;
}
}
src/svg/logo.svg 0 → 100644
<svg width="116" height="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"/>
</svg>
src/svg/logout.svg 0 → 100644
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.93258C0 1.31296 1.31149 0 2.92929 0H9.08989C9.59253 0 10 0.407471 10 0.910112C10 1.41275 9.59253 1.82022 9.08989 1.82022H2.92929C2.31564 1.82022 1.81818 2.31825 1.81818 2.93258V15.0674C1.81818 15.6818 2.31564 16.1798 2.92929 16.1798H9.08989C9.59253 16.1798 10 16.5872 10 17.0899C10 17.5925 9.59253 18 9.08989 18H2.92929C1.31149 18 0 16.687 0 15.0674V2.93258ZM9 8.9C9 8.40294 9.36631 8 9.81818 8L14.8487 8L13.2939 6.57733C12.9362 6.25002 12.9 5.68143 13.213 5.30736C13.526 4.93329 14.0697 4.89538 14.4274 5.22269L17.7061 8.22269C17.8929 8.39359 18 8.64049 18 8.90001C18 9.15954 17.8929 9.40643 17.7061 9.57733L14.4274 12.5773C14.0697 12.9046 13.526 12.8667 13.213 12.4927C12.9 12.1186 12.9362 11.55 13.2939 11.2227L14.8488 9.8H9.81818C9.36631 9.8 9 9.39706 9 8.9Z" fill="currentColor"/>
</svg>
src/svg/user.svg 0 → 100644
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="currentColor"/>
<path d="M22 24H10.0018C8.89651 24 8.06943 23.0697 8.66985 22.1417C9.7342 20.4967 11.8549 18.8866 13.4571 18.6873C13.6652 18.6614 13.8693 18.7326 14.0395 18.8552L16 20.2667L17.9605 18.8552C18.1307 18.7326 18.3348 18.6615 18.5429 18.6873C20.1456 18.8866 22.2679 20.4976 23.3318 22.143C23.9316 23.0706 23.1046 24 22 24Z" fill="white"/>
<ellipse cx="16.0001" cy="12.8889" rx="4.44444" ry="4.88889" fill="white"/>
</svg>
src/view/block/header/Header.jsx
import './Header.scss';
import Button from "/view/cmp/button/Button.jsx";
import Logo from '/svg/logo.svg';
import User from "/svg/user.svg";
import Logout from "/svg/logout.svg";
const {IF, NOT} = Store;
export default D.declare('view.block.Header', () => {
return <header class="page-header">
return <header class={D.cls(
"page-header", {
"page-header--inner": (NOT(store.valEqual( 'navigation.current', 'login')))
})} >
{
[
'login',
'main'
].map(name=>
<button type={'button'} onClick={() => store.set('navigation.current', name)}>{name}</button>
<button class="button-temp" type={'button'} onClick={() => store.set('navigation.current', name)}>{name}</button>
)
}
<IF condition={NOT(store.valEqual( 'navigation.current', 'login'))}>
<b>kkk</b>
<div className="page-header__wrapper">
<a href="#" class="page-header__logo">
<Logo width="116" height="41"/>
</a>
<div class="page-header__user-block">
<Button class={"button page-header__profile-link"}
type={"button"}
>
<User width="32" height="32"/><span>Иванов Иван</span>
</Button>
<Button class={"button page-header__logout-link"}
type={"button"}
>
<Logout width="18" height="18"/><span>Выйти</span>
</Button>
</div>
</div>
</IF>
</header>
......
src/view/block/header/Header.scss
......@@ -14,3 +14,89 @@
box-shadow: none;
}
}
.page-header--inner {
@media (max-width: $mobile) {
background-color: $bg-accent;
}
}
.page-header__wrapper {
@include container;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
padding-bottom: 20px;
max-width: 100%;
}
.page-header__logo {
@include hover;
display: block;
width: 116px;
}
.page-header__logo svg {
display: block;
width: 100%;
}
.page-header__user-block {
position: relative;
top: 10px;
display: flex;
align-items: center;
margin-right: -2px;
}
.page-header__user-block .page-header__logout-link {
position: relative;
margin-left: 24px;
padding: 5px 0;
color: #030303;
@media (max-width: $mobile) {
font-size: 0;
}
}
.page-header__user-block .page-header__logout-link::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -14px;
width: 1px;
height: 33px;
background-color: #303030;
}
.page-header__user-block .page-header__logout-link svg {
display: none;
@media (max-width: $mobile) {
display: block;
}
}
.page-header__user-block .page-header__profile-link {
padding-right: 0;
padding-left: 48px;
color: $accent-dark;
}
.page-header__user-block .page-header__profile-link svg {
color: $accent-main;
}
.button-temp {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.button-temp:nth-child(2) {
left: 50px;
}
src/view/block/info/Info.jsx
export default D.declare('view.block.Info', function(cfg, children) {
return <div class="welcome-page__inner">
<div class={'welcome-page__image'}>{cfg.img}</div>
<div class={'welcome-page__info'}>{children}{cfg.buttons}</div>
<div class={'welcome-page__info'}>{children}<div class="welcome-page__buttons">{cfg.buttons}</div></div>
</div>
});
src/view/cmp/button/button.scss
......@@ -14,12 +14,14 @@
border-color: rgba($bg-main, 0);
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
@media (max-width: $mobile) {
font-family: $font-mobile;
font-size: 14px;
}
&:hover,
&:active {
color: $accent-medium;
}
......@@ -60,6 +62,7 @@
font-size: 16px;
}
&:hover,
&:active {
color: $bg-main;
background-color: $accent-medium;
......@@ -92,6 +95,7 @@
font-size: 16px;
}
&:hover,
&:active {
color: #030303;
background-color: $bg-accent;
......@@ -127,6 +131,7 @@
font-size: 16px;
}
&:hover,
&:active {
color: $bg-main;
background-color: $accent-dark;
......
src/view/cmp/field/LabeledField.scss → src/view/cmp/field/Field.scss
.labeled-field {
.field {
position: relative;
margin-bottom: 35px;
}
.labeled-field__label {
.field__label {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.labeled-field__label-text {
.field__label-text {
@include mainBodyText;
margin-bottom: 25px;
......@@ -24,9 +24,10 @@
}
}
.labeled-field__input {
.field__input {
display: block;
box-sizing: border-box;
padding: 0 20px;
width: 300px;
max-width: 100%;
height: 50px;
......@@ -39,6 +40,7 @@
background-color: $bg-accent;
border: 1px solid rgba(208, 209, 209, 0.8);
border-radius: 25px;
transition: all 0.3s ease;
@media (max-width: $mobile) {
font-weight: 400;
......@@ -67,23 +69,26 @@
}
}
.labeled-field--invalid & {
.field--invalid & {
color: $red;
background-color: rgba(255, 0, 0, 0.1);
border-color: $red;
}
}
.labeled-field__error-message {
.field__error-message {
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, 5px);
display: block;
display: flex;
flex-direction: column;
justify-content: center;
width: 800px;
max-width: 100%;
max-width: calc(100% + 60px);
min-height: 32px;
font-size: 16px;
line-height: 30px;
line-height: 1;
color: $red;
@media (max-width: $mobile) {
......
src/view/cmp/field/Input.jsx
export default D.declare('view.cmp.field.Input', (cfg)=> {
const dom = <input class="labeled-field__input" type={'text'} {...cfg}/>;
const dom = <input class="field__input" type={'text'} {...cfg}/>;
if(cfg.bind){
cfg.bind.sub(function (val) {
dom.value = val;
......@@ -10,4 +10,4 @@ export default D.declare('view.cmp.field.Input', (cfg)=> {
})
}
return dom;
})
\ No newline at end of file
})
src/view/cmp/field/LabeledField.jsx
import './LabeledField.scss';
import './Field.scss';
import Input from './Input.jsx';
export default D.declare('view.cmp.field.LabeledField', (cfg, children)=> {
return <div class={D.cls( "labeled-field", cfg.cls, { "labeled-field--invalid": cfg.invalid } )}>
<label class="labeled-field__label">
<span class="labeled-field__label-text">{cfg.label}</span>
<Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
return <div class={D.cls( "field", cfg.cls, { "field--invalid": cfg.invalid } )}>
<label class="field__label">
<span class="field__label-text">{cfg.label}</span>
<Input class="field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
</label>
{children}
</div>
......
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';
export default D.declare('view.page.Account', () =>
......@@ -8,11 +10,92 @@ export default D.declare('view.page.Account', () =>
img={
<picture>
<source srcset="/uploads/images/assistant-welcome-mob.svg" media={"(max-width: 767px)"}/>
<img src="/uploads/images/assistant-welcome.svg" alt={"Изображение помощника"}/>
<img src="/uploads/images/assistant-welcome.svg" width="450" height="360" alt={"Изображение помощника"}/>
</picture>
}
buttons={<button>bb</button>}>
<h1>olololo</h1>
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-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>
Вы вошли в ТОП
лучших ответов!</h1>
<div className="welcome-page__text">
<p>Ваш результат: <b class="result">98<sup>%</sup></b></p>
<p>Вы верно ответили на <em>19</em> вопросов из 20.</p>
<p><em>ТОП лучших ответов означает, что в&nbsp;следующем тестировании вам нужно будет ответить на&nbsp;меньшее количество вопросов. Отличная работа! Мы&nbsp;гордимся вами!</em></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>Ваш результат: <b class="result">55<sup>%</sup></b></p>
<p>Вы верно ответили на <em>9</em> вопросов из 20.</p>
<p><em>К&nbsp;сожалению, это очень низкий результат. Мы&nbsp;верим, что вы&nbsp;можете лучше! При подготовке к&nbsp;следующему тестированию, попробуйте потренироваться на&nbsp;пробном тесте или почитать нашу базу знаний.</em></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>
Вы завершили тестирование!</h1>
<div className="welcome-page__text">
<p>Ваш результат: <b class="result">80<sup>%</sup></b></p>
<p>Вы верно ответили на <em>16</em> вопросов из 20.</p>
</div>
</div>
</Info>
</div>
</div>
......
src/view/page/account/welcomePage.scss
......@@ -9,8 +9,14 @@
.welcome-page__inner {
display: flex;
justify-content: space-between;
}
.welcome-page__info {
order: -1;
max-width: 50%;
}
.welcome-page__image {
}
src/view/page/login/LoginCode.jsx
......@@ -23,7 +23,7 @@ export default D.declare('view.page.LoginCode', ({loginStore}) => {
bind={loginStore.bind('code')}
invalid={loginStore.valTrue('codeError')}>
<IF condition={loginStore.valTrue('codeError')}>
<span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
<span className={"field__error-message"}>Некорректный код. Попробуйте еще раз</span>
</IF>
</view.cmp.field.LabeledField>
......
src/view/page/login/LoginPhone.jsx
......@@ -40,7 +40,7 @@ export default D.declare('view.page.LoginPhone', ({loginStore}) => {
placeholder={'Ваш телефон'}
invalid={loginStore.valTrue('phoneError')}>
<IF condition={loginStore.valTrue('phoneError')}>
<span className={"labeled-field__error-message"}>{loginStore.val('phoneErrorText')}</span>
<span className={"field__error-message"}>{loginStore.val('phoneErrorText')}</span>
</IF>
</view.cmp.field.LabeledField>
<Button class={"button button--primary authorization-form__button"}
......
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