Skip to content

K
kus-admin
Commit c5c5a9b7 by talequale
Options

wip

parents bffc98d8 170f7211
Showing with 186 additions and 23 deletions
src/core/data/store/Store.js
......@@ -217,5 +217,12 @@ Store.OR = Store.AGGREGATE(function(values, length) {
}
return result;
});
Store.IF = function(cfg, children){
return function( update ){
if( 'condition' in cfg )
cfg.condition( function( cond ){
update( cond ? children : null );
} );
}
};
typeof module === 'object' && (module.exports = Store);
\ No newline at end of file
src/global-styles/base.scss
......@@ -11,6 +11,10 @@ body {
background-color: $bg-main;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (max-width: $mobile) {
font-family: $font-mobile;
}
}
img {
......@@ -26,6 +30,10 @@ img {
padding-top: 90px;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
@media (max-width: $mobile) {
padding-top: 50px;
}
}
.page-content__inner {
......
src/global-styles/fonts.scss
......@@ -69,3 +69,29 @@
src: url("/fonts/SFProText-BoldItalic.woff2") format("woff2"),
url("/fonts/SFProText-BoldItalic.woff") format("woff");
}
@font-face {
font-family: "Helvetica Neue";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/HelveticaNeueCyrRoman.woff2") format("woff2"),
url("/fonts/HelveticaNeueCyrRoman.woff") format("woff");
}
@font-face {
font-family: "Helvetica Neue";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/HelveticaNeueCyrMedium.woff") format("woff");
}
@font-face {
font-family: "Helvetica Neue";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/HelveticaNeueCyrBold.woff2") format("woff2"),
url("/fonts/HelveticaNeueCyrBold.woff") format("woff");
}
src/global-styles/typography.scss
......@@ -15,6 +15,11 @@
font-weight: 700;
font-size: 24px;
line-height: 32px;
@media (max-width: $mobile) {
font-size: 20px;
line-height: 25px;
}
}
@mixin lesserHeadline {
......@@ -40,6 +45,13 @@
font-size: 18px;
line-height: 23px;
color: $gray-dark;
@media (max-width: $mobile) {
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: 0.25px;
}
}
@mixin bodyText {
......
src/global-styles/variables.scss
......@@ -20,3 +20,6 @@ $brick: #C94C0A;
$sienna: #D8960D;
$font: 'SF Pro Text', Arial, sans-serif;
$font-mobile: 'Helvetica Neue', Arial, sans-serif;
$mobile: 767px;
src/svg/logo_vkusvill.svg
<svg width="300" height="147" viewBox="0 0 300 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M88.9062 142.516H78.3438V136.203H88.3281V132.922H78.3438V126.938H88.9062V123.453H74.3125V146H88.9062V142.516Z" fill="#006C43"/>
<path d="M99.6875 146.281C102.062 146.281 104.031 145.172 105 143.297H105.266V146H109.016V122.297H105.141V131.625H104.875C103.969 129.75 102.031 128.625 99.6875 128.625C95.375 128.625 92.6562 132.031 92.6562 137.438C92.6562 142.875 95.3594 146.281 99.6875 146.281ZM100.891 131.922C103.547 131.922 105.188 134.047 105.188 137.453C105.188 140.891 103.562 142.984 100.891 142.984C98.2344 142.984 96.625 140.906 96.625 137.453C96.625 134.016 98.25 131.922 100.891 131.922Z" fill="#006C43"/>
<path d="M128.781 128.906H124.906V138.859C124.906 141.391 123.531 142.938 121.016 142.938C118.703 142.938 117.625 141.656 117.625 139.047V128.906H113.75V140.016C113.75 144.016 115.938 146.344 119.672 146.344C122.281 146.344 123.953 145.234 124.781 143.281H125.047V146H128.781V128.906Z" fill="#006C43"/>
<path d="M148.297 134.656C147.891 131.062 145.234 128.562 140.844 128.562C135.703 128.562 132.688 131.859 132.688 137.406C132.688 143.031 135.719 146.344 140.859 146.344C145.188 146.344 147.875 143.938 148.297 140.359H144.609C144.203 142.141 142.859 143.094 140.844 143.094C138.203 143.094 136.609 141 136.609 137.406C136.609 133.859 138.188 131.812 140.844 131.812C142.969 131.812 144.25 133 144.609 134.656H148.297Z" fill="#006C43"/>
<path d="M157.844 143.234C156.125 143.234 154.891 142.375 154.891 140.938C154.891 139.547 155.906 138.766 158.078 138.625L161.938 138.375V139.734C161.938 141.719 160.188 143.234 157.844 143.234ZM156.703 146.281C158.938 146.281 160.812 145.312 161.766 143.656H162.031V146H165.766V134.328C165.766 130.703 163.297 128.562 158.906 128.562C154.844 128.562 152.016 130.484 151.703 133.5H155.359C155.719 132.344 156.938 131.719 158.719 131.719C160.812 131.719 161.938 132.656 161.938 134.328V135.766L157.531 136.031C153.375 136.281 151.047 138.062 151.047 141.156C151.047 144.281 153.406 146.281 156.703 146.281Z" fill="#006C43"/>
<path d="M171.672 124.719V129.016H168.969V132.109H171.672V141.438C171.672 144.75 173.234 146.078 177.156 146.078C177.906 146.078 178.625 146 179.188 145.891V142.859C178.719 142.906 178.422 142.938 177.875 142.938C176.25 142.938 175.531 142.188 175.531 140.5V132.109H179.188V129.016H175.531V124.719H171.672Z" fill="#006C43"/>
<path d="M183.109 146H186.969V128.906H183.109V146ZM185.031 126.125C186.453 126.125 187.422 125.219 187.422 123.984C187.422 122.75 186.453 121.844 185.031 121.844C183.625 121.844 182.641 122.75 182.641 123.984C182.641 125.219 183.625 126.125 185.031 126.125Z" fill="#006C43"/>
<path d="M199.156 146.344C204.266 146.344 207.375 143 207.375 137.453C207.375 131.922 204.25 128.562 199.156 128.562C194.078 128.562 190.938 131.938 190.938 137.453C190.938 143 194.031 146.344 199.156 146.344ZM199.156 143.094C196.453 143.094 194.906 141.031 194.906 137.453C194.906 133.891 196.453 131.812 199.156 131.812C201.844 131.812 203.391 133.891 203.391 137.453C203.391 141.031 201.859 143.094 199.156 143.094Z" fill="#006C43"/>
<path d="M211.281 146H215.156V136.047C215.156 133.531 216.609 131.938 218.922 131.938C221.281 131.938 222.375 133.25 222.375 135.859V146H226.25V134.938C226.25 130.859 224.172 128.562 220.359 128.562C217.812 128.562 216.094 129.734 215.281 131.641H215.016V128.906H211.281V146Z" fill="#006C43"/>
<path d="M88.9062 142.516H78.3438V136.203H88.3281V132.922H78.3438V126.938H88.9062V123.453H74.3125V146H88.9062V142.516Z" fill="currentColor"/>
<path d="M99.6875 146.281C102.062 146.281 104.031 145.172 105 143.297H105.266V146H109.016V122.297H105.141V131.625H104.875C103.969 129.75 102.031 128.625 99.6875 128.625C95.375 128.625 92.6562 132.031 92.6562 137.438C92.6562 142.875 95.3594 146.281 99.6875 146.281ZM100.891 131.922C103.547 131.922 105.188 134.047 105.188 137.453C105.188 140.891 103.562 142.984 100.891 142.984C98.2344 142.984 96.625 140.906 96.625 137.453C96.625 134.016 98.25 131.922 100.891 131.922Z" fill="currentColor"/>
<path d="M128.781 128.906H124.906V138.859C124.906 141.391 123.531 142.938 121.016 142.938C118.703 142.938 117.625 141.656 117.625 139.047V128.906H113.75V140.016C113.75 144.016 115.938 146.344 119.672 146.344C122.281 146.344 123.953 145.234 124.781 143.281H125.047V146H128.781V128.906Z" fill="currentColor"/>
<path d="M148.297 134.656C147.891 131.062 145.234 128.562 140.844 128.562C135.703 128.562 132.688 131.859 132.688 137.406C132.688 143.031 135.719 146.344 140.859 146.344C145.188 146.344 147.875 143.938 148.297 140.359H144.609C144.203 142.141 142.859 143.094 140.844 143.094C138.203 143.094 136.609 141 136.609 137.406C136.609 133.859 138.188 131.812 140.844 131.812C142.969 131.812 144.25 133 144.609 134.656H148.297Z" fill="currentColor"/>
<path d="M157.844 143.234C156.125 143.234 154.891 142.375 154.891 140.938C154.891 139.547 155.906 138.766 158.078 138.625L161.938 138.375V139.734C161.938 141.719 160.188 143.234 157.844 143.234ZM156.703 146.281C158.938 146.281 160.812 145.312 161.766 143.656H162.031V146H165.766V134.328C165.766 130.703 163.297 128.562 158.906 128.562C154.844 128.562 152.016 130.484 151.703 133.5H155.359C155.719 132.344 156.938 131.719 158.719 131.719C160.812 131.719 161.938 132.656 161.938 134.328V135.766L157.531 136.031C153.375 136.281 151.047 138.062 151.047 141.156C151.047 144.281 153.406 146.281 156.703 146.281Z" fill="currentColor"/>
<path d="M171.672 124.719V129.016H168.969V132.109H171.672V141.438C171.672 144.75 173.234 146.078 177.156 146.078C177.906 146.078 178.625 146 179.188 145.891V142.859C178.719 142.906 178.422 142.938 177.875 142.938C176.25 142.938 175.531 142.188 175.531 140.5V132.109H179.188V129.016H175.531V124.719H171.672Z" fill="currentColor"/>
<path d="M183.109 146H186.969V128.906H183.109V146ZM185.031 126.125C186.453 126.125 187.422 125.219 187.422 123.984C187.422 122.75 186.453 121.844 185.031 121.844C183.625 121.844 182.641 122.75 182.641 123.984C182.641 125.219 183.625 126.125 185.031 126.125Z" fill="currentColor"/>
<path d="M199.156 146.344C204.266 146.344 207.375 143 207.375 137.453C207.375 131.922 204.25 128.562 199.156 128.562C194.078 128.562 190.938 131.938 190.938 137.453C190.938 143 194.031 146.344 199.156 146.344ZM199.156 143.094C196.453 143.094 194.906 141.031 194.906 137.453C194.906 133.891 196.453 131.812 199.156 131.812C201.844 131.812 203.391 133.891 203.391 137.453C203.391 141.031 201.859 143.094 199.156 143.094Z" fill="currentColor"/>
<path d="M211.281 146H215.156V136.047C215.156 133.531 216.609 131.938 218.922 131.938C221.281 131.938 222.375 133.25 222.375 135.859V146H226.25V134.938C226.25 130.859 224.172 128.562 220.359 128.562C217.812 128.562 216.094 129.734 215.281 131.641H215.016V128.906H211.281V146Z" fill="currentColor"/>
<path d="M34.1832 58.6275H43.0505V71.6072L55.2347 58.6275H65.9973L50.2933 75.5344L66.2004 93.3067H54.4901L43.9982 81.0592L43.0505 82.1907V93.3067H34.1832V58.6275Z" fill="#006C43"/>
<path d="M69.2464 58.6275H78.2491L87.3872 80.3935L97.5406 58.6275H106.543L84.4765 105.954H75.3384L82.6489 90.7108L69.2464 58.6275Z" fill="#006C43"/>
<path d="M192.983 93.3067H188.312V58.6275H196.909V78.9957L214.982 58.6275H219.246V93.3067H210.582V73.4044L192.983 93.3067Z" fill="#006C43"/>
......
src/view/block/header/Header.scss
......@@ -7,4 +7,10 @@
background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
z-index: 10;
@media (max-width: $mobile) {
min-height: 50px;
background-color: transparent;
box-shadow: none;
}
}
src/view/cmp/button/Button.jsx
import './button.scss';
export default D.declare('view.cmp.Button', function(cfg, children) {
return <button type={cfg.type} class={'button'} {...cfg}>{children}</button>
return <button type={'button' || cfg.type} class={'button'} {...cfg}>{children}</button>
});
src/view/cmp/button/button.scss
......@@ -3,7 +3,7 @@
box-sizing: border-box;
padding: 0 32px;
text-align: center;
font-family: inherit;
font-family: $font;
font-weight: 500;
font-size: 17px;
line-height: 36px;
......@@ -15,6 +15,11 @@
border-radius: 25px;
cursor: pointer;
@media (max-width: $mobile) {
font-family: $font-mobile;
font-size: 14px;
}
&:active {
color: $accent-medium;
}
......@@ -51,6 +56,10 @@
background-color: $accent-main;
border-color: $accent-main;
@media (max-width: $mobile) {
font-size: 16px;
}
&:active {
color: $bg-main;
background-color: $accent-medium;
......@@ -79,6 +88,10 @@
border-color: $bg-main;
box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
@media (max-width: $mobile) {
font-size: 16px;
}
&:active {
color: #030303;
background-color: $bg-accent;
......@@ -110,6 +123,10 @@
background-color: $bg-main;
border-color: $accent-dark;
@media (max-width: $mobile) {
font-size: 16px;
}
&:active {
color: $bg-main;
background-color: $accent-dark;
......
src/view/cmp/field/LabeledField.scss
......@@ -12,14 +12,26 @@
.labeled-field__label-text {
@include mainBodyText;
margin-bottom: 25px;
@media (max-width: $mobile) {
margin-bottom: 20px;
}
.login-page & {
@media (max-width: $mobile) {
min-height: 38px;
}
}
}
.labeled-field__input {
display: block;
box-sizing: border-box;
width: 300px;
max-width: 100%;
height: 50px;
font-family: inherit;
font-weight: 500;
text-align: center;
font-size: 17px;
line-height: 36px;
......@@ -28,6 +40,11 @@
border: 1px solid rgba(208, 209, 209, 0.8);
border-radius: 25px;
@media (max-width: $mobile) {
font-weight: 400;
font-size: 16px;
}
&::placeholder {
color: $gray-medium;
}
......@@ -67,4 +84,11 @@
font-size: 16px;
line-height: 30px;
color: $red;
@media (max-width: $mobile) {
transform: translate(-50%, 9px);
font-size: 12px;
line-height: 17px;
letter-spacing: 0.01em;
}
}
src/view/page/login/Login.jsx
......@@ -8,7 +8,7 @@ import ArrB from '../../../svg/arr-back.svg';
/*import {AsyncAjax} from '/core/Ajax.jsx';
import {API} from '/dict/Consts.jsx';*/
const {AND, OR} = Store;
const {AND, OR, IF} = Store;
export default D.declare('view.page.Login', () => {
const loginStore = new Store({
phone: '7123456789',
......@@ -53,15 +53,16 @@ export default D.declare('view.page.Login', () => {
<div class="login-page__big-logo">
<Logo width="660" height="300"/>
</div>
<h1 class="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<Switch store={loginStore} key='authHelp'>
<Switch.Item id={false}>
<h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<form action="#" method="post" className="authorization-form">
<Switch store={loginStore} key='active'>
<Switch.Item id='enterPhone'>
<view.cmp.field.LabeledField required label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/>
<Button
class={"button button--primary authorization-form__button"}
type={"button"}
onclick={checkPhone}
disabled={OR(
loginStore.valFalse('phoneValid'),
......@@ -71,19 +72,22 @@ export default D.declare('view.page.Login', () => {
</Switch.Item>
<Switch.Item id='enterCode'>
<button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
<view.cmp.field.LabeledField required label={'Введите код из СМС'} placeholder={'Код'} type={'number'} bind={loginStore.bind('code')}
<view.cmp.field.LabeledField
required
label={'Введите код из СМС'}
placeholder={'Код'}
type={'number'}
bind={loginStore.bind('code')}
invalid={loginStore.valTrue('codeError')}
>
{ _ =>loginStore.sub( 'codeError', codeError =>
_( codeError
? <span class={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
: null )
)
}
<IF condition={loginStore.valTrue('codeError')}>
<span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
</IF>
</view.cmp.field.LabeledField>
<Button
class={"button button--primary authorization-form__button"}
type={"button"}
onclick={checkCode}
disabled={OR(
loginStore.valFalse('codeValid'),
......@@ -91,14 +95,18 @@ export default D.declare('view.page.Login', () => {
)}><span>Далее</span><Arr width="17" height="11"/></Button>
</Switch.Item>
</Switch>
<Button onClick={() => loginStore.set('authHelp', true)}>Проблемы с авторизацией?</Button>
<Button onClick={() => loginStore.set('authHelp', true)} type={"button"}>Проблемы с авторизацией?</Button>
</form>
</Switch.Item>
<Switch.Item id={true}>
<div class={"login-page__back-link"}>
<Button onClick={() => loginStore.set('authHelp', false)}><ArrB width="17" height="11"/><span>Вернуться к авторизации</span></Button>
<Button onClick={() => loginStore.set('authHelp', false)} type={"button"}><ArrB width="17" height="11"/><span>Вернуться к авторизации</span></Button>
</div>
<h2 class="login-page__headline">Проблемы с авторизацией?</h2>
<div class="login-page__text">
<p>Текст про&nbsp;то, куда писать и&nbsp;звонить Текст про&nbsp;то, куда писать и&nbsp;звонить, текст про&nbsp;то, куда писать и&nbsp;звонить</p>
</div>
<a href="tel:88000000000" className="login-page__support">8 800 000 00 00</a>
</Switch.Item>
</Switch>
</div>
......
src/view/page/login/loginPage.scss
......@@ -10,12 +10,27 @@
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
@media (max-width: $mobile) {
margin: 0;
padding: 0 30px 30px;
background-image: url("/uploads/images/bg-leaves-mob.svg");
}
}
.login-page__big-logo {
margin-bottom: 35px;
width: 300px;
height: 147px;
color: $accent-dark;
@media (max-width: $mobile) {
margin-top: -16px;
margin-bottom: 31px;
width: 150px;
height: 80px;
color: #353535;
}
}
.login-page__big-logo svg {
......@@ -28,6 +43,10 @@
@include headline;
margin: 0 auto 14px;
max-width: 800px;
@media (max-width: $mobile) {
margin-bottom: 22px;
}
}
.authorization-form__button {
......@@ -40,3 +59,35 @@
left: 37px;
z-index: 11;
}
.login-page__headline {
@include headline;
margin: 0;
}
.login-page__text {
@include mainBodyText;
margin: 22px auto 25px;
max-width: 385px;
}
.login-page__text p {
margin: 0 0 23px;
}
.login-page__text p:last-child {
margin-bottom: 0;
}
.login-page__support {
@include mainBodyText;
text-decoration: none;
color: $accent-dark;
&:hover,
&:active,
&:focus {
color: $accent-medium;
outline: none;
}
}
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