Skip to content

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

wait till DOM is ready for slider draw

parents f79c0f13 2211acd2
Showing with 468 additions and 187 deletions
src/controller/MainController.jsx
......@@ -30,8 +30,8 @@ store.sub(['navigation.current', 'loaded.cards'], async function(page, loaded) {
});
tmpStore.sub([
'isMobile', 'navigation.current'
], (is, page)=>{
if(!is && page === 'Profile')
'isMobile', 'navigation.current', 'loaded'
], (is, page, loaded)=>{
if(!is && page === 'Profile' && loaded)
store.set('navigation.current', 'Account');
});
\ No newline at end of file
src/model/Store.js
......@@ -81,3 +81,8 @@ const tmpStore = new Store({
width: window.innerWidth
});
let lastNav = null;
store.sub('navigation.current', function(val) {
console.log('APP:navigation', lastNav,'→', val);
lastNav = val;
});
\ No newline at end of file
src/svg/icon-base.svg 0 → 100644
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.9999 26.9895H5.06652V21.0438C5.06652 20.3758 4.53319 19.8413 3.86651 19.8413C3.19984 19.8413 2.6665 20.3758 2.6665 21.0438V28.192C2.6665 28.8601 3.19984 29.3945 3.86651 29.3945H10.9999C11.6666 29.3945 12.1999 28.8601 12.1999 28.192C12.1999 27.524 11.6666 26.9895 10.9999 26.9895Z" fill="#4591A9"/>
<path d="M3.86651 12.2256C4.53319 12.2256 5.06652 11.6911 5.06652 11.0231V5.07737H10.9999C11.6666 5.07737 12.1999 4.54293 12.1999 3.87487C12.1999 3.20681 11.6666 2.67236 10.9999 2.67236H3.86651C3.19984 2.67236 2.6665 3.20681 2.6665 3.87487V11.0231C2.6665 11.6911 3.19984 12.2256 3.86651 12.2256Z" fill="#4591A9"/>
<path d="M20.9998 5.07737H26.9332V11.0231C26.9332 11.6911 27.4665 12.2256 28.1332 12.2256C28.7999 12.2256 29.3332 11.6911 29.3332 11.0231V3.87487C29.3332 3.20681 28.7999 2.67236 28.1332 2.67236H20.9998C20.3331 2.67236 19.7998 3.20681 19.7998 3.87487C19.7998 4.54293 20.3331 5.07737 20.9998 5.07737Z" fill="#4591A9"/>
<path d="M28.1332 19.8413C27.4665 19.8413 26.9332 20.3758 26.9332 21.0438V26.9895H20.9998C20.3331 26.9895 19.7998 27.524 19.7998 28.192C19.7998 28.8601 20.3331 29.3945 20.9998 29.3945H28.1332C28.7999 29.3945 29.3332 28.8601 29.3332 28.192V21.0438C29.3332 20.3758 28.7999 19.8413 28.1332 19.8413Z" fill="#4591A9"/>
<path d="M30.7333 14.7642H26.4C25.6666 14.7642 25.1333 15.3654 25.1333 16.0335C25.1333 16.7683 25.7333 17.3028 26.4 17.3028H30.7333C31.4667 17.3028 32 16.7015 32 16.0335C32 15.2986 31.4 14.7642 30.7333 14.7642Z" fill="#4591A9"/>
<path d="M6.93339 16.0335C6.93339 15.2986 6.33339 14.7642 5.66671 14.7642H1.26668C0.600005 14.7642 0 15.2986 0 16.0335C0 16.7683 0.600005 17.3028 1.26668 17.3028H5.60005C6.33339 17.3028 6.93339 16.7683 6.93339 16.0335Z" fill="#4591A9"/>
<path d="M16.0001 25.1191C15.2667 25.1191 14.7334 25.7204 14.7334 26.3885V30.7308C14.7334 31.4657 15.3334 32.0001 16.0001 32.0001C16.7334 32.0001 17.2668 31.3989 17.2668 30.7308V26.3885C17.2668 25.7204 16.7334 25.1191 16.0001 25.1191Z" fill="#4591A9"/>
<path d="M16.0001 6.9478C16.7334 6.9478 17.2668 6.34655 17.2668 5.67849V1.26931C17.2668 0.601252 16.7334 0 16.0001 0C15.2667 0 14.7334 0.601252 14.7334 1.26931V5.61169C14.7334 6.34655 15.2667 6.9478 16.0001 6.9478Z" fill="#4591A9"/>
<path d="M15.4446 10.6108L7.67444 13.7392C7.39693 13.8783 7.39693 14.2954 7.67444 14.3649L10.8658 15.6163L10.9351 15.1296C11.0045 14.3649 11.4902 13.7392 12.2533 13.4611L15.514 12.4183C15.7221 12.3488 15.8609 12.3488 16.069 12.3488C16.2771 12.3488 16.4159 12.3488 16.624 12.4183L18.4278 12.9745V11.445C18.4278 11.3755 18.4278 11.3755 18.4278 11.306L16.624 10.5413C16.2078 10.4717 15.7915 10.4717 15.4446 10.6108Z" fill="#4591A9"/>
<path d="M21.1342 15.6165L24.3255 14.3651C24.603 14.2261 24.603 13.8089 24.3255 13.7394L20.5098 12.21V13.948C20.8566 14.2261 21.0648 14.7127 21.0648 15.1298L21.1342 15.6165Z" fill="#4591A9"/>
<path d="M18.3592 13.7394L16.3473 13.1137C16.1392 13.0441 15.8617 13.0441 15.6535 13.1137L12.3928 14.1565C11.9072 14.2955 11.6297 14.7126 11.5603 15.1993L11.144 21.039C11.144 21.3866 11.4909 21.6647 11.8378 21.5257L15.5148 20.1353C15.7923 20.0657 16.1392 20.0657 16.4167 20.1353L20.0936 21.5257C20.4405 21.6647 20.7874 21.3866 20.7874 21.039L20.5793 18.1192H18.0817L18.2898 16.4507C18.1511 16.2421 18.0123 15.964 18.0123 15.6859C18.0123 15.4079 18.0817 15.0602 18.2898 14.8517V13.7394H18.3592Z" fill="#4591A9"/>
<path d="M19.0529 16.2422L18.8448 17.4241H20.0242L19.8854 16.2422C20.0242 16.1032 20.1629 15.8946 20.1629 15.686C20.1629 15.4775 20.0242 15.2689 19.8854 15.1299V11.5148C19.8854 11.3062 19.6773 11.0977 19.4692 11.0977C19.261 11.0977 19.0529 11.3062 19.0529 11.5148V15.1299C18.8448 15.2689 18.7754 15.4775 18.7754 15.686C18.7754 15.8946 18.8448 16.1032 19.0529 16.2422Z" fill="#4591A9"/>
</svg>
src/svg/icon-result.svg 0 → 100644
<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33 10.3659C33 9.11707 32.1805 8.06341 31.0488 7.75122C30.8927 4.00488 27.8098 1 24.0244 1H9.97561C6.1122 1 2.95122 4.16098 2.95122 8.02439V17.1171C1.81951 17.4683 1 18.4829 1 19.7317C1 20.9805 1.81951 22.0341 2.95122 22.3463C3.10732 26.0927 6.19024 29.0976 9.97561 29.0976H24.0244C27.8878 29.0976 31.0488 25.9366 31.0488 22.0732V12.9805C32.1805 12.6293 33 11.6146 33 10.3659ZM9.97561 2.56098H24.0244C26.9512 2.56098 29.3317 4.86341 29.4878 7.75122C28.3561 8.10244 27.5366 9.11707 27.5366 10.3659C27.5366 10.7561 27.6146 11.1073 27.7707 11.4585L23.9073 16.2195C23.4 15.5171 22.5805 15.0488 21.6829 15.0488C20.5902 15.0488 19.6537 15.7122 19.1854 16.6488L14.9707 14.5415C14.7756 13.2927 13.6439 12.3171 12.3171 12.3171C10.9122 12.3171 9.78049 13.3707 9.62439 14.6976L6.03415 18.2878C5.68293 17.7415 5.13659 17.3122 4.5122 17.1171V8.02439C4.51219 5.01951 6.97073 2.56098 9.97561 2.56098ZM12.3171 16.2195C11.6537 16.2195 11.1463 15.7122 11.1463 15.0488C11.1463 14.3854 11.6537 13.878 12.3171 13.878C12.9805 13.878 13.4878 14.3854 13.4878 15.0488C13.4878 15.7122 12.9805 16.2195 12.3171 16.2195ZM13.0976 17.6634C13.839 17.4293 14.4634 16.8829 14.8146 16.1805L19.0293 18.2878C19.2244 19.3024 19.9659 20.122 20.9415 20.3951V27.5366H13.0976V17.6634ZM21.6829 18.9512C21.0195 18.9512 20.5122 18.4439 20.5122 17.7805C20.5122 17.1171 21.0195 16.6098 21.6829 16.6098C22.3463 16.6098 22.8537 17.1171 22.8537 17.7805C22.8537 18.4439 22.3463 18.9512 21.6829 18.9512ZM2.56098 19.7317C2.56098 19.0683 3.06829 18.561 3.73171 18.561C4.39512 18.561 4.90244 19.0683 4.90244 19.7317C4.90244 20.3951 4.39512 20.9024 3.73171 20.9024C3.06829 20.9024 2.56098 20.3951 2.56098 19.7317ZM4.5122 22.3463C5.52683 22.0341 6.26829 21.1756 6.42439 20.0829L10.0146 16.4927C10.3659 17.039 10.9122 17.4683 11.5366 17.6634V27.5366H9.97561C7.04878 27.5366 4.66829 25.2341 4.5122 22.3463ZM24.0244 27.5366H22.4634V20.3951C23.5171 20.0829 24.2585 19.1854 24.4146 18.0927L28.8244 12.6683C29.0195 12.7854 29.2537 12.9024 29.5268 12.9805V22.0732C29.4878 25.078 27.0293 27.5366 24.0244 27.5366ZM30.2683 11.5366C29.6049 11.5366 29.0976 11.0293 29.0976 10.3659C29.0976 9.70244 29.6049 9.19512 30.2683 9.19512C30.9317 9.19512 31.439 9.70244 31.439 10.3659C31.439 11.0293 30.9317 11.5366 30.2683 11.5366Z" fill="#C10A78" stroke="#C10A78" stroke-width="0.6"/>
</svg>
src/svg/icon-testing.svg 0 → 100644
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 23V2H21.7276C22.4903 2 23.2237 2.32009 23.7752 2.89373L31.083 10.4939C32.3425 11.8038 32.2986 14.008 30.9882 15.2573L29.6863 13.638C30.1231 13.2216 30.1377 12.4869 29.7179 12.0502L22.4101 4.45008C22.2263 4.25887 21.9818 4.15217 21.7276 4.15217H3.97646V20.8478H21.7522C21.9917 20.8478 22.223 20.7531 22.4032 20.5814L29.6863 13.638L30.9882 15.2573L23.7051 22.2006C23.1646 22.7159 22.4706 23 21.7522 23H2Z" fill="#34BE5B"/>
<path d="M2 1.03125C2 0.461707 2.43372 0 2.96875 0H3.03125C3.56627 0 4 0.461706 4 1.03125V30H2L2 1.03125Z" fill="#34BE5B"/>
<path d="M0.0322266 30.0605C0.0322266 29.525 0.466375 29.0908 1.00192 29.0908H6.28834C6.82388 29.0908 7.25803 29.525 7.25803 30.0605C7.25803 30.5961 6.82388 31.0302 6.28834 31.0302H1.00192C0.466375 31.0302 0.0322266 30.5961 0.0322266 30.0605Z" fill="#34BE5B"/>
<path d="M0 31C0 30.4477 0.308426 30 0.688889 30H21.3111C21.6916 30 22 30.4477 22 31C22 31.5523 21.6916 32 21.3111 32H0.688887C0.308425 32 0 31.5523 0 31Z" fill="#34BE5B"/>
<path d="M15.5 19C19.0901 19 22 16.0901 22 12.5C22 8.90988 19.0901 6 15.5 6C11.9099 6 9 8.90988 9 12.5C9.03779 16.0901 11.9477 19 15.5 19ZM15.5 7.73837C18.1453 7.73837 20.2616 9.89244 20.2616 12.5C20.2616 15.1453 18.1076 17.2616 15.5 17.2616C12.8924 17.2616 10.7384 15.1076 10.7384 12.5C10.7384 9.89244 12.8924 7.73837 15.5 7.73837Z" fill="#34BE5B"/>
<path d="M14.3502 14.6215C14.4959 14.7926 14.7145 14.8611 14.9695 14.8611C15.1881 14.8611 15.4067 14.7584 15.5889 14.6215L17.9206 12.26C18.2485 11.952 18.212 11.4386 17.8841 11.1648C17.5562 10.8568 17.0098 10.891 16.7183 11.199L14.9695 12.9445L14.3502 12.2942C14.0223 11.9862 13.5122 11.952 13.1843 12.26C12.8564 12.568 12.82 13.0472 13.1479 13.3552L14.3502 14.6215Z" fill="#34BE5B"/>
</svg>
src/svg/icon-trial.svg 0 → 100644
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 17C19.314 17 22 14.314 22 11C22 7.68605 19.314 5 16 5C12.686 5 10 7.68605 10 11C10.0349 14.314 12.7209 17 16 17ZM16 6.60465C18.4419 6.60465 20.3953 8.59302 20.3953 11C20.3953 13.4419 18.407 15.3953 16 15.3953C13.593 15.3953 11.6047 13.407 11.6047 11C11.6047 8.59302 13.593 6.60465 16 6.60465Z" fill="#EC7B3F"/>
<path d="M15.3228 12.786C15.4575 12.9625 15.6596 13.0331 15.8954 13.0331C16.0975 13.0331 16.2996 12.9272 16.4681 12.786L18.6239 10.3507C18.927 10.0331 18.8933 9.50368 18.5902 9.22132C18.287 8.90368 17.7818 8.93897 17.5123 9.25662L15.8954 11.0566L15.3228 10.386C15.0196 10.0684 14.5481 10.0331 14.2449 10.3507C13.9418 10.6684 13.9081 11.1625 14.2112 11.4801L15.3228 12.786Z" fill="#EC7B3F"/>
<path d="M30.5853 20.3412H25.4653V1.44706C25.4653 0.670588 24.8589 0 24.0842 0H2.89684C2.12211 0 1.48211 0.670588 1.48211 1.44706V6.29412H0.774737C0.336842 6.29412 0 6.64706 0 7.10588C0 7.56471 0.336842 7.91765 0.774737 7.91765H1.51579V12.2235H0.774737C0.336842 12.2235 0 12.5765 0 13.0353C0 13.4941 0.336842 13.8471 0.774737 13.8471H1.51579V18.1529H0.774737C0.336842 18.1529 0 18.5059 0 18.9647C0 19.4235 0.336842 19.7765 0.774737 19.7765H1.51579V24.0824H0.774737C0.336842 24.0824 0 24.4353 0 24.8941C0 25.3529 0.336842 25.7059 0.774737 25.7059H1.51579V30.5176C1.51579 31.3294 2.15579 32 2.93053 32H24.0842C24.8589 32 25.4653 31.3294 25.4653 30.5176V26.5176H30.5853C31.36 26.5176 32 25.8471 32 25.0353V21.8588C32 21.0118 31.36 20.3412 30.5853 20.3412ZM14.3158 24.8588L12.1263 23.4118L14.2821 21.9647H15.4274V24.8941H14.3158V24.8588ZM16.9768 21.9294L27.0484 21.8588V24.8588H16.9768V21.9294ZM3.03158 25.6353H3.77263C4.21053 25.6353 4.54737 25.2824 4.54737 24.8235C4.54737 24.3647 4.21053 24.0118 3.77263 24.0118H3.03158V19.7412H3.77263C4.21053 19.7412 4.54737 19.3882 4.54737 18.9294C4.54737 18.4706 4.21053 18.1176 3.77263 18.1176H3.03158V13.8118H3.77263C4.21053 13.8118 4.54737 13.4588 4.54737 13C4.54737 12.5412 4.21053 12.1882 3.77263 12.1882H3.03158V7.88235H3.77263C4.21053 7.88235 4.54737 7.52941 4.54737 7.07059C4.54737 6.61176 4.21053 6.25882 3.77263 6.25882H3.03158V1.58824H6.1979V30.3059H3.03158V25.6353ZM23.9495 30.3412H7.78105V1.58824H23.9495V20.3412H14.2821C14.0126 20.3412 13.7432 20.4118 13.5411 20.5529L11.1495 22.1412C10.7453 22.4235 10.4758 22.8824 10.4758 23.4118C10.4758 23.9412 10.7116 24.4 11.1495 24.6824L13.5411 26.2706C13.7768 26.4118 14.0126 26.4824 14.2821 26.4824H23.9158V30.3412H23.9495ZM28.5979 24.8588V21.8235H30.4505L30.5853 24.8588H28.5979Z" fill="#EC7B3F"/>
</svg>
src/view/block/accountNav/AccountNavigation.jsx 0 → 100644
import Button from '../../cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
import IconTest from '/svg/icon-testing.svg';
import IconTrial from '/svg/icon-trial.svg';
import IconBase from '/svg/icon-base.svg';
import IconResult from '/svg/icon-result.svg';
import './accountNavigation.scss';
const AccountNavigation = D.declare('view.block.AccountNavigation', () => {
return <div class="account-navigation">
<h2 class="account-navigation__title">Сегодня вы можете:</h2>
<ul className="account-navigation__list">
<li className="account-navigation__item">
<Button class={"button button--secondary account-navigation__button"}>
<IconTest width="32" height="32"/>
<span>Пройти итоговое тестирование</span>
<Arr width="17" height="11"/>
</Button>
</li>
<li className="account-navigation__item">
<Button class={"button button--secondary account-navigation__button"}>
<IconTrial width="32" height="32"/>
<span>Пройти пробное тестирование</span>
<Arr width="17" height="11"/>
</Button>
</li>
<li className="account-navigation__item">
<Button class={"button button--secondary account-navigation__button"}>
<IconBase width="32" height="32"/>
<span>Посмотреть базу знаний</span>
<Arr width="17" height="11"/>
</Button>
</li>
<li className="account-navigation__item">
<Button class={"button button--secondary account-navigation__button"}>
<IconResult width="32" height="32"/>
<span>Все результаты моих тестов</span>
<Arr width="17" height="11"/>
</Button>
</li>
</ul>
</div>
})
export default AccountNavigation;
export {AccountNavigation};
src/view/block/accountNav/accountNavigation.scss 0 → 100644
.account-navigation__title {
@include lesserHeadline;
margin: 0 0 20px;
padding-left: 4px;
@media (max-width: $mobile) {
display: none;
}
}
.account-navigation__list {
@include list-reset;
}
.account-navigation__item {
margin-bottom: 30px;
width: 430px;
@media (max-width: $mobile) {
margin-bottom: 21px;
width: 100%;
}
}
.account-navigation__item:last-child {
margin-bottom: 0;
}
.account-navigation__item .account-navigation__button {
padding-left: 70px;
width: 100%;
text-align: left;
@media (max-width: $mobile) {
padding-left: 60px;
padding-right: 10px;
font-size: 16px;
letter-spacing: 0.35px;
svg:last-child {
display: none;
}
}
@media (max-width: 359px) {
font-size: 15px;
letter-spacing: 0;
}
}
src/view/cmp/button/button.scss
......@@ -86,10 +86,11 @@
}
.button--secondary {
padding: 5px 44px;
padding: 6px 45px;
min-width: 200px;
color: #030303;
background-color: $bg-main;
border-width: 1px;
border-color: $bg-main;
box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
......@@ -106,10 +107,8 @@
}
&:focus {
padding: 6px 45px;
color: #030303;
background-color: $bg-main;
border-width: 1px;
border-color: $accent-main;
outline: none;
box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
......
src/view/cmp/card/card.scss
......@@ -196,3 +196,8 @@ button.card__button {
filter: grayscale(100%);
opacity: 0.5;
}
.card--disabled img {
object-fit: contain;
object-position: center;
}
src/view/cmp/cardSlider/CardSlider.jsx
......@@ -112,7 +112,7 @@ const CardSlider = (function(){
waitTimeout = setTimeout(tuneScrollPosition, 80);
};
let dom;
let theDOM = <div class={D.cls('card-slider', {'card-slider__no-arrow-next': rightButtonDisabled})}>
let theDOM = <div class={D.cls('card-slider', {'card-slider--no-arrow-next': rightButtonDisabled})}>
<button class={D.cls(
'button',
'button--round',
......
src/view/cmp/cardSlider/CardSlider.scss
......@@ -15,8 +15,8 @@
}
@media (max-width: $mobile) {
margin: 0 -20px;
padding: 7px 0;
margin: 0 -20px -5px;
padding: 7px 0 0;
width: calc(100% + 40px);
}
}
......@@ -86,3 +86,10 @@
display: none;
}
.card-slider--no-arrow-next {
&::before {
opacity: 0;
}
}
src/view/cmp/infoCard/InfoCard.jsx
import './infoCard.scss';
import Button from "../button/Button";
import ProductCard from '../productCard/ProductCard.jsx';
import Back from '/svg/arr-back.svg';
import Arr from '/svg/arr.svg';
import Info from '/svg/info.svg';
const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => {
return <div class="info-card">
......@@ -15,25 +15,7 @@ const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => {
</div>
</div>
<div className="info-card__body">
<div className="info-card__image">
<img src="/uploads/images/product1.jpg" alt=""/>
</div>
<div className="info-card__list">
<h2>Ингредиенты</h2>
<ul>
<li>Вареная сгущенка </li>
<li>Мука </li>
<li>Масло сливочное </li>
<li>Сахар </li>
<li>Ингредиент</li>
</ul>
</div>
<div className="info-card__text">
<Info width="30" height="30"/>
<p><b>Важно знать.</b>Информация о&nbsp;продукте. Все, что вы&nbsp;хотели знать, но&nbsp;боялись спросить.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia augue quam, in&nbsp;dapibus nulla ullamcorper nec. Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl. </p>
<p>Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl.</p>
</div>
<ProductCard/>
</div>
<div className="info-card__footer">
<Button class={"button info-card__link"}><Back width="17" height="11"/><span>Предыдущая карточка</span></Button>
......
src/view/cmp/infoCard/infoCard.scss
......@@ -60,10 +60,7 @@
}
.info-card__body {
display: flex;
flex-wrap: wrap;
margin-bottom: 25px;
padding: 34px 40px 54px;
background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
border-radius: 6px;
......@@ -73,164 +70,13 @@
}
@media (max-width: $mobile) {
flex-direction: column;
margin-bottom: 14px;
padding: 0;
background-color: transparent;
border-radius: 0;
box-shadow: none;
}
}
.info-card__image {
flex: none;
margin: 6px 48px 52px 0;
width: 330px;
height: 190px;
background-image: linear-gradient(139.56deg, #F3F3F3 29.84%, #D1D1D1 102.3%);
border-radius: 10px;
overflow: hidden;
@media (max-width: $tablet) {
margin-right: 20px;
}
@media (max-width: $mobile) {
position: relative;
margin: 0 0 23px;
padding-top: 58%;
width: 100%;
height: 0;
border-radius: 6px;
overflow: hidden;
}
}
.info-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
@media (max-width: $mobile) {
position: absolute;
top: 0;
left: 0;
}
}
.info-card__list {
max-width: calc(100% - 350px);
@media (max-width: $mobile) {
box-sizing: border-box;
padding: 0 10px;
max-width: 100%;
}
}
.info-card__list h2 {
@include lesserHeadline;
margin: 0 0 17px;
@media (max-width: $mobile) {
margin-bottom: 3px;
}
}
.info-card__list ul {
@include list-reset;
@include subtitle;
margin-bottom: 50px;
font-weight: 500;
@media (max-width: $mobile) {
margin-bottom: 27px;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.info-card__list li {
position: relative;
margin-bottom: 5px;
padding-left: 21px;
@media (max-width: $mobile) {
margin-bottom: 3px;
padding-left: 9px;
}
}
.info-card__list li::before {
content: "";
position: absolute;
top: 8px;
left: 4px;
width: 5px;
height: 5px;
background-color: $accent-main;
border-radius: 50%;
@media (max-width: $mobile) {
top: 6px;
left: 1px;
width: 3px;
height: 3px;
}
}
.info-card__text {
@include bodyText;
position: relative;
padding-left: 55px;
@media (max-width: $mobile) {
padding: 8px 10px 0;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.info-card__text svg {
position: absolute;
top: 0;
left: 0;
color: $accent-main;
@media (max-width: $mobile) {
left: 10px;
}
}
.info-card__text p {
margin: 0;
}
.info-card__text b {
display: inline-block;
vertical-align: top;
margin-bottom: 2px;
margin-right: 4px;
@media (max-width: $mobile) {
display: block;
margin-bottom: 14px;
padding-left: 38px;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
color: $text-main;
}
}
.info-card__footer {
display: flex;
justify-content: space-between;
......
src/view/cmp/productCard/ProductCard.jsx 0 → 100644
import './productCard.scss';
import Info from "/svg/info.svg";
const ProductCard = D.declare('view.cmp.ProductCard', () => {
return <div class="product-card">
<div className="product-card__image">
<img src="/uploads/images/product1.jpg" alt=""/>
</div>
<div className="product-card__list">
<h2>Ингредиенты</h2>
<ul>
<li>Вареная сгущенка </li>
<li>Мука </li>
<li>Масло сливочное </li>
<li>Сахар </li>
<li>Ингредиент</li>
</ul>
</div>
<div className="product-card__text">
<Info width="30" height="30"/>
<p><b>Важно знать.</b>Информация о&nbsp;продукте. Все, что вы&nbsp;хотели знать, но&nbsp;боялись спросить.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia augue quam, in&nbsp;dapibus nulla ullamcorper nec. Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl. </p>
<p>Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl.</p>
</div>
</div>
})
export default ProductCard;
export {ProductCard};
src/view/cmp/productCard/productCard.scss 0 → 100644
.product-card {
display: flex;
flex-wrap: wrap;
padding: 34px 40px 54px;
@media (max-width: $tablet) {
padding: 20px 30px 40px;
}
@media (max-width: $mobile) {
flex-direction: column;
padding: 0;
}
}
.product-card__image {
flex: none;
margin: 6px 48px 52px 0;
width: 330px;
height: 190px;
background-image: linear-gradient(139.56deg, #F3F3F3 29.84%, #D1D1D1 102.3%);
border-radius: 10px;
overflow: hidden;
@media (max-width: $tablet) {
margin-right: 20px;
}
@media (max-width: $mobile) {
position: relative;
margin: 0 0 23px;
padding-top: 58%;
width: 100%;
height: 0;
border-radius: 6px;
overflow: hidden;
}
}
.product-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
@media (max-width: $mobile) {
position: absolute;
top: 0;
left: 0;
}
}
.product-card__list {
max-width: calc(100% - 350px);
@media (max-width: $mobile) {
box-sizing: border-box;
padding: 0 10px;
max-width: 100%;
}
}
.product-card__list h2 {
@include lesserHeadline;
margin: 0 0 17px;
@media (max-width: $mobile) {
margin-bottom: 3px;
}
}
.product-card__list ul {
@include list-reset;
@include subtitle;
margin-bottom: 50px;
font-weight: 500;
@media (max-width: $mobile) {
margin-bottom: 27px;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.product-card__list li {
position: relative;
margin-bottom: 5px;
padding-left: 21px;
@media (max-width: $mobile) {
margin-bottom: 3px;
padding-left: 9px;
}
}
.product-card__list li::before {
content: "";
position: absolute;
top: 8px;
left: 4px;
width: 5px;
height: 5px;
background-color: $accent-main;
border-radius: 50%;
@media (max-width: $mobile) {
top: 6px;
left: 1px;
width: 3px;
height: 3px;
}
}
.product-card__text {
@include bodyText;
position: relative;
padding-left: 55px;
@media (max-width: $mobile) {
padding: 8px 10px 0;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.product-card__text svg {
position: absolute;
top: 0;
left: 0;
color: $accent-main;
@media (max-width: $mobile) {
left: 10px;
}
}
.product-card__text p {
margin: 0;
}
.product-card__text b {
display: inline-block;
vertical-align: top;
margin-bottom: 2px;
margin-right: 4px;
@media (max-width: $mobile) {
display: block;
margin-bottom: 14px;
padding-left: 38px;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
color: $text-main;
}
}
src/view/page/account/Account.jsx
......@@ -4,6 +4,7 @@ import {AsyncAuthAjax} from "../../../controller/Ajax";
import {API} from "../../../dict/Consts";
import Card from "../../cmp/card/Card";
import CardSlider from "../../cmp/cardSlider/CardSlider";
import AccountNavigation from "../../block/accountNav/AccountNavigation";
const Account = D.declare('view.page.Account', () => {
let Slider = new CardSlider( {
......@@ -19,13 +20,12 @@ const Account = D.declare('view.page.Account', () => {
[
'loaded.cards',
'navigation.current',
tmpStore.bind( 'loaded' ),
tmpStore.bind( 'afterNavigation.to' ),
tmpStore.bind( 'newCardsLoaded' ),
],
function( loadedCards, page, loaded, newCardsLoaded ){
console.log( loadedCards, page, loaded, newCardsLoaded )
function( loadedCards, to, newCardsLoaded ){
if( newCardsLoaded !== loadedCards ){
if( loadedCards && page === 'Account' && loaded ){
if( loadedCards && to === 'Account' ){
_( cards
.getArray()
.filter( card => card.seen === false )
......@@ -52,6 +52,32 @@ const Account = D.declare('view.page.Account', () => {
<div class="account-page__cards">
<h2 class="account-page__title">Новые карточки для вашей должности:</h2>
{Slider}
<div className="account-page__no-cards">
<div className="account-page__no-cards-info">
<div className="account-page__no-cards-item">
<Card
type={'product'}
disabled
title={'Карточек нет'}
image={'/uploads/images/card-disabled.png'}
/>
</div>
<div className="account-page__no-cards-text">
<p>Вы&nbsp;просмотрели все новые карточки этого месяца.</p>
<p>Так держать!</p>
</div>
</div>
<div className="account-page__no-cards-image">
<picture>
<source srcset="uploads/images/assistant-nocards-mob.svg" media={"(max-width: 767px"}/>
<img src="uploads/images/assistant-nocards.svg" alt=""/>
</picture>
</div>
</div>
<div className="account-page__nav">
<AccountNavigation/>
</div>
</div>
</div>
......
src/view/page/account/accountPage.scss
......@@ -94,3 +94,95 @@
@include headline;
margin: 0 0 10px;
}
.account-page__no-cards {
display: flex;
align-items: flex-start;
margin-top: 37px;
max-width: 940px;
@media (max-width: $mobile) {
flex-direction: column;
margin-top: 0;
max-width: 100%;
}
}
.account-page__no-cards-info {
display: flex;
align-items: flex-start;
}
.account-page__no-cards-item {
flex: none;
margin-right: 38px;
margin-bottom: 30px;
@media (max-width: $desktopMin) {
margin-right: 20px;
}
@media (max-width: $mobile) {
display: none;
}
}
.account-page__no-cards-text {
@include mainBodyText;
flex: none;
padding-top: 25px;
width: 255px;
@media (max-width: $desktopMin) {
width: 200px;
}
@media (max-width: $mobile) {
padding-top: 0;
width: auto;
max-width: 100%;
}
}
.account-page__no-cards-text p {
margin: 0 0 23px;
@media (max-width: $mobile) {
margin-bottom: 10px;
}
}
.account-page__no-cards-image {
transform: translateY(-11%);
margin: 0 0 -103px auto;
max-width: calc(100% - 453px);
@media (max-width: $desktopMin) {
max-width: calc(100% - 385px);
}
@media (max-width: $mobile) {
transform: none;
margin: 0 0 14px;
width: 100%;
max-width: 100%;
}
}
.account-page__no-cards-image img {
display: block;
width: 100%;
height: auto;
@media (max-width: $mobile) {
margin: 0 auto;
width: 88%;
}
}
.account-page__nav {
@media (max-width: $mobile) {
margin: 0 -10px;
width: calc(100% + 20px);
}
}
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