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

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/accountPage.scss

+.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