Bootstrap Snippet profile photos using HTML CSS Javascript

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 ---------->
<h3 class="module-title">Фотографии профиля</h3>
<div class="module-breadcrumbs">
    <a href="@adminMainUrl" class="breadcrumb-item">Страница администратора</a>
    <i class="arrow-yellow-right-icon"></i>
    <span class="breadcrumb-item">Фотографии профиля</span>
</div>
<ul class="admin-tabs js-admin-tabs">
    <li class="admin-tab js-admin-tab admin-tab__active" data-tab="standard">Стандартные</li>
    <li class="admin-tab js-admin-tab" data-tab="custom">Пользовательские</li>
    <a href="#violation-message-admin" class="admin-action-btn button-general js-send-reminder">Отправить напоминание</a>
</ul>
<div class="admin-tabs-content">
    <div class="tab-content js-tab-content js-tab-content-standard">
        <div id="standard-photos-content"></div>
    </div>
    <div class="tab-content tab-content-custom js-tab-content js-tab-content-custom" style="display: none;">
        <input type="text" placeholder="Поиск" class="custom-search module-input js-custom-search" />
        <div id="custom-photos-content"></div>
    </div>
</div>
<div class="remodal violation-remodal js-violation-remodal" data-remodal-id="violation-message-admin">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h3 class="remodal-header">Напоминание!</h3>
    <div class="remodal-body">
        <textarea class="module-input" id="violation-text"></textarea>
    </div>   
    <div class="remodal-buttons-right">
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
@import 'props';
.admin-tabs {
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 25px 0 20px;
    border-bottom: 2px solid @yellowMain;
    position: relative;
    font-size: 0;
    .admin-tab {
        display: inline-block;
        font-size: 14px;
        color: @black;
        width: 190px;
        height: 42px;
        line-height: 42px;
        border: 2px solid @yellowMain;
        border-bottom: 0;
        margin-right: 3px;
        text-align: center;
        cursor: pointer;
        .box-sizing;
        &.admin-tab__active {
            background: @linesYellowBg;
        }
    }
    .admin-action-btn {
        font-family: @fontBase;
        position: absolute;
        top: 0;
        right: 0;
        color: @black;
        width: 210px;
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 adminPhotos = (function () {
    var photosAdminTemplate = null,
        standardPhotos = null,
        currentTab = 'standard',
        customPhotos = null,
        isCustomRendered = false;
    function initPhotos() {
        if (!photosAdminTemplate) {
            photosAdminTemplate = Handlebars.compile($('#admin-photos-template').html());
        }
        $('.js-admin-tabs').on('click', '.js-admin-tab', function () {
            var $tabId = $(this).data('tab');
            switch ($tabId) {
                case 'standard':
                    switchTab($tabId);
                    break;
                case 'custom':
                    if (!isCustomRendered) {
                        renderCustomPhotos($tabId);
                        isCustomRendered = true;
                    } else {
                        switchTab($tabId);
                    }
                    break;
            }
        });
        $('.js-tab-content').on('click', '.js-violation', function () {
            var userID = $(this).data('id');
            clearViolationForm();
            sendViolationReminder(userID);
        })
        $('.js-admin-tabs').on('click', '.js-send-reminder', function () {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"profile photos"
Bootstrap 3.3.0 Snippet by irinashuvalova

Related: See More

Questions / Comments:

"profile photos" Bootstrap 3.3.0 Snippet by irinashuvalova

Related: See More

Questions / Comments:

"profile photos"
Bootstrap 3.3.0 Snippet by irinashuvalova