Bootstrap Snippet profile using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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');
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"profile"
Bootstrap 3.3.0 Snippet by irinashuvalova

Related: See More

Questions / Comments:

"profile" Bootstrap 3.3.0 Snippet by irinashuvalova

Related: See More

Questions / Comments:

"profile"
Bootstrap 3.3.0 Snippet by irinashuvalova