<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script>
profile.init(@Model.User.ID);
</script>
<div class="center-main">
<div class="user-main-profile-info-container clearfix">
<div class="user-profile-photo @(isCurrentUser ? "is-current-user" : "")">
<img src="@Model.User.Photo" alt="">
</div>
<div class="main-profile-info @(isCurrentUser ? "is-current-user" : "not-current-user-profile")">
<h3 class="user-name">@Model.User.Surname @Model.User.Name</h3>
<div class="user-social user-social-white item-hidden">
<span class="user-icon user-like">88</span>
<span class="user-icon user-money">88</span>
</div>
<ul class="user-info">
<li><i class="position-card-rounded-icon"></i><span>@Model.User.Position</span></li>
@if (Model.User.Department != null)
{
<li><i class="department-card-rounded-icon"></i><span>@Model.User.Department.Title</span></li>
}
<li><i class="map-rounded-icon"></i><span>Москва</span></li>
</ul>
@if (!isCurrentUser)
{
<a class="user-position-card arrow-button" href="#">Карточка должности</a>
}
</div>
</div>
<section class="user-contacts">
<div class="user-tab-header">
<h3>Контакты</h3>
</div>
<div class="user-contacts-body clearfix">
<ul class="left">
<li><i class="phone-rounded-icon"></i><span>@Model.User.PhoneMob Внутренний номер: @Model.User.PhoneInt</span></li>
<li><i class="mail-rounded-icon"></i><span>@Model.User.Email</span></li>
</ul>
@if (isCurrentUser)
{
<a href="#contact-add" class="user-contacts-add-btn left clearfix">
<i class="plus-rounded-lg-icon"></i>
<span>Добавить <br />дополнительные контакты</span>
</a>
<div class="remodal user-contacts-additional" data-remodal-id="contact-add">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Дополнительные контакты: </h1>
<div class="user-contacts-additional-container js-user-contacts-additional">
<div class="user-contacts-field-wrapper">
<input type="text" name="contactsList" placeholder="Мобильный телефон" class="user-contacts-mobile-input js-user-mobile" data-type="mobilephone" />
</div>
<div class="user-contacts-field-wrapper">
<input type="text" name="contactsList" placeholder="Способ связи" class="user-contacts-title-input js-extracontact-title-1" data-type="extracontacttitle1" />
<input type="text" name="contactsList" placeholder="Контакт" class="user-contacts-content-input js-extracontact-content-1" data-type="extracontactcontent1" />
</div>
<div class="user-contacts-field-wrapper">
<input type="text" name="contactsList" placeholder="Способ связи" class="user-contacts-title-input js-extracontact-title-2" data-type="extracontacttitle2" />
<input type="text" name="contactsList" placeholder="Контакт" class="user-contacts-content-input js-extracontact-content-2" data-type="extracontactcontent2" />
</div>
</div>
<br>
<div class="remodal-buttons-right">
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
<button data-remodal-action="cancel" class="remodal-cancel">Отмена</button>
</div>
</div>
}
</div>
</section>
<section class="user-position-description">
<div class="user-tab-header">
<h3>Сфера должностных полномочий</h3>
@if (isCurrentUser)
{
<i class="edit-yellow-icon js-edit-field js-edit-field-profresponsibility" data-field="profresponsibility"></i>
<i class="check-yellow-icon js-save-field js-save-field-profresponsibility item-hidden" data-field="profresponsibility"></i>
}
</div>
<div class="user-position-description-body js-profresponsibility-old">@Model.User.ProfResponsibility</div>
<textarea class="user-position-textarea js-profresponsibility-new item-hidden"></textarea>
</section>
<section class="user-personal-info">
<div class="user-tab-header">
<h3>Личные данные</h3>
@if (isCurrentUser)
{
<i class="edit-yellow-icon js-edit-field js-edit-field-interests" data-field="interests"></i>
<i class="check-yellow-icon js-save-field js-save-field-interests item-hidden" data-field="interests"></i>
}
</div>
<div class="user-personal-info-body">
<ul>
@if (@Model.User.Birthday.HasValue)
{
<li>
<span class="profile-item-title">День рождения:</span>@Model.User.Birthday.Value.ToString("d MMMM", System.Globalization.CultureInfo.GetCultureInfo("ru-RU"))
@if (!isCurrentUser)
{
<div class="birthday-reminder"><input type="button" class="edit-mode-switcher"><span>Напомнить о дне рождения!</span></div>
}
</li>
}
<li>
<span class="profile-item-title">Интересы:</span>
<span class="js-interests-old">@Model.User.Interests</span>
<textarea class="user-personal-textarea js-interests-new item-hidden"></textarea>
</li>
</ul>
</div>
</section>
<section class="user-interaction">
<div class="user-interaction-tabs">
@if (Model.ThanksCount > 0)
{
<div class="user-interaction-tab user-interaction-tab__inactive" data-tab="appreciation">Благодарности<span>(@Model.ThanksCount)</span></div>
}
@if (Model.CongratulationsCount > 0)
{
<div class="user-interaction-tab user-interaction-tab__inactive" data-tab="congratulation">Поздравления<span>(@Model.CongratulationsCount)</span></div>
}
</div>
<div class="user-interaction-body">
<div class="user-tab-content user-tab-content-appreciation user-appreciation-tab-content user-tab-content__active" data-tab="appreciation">
@*@if (!isCurrentUser)
{
<div class="user-interaction-not-current-user">
<a class="user-interaction-appreciate arrow-button" href="#">Поблагодарить</a>
</div>
}*@
</div>
<div class="user-tab-content user-tab-content-congratulation user-congratulation-tab-content user-tab-content__inactive" data-tab="congratulation">
@*if (!isCurrentUser)
{
<div class="user-interaction-not-current-user">
<a class="user-interaction-congratulate arrow-button" href="#">Поздравить</a>
</div>
}*@
</div>
</div>
</section>
</div>
<div class="right-column">
<div class="user-supervisor-content"></div>
<div class="user-associates-content"></div>
@if(Model.CommunityExpert.Any())
{
<aside class="user-community-info">
<h3>Эксперт<br />в сообществах</h3>
<div class="user-community-info-body">
<ul>
@foreach(var com in Model.CommunityExpert)
{
<li>
@Html.ActionLink(com.Title, "Community", "Communities", new { Id = com.ID }, null)
<div class="like-container">
<i class="like-icon"></i>
<span class="like-count">88</span>
</div>
</li>
}
</ul>
</div>
</aside>
}
</div>
<input type="hidden" id="subordinatesJSON" value="@Model.SubordinatesJSON">
<input type="hidden" id="bossJSON" value="@Model.BossJSON">
<script id="SubordinateTemplate" type="text/x-handlebar-template">
{{#if this}}
<aside class="user-associates-container">
<h3>Подчиненные</h3>
<div class="user-associates-wrapper">
{{#each this}}
{{#ifSixth @@index}}
<div class="user-associates-body clearfix">
{{/ifSixth}}
<a href="{{url "profile" ID}}" class="user">
<div class="user-img-wrapper">
<img src="{{Photo}}" alt="">
</div>
<p>{{Surname}} {{Name}}</p>
</a>
{{#ifFithOrLast @@index @@last}}
</div>
{{/ifFithOrLast}}
{{/each}}
</div>
</aside>
{{/if}}
</script>
<script id="BossTemplate" type="text/x-handlebar-template">
{{#if this.Surname}}
<aside class="user-supervisor-container">
<h3>Руководитель</h3>
<div class="user-supervisor-body clearfix">
<a href="{{url "profile" ID}}" class="user-img-wrapper left">
<img src="{{Photo}}" alt="">
</a>
<div class="supervisor-info left">
<a href="{{url "profile" ID}}" class="supervisor-name">{{Name}} {{Surname}}</a>
<div class="supervisor-info-item">
<i class="position-card-icon"></i>
<span>{{Position}}</span>
</div>
<div class="supervisor-info-item">
<i class="department-card-icon"></i>
<span>{{Department.Title}}</span>
</div>
</div>
</div>
</aside>
{{/if}}
</script>
<script id="userInteractionItemTemplate" type="text/x-handlebars-template">
{{#each this}}
<div class="user-item clearfix" data-id="{{ ID }}">
<div class="user-img-wrapper left">
<a href="{{url "profile" Author.ID}}">
<img src="{{ Author.Photo }}" alt="">
</a>
</div>
<div class="user-content left">
<a href="{{url "profile" Author.ID}}" class="user-from-name">{{ Author.Name }} {{ Author.Surname }}</a>
<p>{{ Text }}</p>
</div>
</div>
{{/each}}
</script>
<script>
Handlebars.registerHelper('ifSixth', function (index, options) {
if (index % 6 == 0) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
Handlebars.registerHelper('ifFithOrLast', function (index, isLast, options) {
if ((index % 5 == 0 && index != 0) || isLast) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
</script>
@lightBackground: transparent;
@white: #ffffff;
@black: #000000;
@yellowMain: #ffc11c;
@greyLightMain: #9fa1a3;
@redMain: #d50b09;
@greenMain: #41b806;
@greyMain: #888f92;
@greyText: #76797e;
@borderLight: #e5eaec;
@darkGrey: #2b3037;
@greyMedium: #5d5d5d;
@inputsBorder: #dae2e5;
@fontBase: HelveticaNeueCyrRoman;
@renaultLight: RenaultLight, HelveticaNeueCyrRoman;
@renaultBold: RenaultBold, HelveticaNeueCyrRoman;
@renault: Renault, HelveticaNeueCyrRoman;
@tahoma: Tahoma, sans-serif;
@clockIcon: url('images/clock-icon.png') no-repeat;
@deleteSmallIcon: url('icons/del_ico.png') no-repeat;
@earthIcon: url('images/earth-icon.png') no-repeat;
@feedbackIcon: url('images/feedback-icon.png') no-repeat;
@logo: url('images/logo.png' )no-repeat;
@notificationBellIcon: url('images/notification-bell-icon.png') no-repeat;
@notificationMessagesIcon: url('images/notification-meassages-icon.png') no-repeat;
@switchIcon: url('images/switch-icon.png') no-repeat;
@unsignedUserSmIcon: url('images/unsigned-user-sm-icon.png') no-repeat;
@vkIcon: url('images/vk-icon.png' )no-repeat;
@facebookIcon: url('images/facebook-icon.png' )no-repeat;
@twitterIcon: url('images/twitter-icon.png' )no-repeat;
@patternMenuBg: url('images/menu-bg.png') no-repeat;
@footerBg: url('images/footer-bg.png' ) no-repeat 0 bottom;
@linesBg: url('images/lines-bg.png' ) no-repeat;
@linesTwoBg: url('images/lines-two-bg.png' ) repeat;
@linesBgDark: url('images/lines-bg-dark.png' ) repeat;
@linesBgLight: url('images/lines-bg-light.png' ) repeat;
@linesBlueBg: url('images/lines-blue-bg.png' ) repeat;
@linesYellowBg: url('images/lines-yellow-bg.png') repeat;
@linesYellowWhiteBg: url('images/lines-yellow-white-bg.png') repeat;
@timeBg: url('images/time-bg.png') repeat;
@timeDelimeter: url('images/time-delimeter.png');
@profileMaskWhite: url('images/profile-mask-white.png') no-repeat;
@profileMaskDark: url('images/profile-mask-dark.png') no-repeat;
@birthdayCap: url('images/birthday-cap.png') no-repeat;
@radioboxSprite: url('images/radiobox-sprite.png') no-repeat;
@searchWhiteIcon: url('images/search-white-icon.png' ) no-repeat 110px 17px;
@profileSettingsGreyIcon: url('images/profile-settings-grey-icon.png') no-repeat;
@profileSettingsWhiteIcon: url('images/profile-settings-white-icon.png') no-repeat;
@ballIcon: url('images/ball-icon.png');
@squareLeftIcon: url('images/arrow-square-left.png') no-repeat;
@squareRightIcon: url('images/arrow-square-right.png') no-repeat;
@likeIcon: url('images/like-icon.png') no-repeat;
@moneyIcon: url('images/money-icon.png') no-repeat;
@okIcon: url('images/ok-icon.png') no-repeat;
@cancelIcon: url('images/cancel-icon.png') no-repeat;
// icons
@acceptYellowBgIcon: url('icons/accept-yellow-bg-icon.png') no-repeat;
@attachDocIcon: url('icons/attach-doc-icon.png') no-repeat;
@attachPhotoIcon: url('icons/attach-photo-icon.png') no-repeat;
@arrowRightBgIcon: url('icons/arrow-yellow-right-bg-icon.png') no-repeat;
@arrowRightIcon: url('icons/arrow-yellow-right-icon.png') no-repeat 216px 21px;
@arrowLeftBgIcon: url('icons/arrow-yellow-left-bg-icon.png') no-repeat;
@arrowLeftIcon: url('icons/arrow-yellow-left-icon.png') no-repeat;
@arrowDownIcon: url('icons/arrow-yellow-down-icon.png') no-repeat;
@arrowUpIcon: url('icons/arrow-yellow-up-icon.png') no-repeat;
@arrowGreyLeftIcon: url('icons/arrow-grey-left-icon.png') no-repeat;
@arrowGreyRightIcon: url('icons/arrow-grey-right-icon.png') no-repeat;
@blackPhoneIcon: url('icons/black-phone-icon.png') no-repeat;
@blackMailIcon: url('icons/black-mail-icon.png') no-repeat;
@blackMapMarkerIcon: url('icons/black-map-marker-icon.png') no-repeat;
@calendarYellowIcon: url('icons/calendar-yellow-icon.png') no-repeat;
@calendarYellowIcon: url('icons/calendar-yellow-icon.png') no-repeat;
@cancelYellowIcon: url('icons/cancel-yellow-icon.png') no-repeat;
@cancelWhiteRoundIcon: url('icons/cancel-white-round-icon.png');
@checkYellowIcon: url('icons/check-yellow-icon.png') no-repeat;
@chevronLeftIcon: url('icons/chevron-left.png') no-repeat;
@chevronRightIcon: url('icons/chevron-right.png') no-repeat;
@closeCircleIcon: url('icons/close-circle-outline.png') no-repeat;
@departmentCardIcon: url('icons/department-card-icon.png') no-repeat;
@departmentCardRoundedIcon: url('icons/department-card-rounded-icon.png') no-repeat;
@editorPersonRoundIcon: url('icons/editor-person-round-icon.png') no-repeat;
@likeIcon: url('icons/like-icon.png') no-repeat;
@editBgIcon: url('icons/edit-bg-icon.png') no-repeat;
@editBlackIcon: url('icons/edit-black-icon.png') no-repeat;
@editGreyIcon: url('icons/edit-grey-icon.png') no-repeat;
@editYellowIcon: url('icons/edit-yellow-icon.png') no-repeat;
@mailRoundedIcon: url('icons/mail-rounded-icon.png') no-repeat;
@mapRoundedIcon: url('icons/map-rounded-icon.png') no-repeat;
@minusRoundedYellowSmIcon: url('icons/minus-rounded-yellow-sm-icon.png') no-repeat;
@personYellowIcon: url('icons/person-yellow-icon.png') no-repeat;
@phoneRoundedIcon: url('icons/phone-rounded-icon.png') no-repeat;
@plusRoundedLgIcon: url('icons/plus-rounded-lg-icon.png') no-repeat;
@plusRoundedYellowSmIcon: url('icons/plus-rounded-yellow-sm-icon.png') no-repeat;
@positionCardIcon: url('icons/position-card-icon.png') no-repeat;
@positionCardRoundedIcon: url('icons/position-card-rounded-icon.png') no-repeat;
@removeBlackIcon: url('icons/remove-black-icon.png') no-repeat;
@removeBlackUnborderedIcon: url('icons/remove-black-unbordered-icon.png') no-repeat;
@removeGreyIcon: url('icons/remove-grey-icon.png') no-repeat;
@saveBgIcon: url('icons/save-bg-icon.png') no-repeat;
@searchIcon: url('icons/search-white-icon.png') no-repeat;
@settingsRoundedYellowSmIcon: url('icons/settings-rounded-yellow-sm-icon.png') no-repeat;
@switchOnIcon: url('icons/switch-on-icon.png') no-repeat;
@switchOffIcon: url('icons/switch-off-icon.png') no-repeat;
@versionsRoundIcon: url('icons/versions-round-icon.png') no-repeat;
.arrow-grey-left-icon() {
background: @arrowGreyLeftIcon;
}
.arrow-grey-right-icon() {
background: @arrowGreyRightIcon;
}
.arrow-yellow-down-icon() {
background: @arrowYellowDownIcon;
}
.switch-on-icon-bg() {
background: @switchOnIcon;
}
// mixins
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
-moz-border-radius: @topleft @topright @bottomright @bottomleft;
border-radius: @topleft @topright @bottomright @bottomleft;
}
.transform-simple (@value: scale(1.1)) {
-webkit-transform: @value;
-moz-transform: @value;
-o-transform: @value;
transform: @value;
}
.transition-simple (@propname, @duration, @timingfunction) {
-webkit-transition: @propname @duration @timingfunction;
-moz-transition: @propname @duration @timingfunction;
-o-transition: @propname @duration @timingfunction;
transition: @propname @duration @timingfunction;
}
.box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.placeholder-color(@phColor: @white) {
&::-webkit-input-placeholder {
color: @phColor;
}
&::-moz-placeholder {
color: @phColor;
}
/* Firefox 19+ */
&:-moz-placeholder {
color: @phColor;
}
/* Firefox 18- */
&:-ms-input-placeholder {
color: @phColor;
}
}
.text-height(@height) {
min-height: @height;
max-height: @height;
overflow: hidden;
word-break: break-word;
}
.image-mask(@width, @mRight, @height: @width) {
display: inline-block;
width: @width;
height: @height;
overflow: hidden;
margin-right: @mRight;
img {
width: @width;
height: auto;
}
}
.rounded-btn(@width: 192px, @height: 42px, @borderColor: @yellowMain) {
width: @width;
height: @height;
border: 2px solid @borderColor;
border-radius: 25px;
.box-sizing;
font-size: 14px;
font-family: @fontBase;
line-height: @height - 10;
background-color: @white;
cursor: pointer;
}
.content-text(@fontSize: 14px, @color: #6c6c6c) {
margin: 20px 0;
line-height: 18px;
color: @color;
font-size: @fontSize;
p {
margin-bottom: 6px;
}
}
.arrow-btn(@width: 240px, @height: 57px, @display: block, @paddingTop: 20px, @bg: @arrowRightIcon, @color: #2c2f36, @borderColor: @yellowMain) {
display: @display;
width: @width;
height: @height;
border: 2px solid @borderColor;
.box-sizing;
text-align: center;
padding-top: @paddingTop;
margin-bottom: 4px;
background: @bg;
font-size: 13px;
color: @color;
text-transform: uppercase;
text-decoration: none;
}
.button-squared() {
width: 100%;
text-transform: uppercase;
text-align: center;
font-size: 14px;
color: @darkGrey;
border: 2px solid @yellowMain;
background: @linesYellowWhiteBg;
height: 55px;
padding-top: 18px;
.box-sizing;
font-family: @fontBase;
cursor: pointer;
}
.input-grey(@height: 49px, @padding: 17px) {
height: @height;
border: 1px solid @inputsBorder;
.box-sizing;
padding: 0 @padding;
outline-color: @yellowMain;
}
@import 'props';
@lightBlue: #e8edf0;
.right-column {
margin-top: 0;
}
section {
width: 100%;
margin-top: 17px;
.user-tab-header,
.user-interaction-tabs {
border-bottom: 2px solid @yellowMain;
}
h3, .user-interaction-tab {
display: inline-block;
padding: 14px 18px 11px;
color: @black;
background: @linesYellowBg;
font-size: 14px;
}
.edit-yellow-icon, .check-yellow-icon {
margin-left: 15px;
vertical-align: middle;
}
}
aside {
h3 {
font-size: 18px;
color: @darkGrey;
padding-bottom: 15px;
border-bottom: 2px solid @yellowMain;
text-transform: uppercase;
}
}
.user-profile-photo {
.image-mask(240px, 0);
float: left;
&.is-current-user {
display: none;
}
}
.main-profile-info {
height: 240px;
min-width: 531px;
max-width: 771px;
background: @linesBlueBg;
color: @white;
font-size: 14px;
padding: 29px 45px 15px;
float: left;
&.is-current-user {
width: 100%;
}
.box-sizing;
.user-name {
font-size: 30px;
font-family: HelveticaNeueCyrLight;
margin-bottom: 24px;
}
.user-social {
text-align: left;
}
.user-info {
margin-top: 22px;
padding: 0;
li {
list-style-type: none;
margin-bottom: 6px;
}
span, i {
vertical-align: middle;
}
i {
margin-right: 8px;
}
}
&.not-current-user-profile {
padding-top: 10px;
padding-left: 29px;
.user-name {
margin-bottom: 10px;
}
.user-info {
margin-top: 0;
}
.user-position-card {
width: 203px;
height: 40px;
padding-top: 10px;
background-position: 175px 13px;
text-transform: none;
text-align: left;
padding-left: 20px;
font-size: 14px;
color: @white;
}
}
}
.user-contacts {
margin-top: 39px;
border-bottom: 2px solid @lightBlue;
.user-contacts-body {
ul {
list-style-type: none;
padding-left: 17px;
margin: 20px 0;
width: 510px;
color: @darkGrey;
font-size: 14px;
.box-sizing;
}
li {
margin-bottom: 7px;
}
span, i {
vertical-align: middle;
}
i {
padding-right: 22px;
}
.user-contacts-add-btn {
width: 253px;
margin-top: 20px;
i {
padding-right: 10px;
}
span {
text-decoration: underline;
color: @darkGrey;
font-size: 14px;
padding-top: 13px;
}
span, i {
float: left;
}
}
}
}
.user-contacts-additional {
width: 590px;
}
.user-contacts-additional-container {
margin: 25px 0 0;
.user-contacts-field-wrapper {
margin-bottom: 10px;
padding-left: 30px;
background: @arrowRightIcon;
background-position: 5px 10px;
&:last-child {
margin-bottom: 0;
}
}
.user-contacts-mobile-input,
.user-contacts-title-input,
.user-contacts-content-input {
padding-left: 10px;
}
.user-contacts-mobile-input {
width: 488px;
}
.user-contacts-title-input {
width: 135px;
}
.user-contacts-content-input {
width: 350px;
}
}
.user-position-description {
.user-position-description-body {
background-color: @lightBlue;
margin-top: 1px;
padding: 23px 18px;
color: @greyMain;
font-size: 14px;
line-height: 1.4;
word-break: break-word;
}
.user-position-textarea {
width: 765px;
height: 80px;
margin-top: 23px;
color: @greyMain;
font-family: @fontBase;
font-size: 14px;
border: 1px solid @borderLight;
border-radius: 4px;
}
}
.user-personal-info {
border-bottom: 2px solid @lightBlue;
.user-personal-info-body {
ul {
font-size: 14px;
color: @black;
list-style-type: none;
padding-left: 17px;
margin: 20px 0;
word-break: break-word;
}
li {
margin-bottom: 10px;
}
.user-personal-textarea {
width: 665px;
height: 50px;
color: @greyMain;
font-family: @fontBase;
font-size: 14px;
border: 1px solid @borderLight;
border-radius: 4px;
vertical-align: top;
}
.profile-item-title {
color: @greyMain;
padding-right: 7px;
}
.birthday-reminder {
display: inline-block;
margin-left: 50px;
display: none;
.edit-mode-switcher {
display: inline-block;
cursor: pointer;
background: url(images/switch-icon.png) no-repeat;
width: 37px;
height: 20px;
border: 0;
outline: none;
margin-right: 15px;
}
.edit-mode-switcher,
span {
vertical-align: middle;
}
}
}
}
.user-interaction {
margin-bottom: 65px;
position: relative;
.user-interaction-tabs {
cursor: pointer;
.user-interaction-tab__inactive {
background: @white;
border: 2px solid @yellowMain;
border-bottom: 0;
padding: 12px 18px 11px;
.box-sizing;
}
span {
padding-left: 7px;
}
}
.user-interaction-not-current-user {
position: absolute;
right: 0;
top: 3px;
width: 174px;
height: 50px;
background-color: @white;
padding-left: 10px;
}
.user-interaction-appreciate,
.user-interaction-congratulate {
width: 174px;
height: 40px;
padding-top: 11px;
background-position: 146px 14px;
text-transform: none;
text-align: left;
padding-left: 30px;
font-size: 14px;
}
.user-interaction-body {
margin-top: 8px;
}
}
.user-tab-content {
.user-item {
padding: 17px 0;
border-bottom: 1px dashed @lightBlue;
.user-img-wrapper {
.image-mask(75px, 14px);
}
.user-content {
width: 665px;
font-size: 14px;
line-height: 1.4;
color: @greyMain;
}
.user-from-name {
display: inline-block;
color: @darkGrey;
font-size: 16px;
text-decoration: none;
line-height: 1;
margin-bottom: 5px;
}
}
&.user-tab-content__active {
display: block;
}
&.user-tab-content__inactive {
display: none;
}
}
.user-supervisor-container {
margin-bottom: 18px;
border-bottom: 2px solid @yellowMain;
.user-supervisor-body {
margin: 19px 0;
}
.supervisor-info {
width: 154px;
}
.supervisor-info-item {
font-size: 0;
margin-bottom: 12px;
i {
padding-right: 7px;
}
i, span {
vertical-align: middle;
}
span {
display: inline-block;
font-size: 10.5px;
color: @greyMain;
line-height: 1.1;
width: 134px;
}
&:last-child {
margin-bottom: 0;
}
}
.supervisor-name {
display: inline-block;
font-size: 15px;
color: @darkGrey;
margin-bottom: 14px;
text-decoration: none;
word-break: break-word;
}
.user-img-wrapper {
.image-mask(75px, 12px);
}
}
.user-associates-container {
@userWrapperWidth: 75px;
margin-bottom: 18px;
border-bottom: 2px solid @yellowMain;
position: relative;
.user-associates-body {
margin: 19px 0;
font-size: 0;
max-height: 237px;
overflow: hidden;
.user {
width: @userWrapperWidth;
margin-right: 8px;
text-decoration: none;
display: inline-block;
&:nth-child(3n) {
margin-right: 0;
}
p {
color: @greyMain;
font-size: 13px;
width: @userWrapperWidth;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
line-height: 1.4;
.text-height(38px);
}
}
}
.owl-nav {
position: absolute;
bottom: -5.5px;
left: 83px;
width: 75px;
height: 11px;
background-color: @white;
text-align: center;
font-size: 0;
.owl-prev,
.owl-next {
width: 8px;
height: 11px;
display: inline-block;
}
.owl-prev {
background: url('icons/arrow-grey-left-icon.png') no-repeat;
margin-right: 22px;
}
.owl-next {
background: url('icons/arrow-grey-right-icon.png') no-repeat;
}
}
.user-img-wrapper {
.image-mask(@userWrapperWidth, 0);
}
}
.user-community-info {
.user-community-info-body {
border-bottom: 2px solid @yellowMain;
ul {
list-style-type: none;
padding-left: 5px;
font-size: 0;
.box-sizing;
}
li {
font-size: 0;
padding: 14px 0;
border-bottom: 1px solid @lightBlue;
&:last-child {
border: 0;
}
}
a {
text-decoration: none;
display: inline-block;
width: 190px;
font-size: 14px;
color: @darkGrey;
}
.like-container {
display: inline-block;
width: 45px;
display: none;
}
a,
.like-container {
vertical-align: middle;
}
}
}
var profile = (function () {
var profileOwner = 0,
interaction = {
current: null,
lastItem: null,
loading: false,
hasNext: true,
$tab: null
};
function printBoss() {
var json = $.parseJSON($("#bossJSON").val());
var template = Handlebars.compile(document.getElementById('BossTemplate').innerHTML);
$(".user-supervisor-content").html(template(json));
}
function printSubordinates() {
var json = $.parseJSON($("#subordinatesJSON").val());
var template = Handlebars.compile(document.getElementById('SubordinateTemplate').innerHTML);
$(".user-associates-content").html(template(json));
$('.user-associates-wrapper').owlCarousel({
margin: 0,
nav: true,
dots: false,
items: 1
});
}
function toggleFieldEdit(field) {
$('.js-save-field-' + field).toggleClass('item-hidden');
$('.js-edit-field-' + field).toggleClass('item-hidden');
$('.js-' + field + '-old').toggleClass('item-hidden');
$('.js-' + field + '-new').toggleClass('item-hidden');
}
function saveField(fieldName, fieldValue) {
$.post('/profile/' + profileOwner + '/editField', {
fieldName: fieldName,
fieldValue: fieldValue
}).then(function () {
$('.js-' + fieldName + '-old').text(fieldValue);
});
}
function getInteraction() {
if (interaction.loading || !interaction.hasNext) {
return;
}
$.get('/profile/' + profileOwner + '/' + interaction.current, {
last: interaction.lastItem
}).then(function (response) {
renderInteractions(response);
interaction.hasNext = response.length >= 10;
});
}
function renderInteractions(items) {
if (!interaction.template) {
interaction.template = Handlebars.compile($('#userInteractionItemTemplate').html());
}
interaction.$tab.append(interaction.template(items));
}
function onInteractionTabMounted($tab, tabType) {
$tab.removeClass('user-tab-content__inactive')
.addClass('user-tab-content__active');
interaction.$tab = $tab;
interaction.current = tabType;
interaction.lastItem = $('.user-tab-content__active .user-item:last-child').data('id') || null;
interaction.hasNext = true;
interaction.loading = false;
if (!$('.user-tab-content__active .user-item').length) {
getInteraction();
}
$(window).on('scroll', function () {
});
}
function onInteractionTabUnmounted($tab) {
$tab.removeClass('user-tab-content__active')
.addClass('user-tab-content__inactive');
$(window).off('scroll');
}
function scrollTo($el) {
$('html, body').animate({
scrollTop: $el.offset().top
}, 500);
}
$(function () {
var hash = window.location.hash.substring(1);
$('.user-interaction-tabs').on('click', '.user-interaction-tab', function () {
if (!$(this).hasClass('user-interaction-tab__inactive')) {
return;
}
var pickedTab = $(this).data('tab'),
$oldTab = $('.user-tab-content.user-tab-content__active'),
$newTab = $('.user-tab-content-' + pickedTab);
$('.user-interaction-tab').addClass('user-interaction-tab__inactive');
$(this).removeClass('user-interaction-tab__inactive');
onInteractionTabUnmounted($oldTab);
onInteractionTabMounted($newTab, pickedTab);
});
var $el = $('.user-interaction-tabs').children().first();
if (hash) {
switch (hash) {
case 'appreciation':
$el = $('.user-interaction-tab[data-tab="appreciation"]');
scrollTo($el);
break;
case 'congratulation':
var $el = $('.user-interaction-tab[data-tab="congratulation"]');
scrollTo($el);
break;
}
}
$el.trigger('click');
$('.user-tab-header').on('click', '.js-edit-field', function () {
var field = $(this).data('field');
var currentValue = $('.js-' + field + '-old').text();
toggleFieldEdit(field);
$('.js-' + field + '-new').val(currentValue);
});
$('.user-tab-header').on('click', '.js-save-field', function () {
var field = $(this).data('field');
saveField(field, $('.js-' + field + '-new').val());
toggleFieldEdit(field);
});
$(document).on('confirmation', '.user-contacts-additional', function () {
console.log('Confirmation button is clicked');
});
printBoss();
printSubordinates();
});
return {
init: function (owner) {
profileOwner = owner;
}
};
})();
