Skip to content

K
kus-admin
Commit 05ea816e by talequale
Options

account link

parent a573a6b5
Showing with 129 additions and 68 deletions
src/global-styles/mixins.scss
...@@ -37,6 +37,15 @@ ...@@ -37,6 +37,15 @@
list-style: none; list-style: none;
} }
@mixin btn-reset {
display: inline-block;
vertical-align: top;
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
}
@mixin hover { @mixin hover {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
......
src/main.jsx
import './view/page/login/Login.jsx'; import './view/page/login/Login.jsx';
import './view/page/account/WelcomePage.jsx'; import './view/page/account/WelcomePage.jsx';
import './view/page/account/Account.jsx'; import './view/page/account/Account.jsx';
import './view/page/account/Profile.jsx';
import './view/page/tmp/Fields.jsx'; import './view/page/tmp/Fields.jsx';
import Header from './view/block/header/Header.jsx'; import Header from './view/block/header/Header.jsx';
......
src/svg/cross.svg 0 → 100644
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.8552 4.45284L4.44862 17.8595c-.46863.4686-.46863 1.2284 0 1.697.46862.4686 1.22841.4686 1.69704 0L19.5523 6.14988c.4686-.46862.4686-1.22841 0-1.69704-.4687-.46862-1.2284-.46862-1.6971 0z" fill="currentColor"/>
<path d="M19.5523 17.8551L6.14566 4.44851c-.46863-.46863-1.22842-.46863-1.69704 0-.46863.46862-.46863 1.22841 0 1.69704L17.8552 19.5522c.4687.4686 1.2284.4686 1.6971 0 .4686-.4687.4686-1.2285 0-1.6971z" fill="currentColor"/>
</svg>
src/view/block/account/Account.jsx 0 → 100644
import './account.scss';
import User from "/svg/user.svg";
import Rating from '../ratingBlock/Rating.jsx';
const AccountBlock = D.declare('view.block.AccountBlock', () => {
return <div class="account">
<h2 class="account__headline">Личный кабинет</h2>
<div class="account__info">
<h3 class="account__name">
<User width="32" height="32"/>
<span>{'Ким Ир Сен Константин Му Константинович Константинопольский'.split(/\s/).map(word => <div
cls="title-name-word">{word}</div>)}</span>
</h3>
<p>Химки-2</p>
<p>Кассир</p>
</div>
<div class="account__rating">
<Rating/>
</div>
</div>
});
export default AccountBlock;
export {AccountBlock};
src/view/block/account/account.scss 0 → 100644
.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;
}
.title-name-word {
display: inline-block;
vertical-align: top;
margin-right: 0.5em;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
src/view/block/header/Header.jsx
...@@ -26,13 +26,13 @@ export default D.declare('view.block.Header', () => { ...@@ -26,13 +26,13 @@ export default D.declare('view.block.Header', () => {
<div class="page-header__user-block"> <div class="page-header__user-block">
<Button class={"button page-header__profile-link"} <Button class={"button page-header__profile-link"}
type={"button"} type={"button"}
aria-label={"Ссылка на страницу личного кабинетаа"} aria-label={"Перейти на страницу профиля"}
> >
<User width="32" height="32"/><span>Иванов Иван</span> <User width="32" height="32"/><span>Иванов Иван</span>
</Button> </Button>
<Button class={"button page-header__logout-link"} <Button class={"button page-header__logout-link"}
type={"button"} type={"button"}
aria-label={"Кнопка выхода"} aria-label={"Выйти из аккаунта"}
> >
<Logout width="18" height="18"/><span>Выйти</span> <Logout width="18" height="18"/><span>Выйти</span>
</Button> </Button>
......
src/view/page/account/Account.jsx
import './accountPage.scss'; import './accountPage.scss';
import User from "/svg/user.svg"; import AccountBlock from '../../block/account/Account.jsx';
import Rating from '../../block/ratingBlock/Rating.jsx';
const Account = D.declare('view.page.Account', () => { const Account = D.declare('view.page.Account', () => {
return <div class="account-page"> return <div class="account-page">
<h1 class="readers-only">Страница личного кабинета сотрудника</h1> <h1 class="readers-only">Страница личного кабинета сотрудника</h1>
<div class="account-page__wrapper"> <div class="account-page__wrapper">
<div class="account-page__menu"> <div class="account-page__menu">
<div className="account-page__menu-inner"> <div class="account-page__menu-inner">
<div class="account"> <AccountBlock />
<h2 class="account__headline">Личный кабинет</h2>
<div class="account__info">
<h3 class="account__name">
<User width="32" height="32" />
<span>{'Ким Ир Сен Константин Му Константинович Константинопольский'.split(/\s/).map(word=><div cls="title-name-word">{word}</div>)}</span>
</h3>
<p>Химки-2</p>
<p>Кассир</p>
</div>
<div class="account__rating">
<Rating />
</div>
</div>
</div> </div>
</div> </div>
<div class="account-page__content"> <div class="account-page__content">
...@@ -75,4 +61,4 @@ const Account = D.declare('view.page.Account', () => { ...@@ -75,4 +61,4 @@ const Account = D.declare('view.page.Account', () => {
}); });
export default Account; export default Account;
export {Account}; export {Account};
\ No newline at end of file
src/view/page/account/Profile.jsx 0 → 100644
import './profilePage.scss';
import AccountBlock from '../../block/account/Account.jsx';
import Cross from '/svg/cross.svg';
const Profile = D.declare('view.page.Profile', () => {
return <div class="profile-page">
<button class="profile-page__link-back" onclick={()=> store.set( 'navigation.current', 'Account')} type="button" aria-label="Вернуться на страницу аккаунта">
<Cross width="24" height="24"/>
</button>
<div class="profile-page__wrapper">
<AccountBlock/>
</div>
</div>
});
export default Profile;
export {Profile};
src/view/page/account/accountPage.scss
...@@ -39,48 +39,3 @@ ...@@ -39,48 +39,3 @@
max-height: calc(100vh - 120px); max-height: calc(100vh - 120px);
overflow-y: scroll; overflow-y: scroll;
} }
.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;
}
.title-name-word {
display: inline-block;
vertical-align: top;
margin-right: 0.5em;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
src/view/page/account/profilePage.scss 0 → 100644
.profile-page {
@include pageInner;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background-color: $bg-accent;
z-index: 100;
overflow-y: auto;
}
.profile-page__link-back {
@include btn-reset;
@include hover;
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
color: $text-main;
}
src/view/page/index.jsx
export {Account} from "./account/Account"; export {Account} from "./account/Account";
export {Profile} from "./account/Profile";
export {WelcomePage} from "./account/WelcomePage"; export {WelcomePage} from "./account/WelcomePage";
export {Login} from "./login/Login"; export {Login} from "./login/Login";
...@@ -6,4 +7,4 @@ export {Login} from "./login/Login"; ...@@ -6,4 +7,4 @@ export {Login} from "./login/Login";
//export {LoginCode} from "./login/LoginCode"; //export {LoginCode} from "./login/LoginCode";
export {Fields} from "./tmp/Fields"; export {Fields} from "./tmp/Fields";
export {TestRequests} from "./tmp/TestRequests"; export {TestRequests} from "./tmp/TestRequests";
\ 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