"profile"
Bootstrap 3.3.0 Snippet by irinashuvalova

<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; } }; })();

Related: See More


Questions / Comments: