"profile photos"
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 ----------> <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"> <button type="button" class="button-general arrow-button js-violation-send">Отправить</button> </div> </div> <div class="remodal success-remodal" data-remodal-id="modal-success"> <button data-remodal-action="close" class="remodal-close"></button> <h3 class="remodal-header">Напоминание отправлено!</h3> <div class="remodal-buttons-right"> <button type="button" class="button-general arrow-button" data-remodal-action="close">Хорошо</button> </div> </div> <script id="admin-photos-template" type="text/x-handlebars-template"> {{#if this}} {{#each this}} <div class="tab-item"> <a href="{{url "profile" EmployeeID }}" class="tab-image-wrapper"><img src="{{Url}}" alt="" /></a> <a href="{{url "profile" EmployeeID }}" class="tab-item-name">{{EmployeeName}}</a> <div class="tab-hovered"><a href="#violation-message-admin" class="action-button js-violation" data-id="{{EmployeeID}}">Нарушение!</a></div> </div> {{/each}} {{/if}} </script> <script> $(function () { adminPhotos.initPhotos(); }); </script>
@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; height: 42px; font-size: 14px; text-align: center; text-decoration: none; line-height: 42px; border: 2px solid @yellowMain; border-bottom: 0; .box-sizing; } } .tab-content { margin-bottom: 100px; } .tab-item { width: 120px; margin-bottom: 30px; margin-right: 35px; font-size: 0; display: inline-block; position: relative; vertical-align: top; .tab-image-wrapper { .image-mask(120px, 0); } .tab-item-name { font-family: @tahoma; font-size: 14px; color: @darkGrey; text-align: center; text-decoration: none; display: block; margin-top: 10px; } .tab-hovered { display: none; position: absolute; top: 0; left: 0; width: 120px; height: 120px; background: rgba(0, 0, 0, 0.7); } .action-button { .rounded-btn(101px, 43px); background: transparent; color: rgba(255,255,255,0.9); margin: 35px auto 0; display: block; text-decoration: none; text-align: center; padding-top: 3px; } } .tab-content-custom { .tab-item:hover { .tab-hovered { display: block; } } .custom-search { background: @searchIcon; width: 384px; background-position: 95% 50%; margin-bottom: 20px; } } .violation-remodal, .success-remodal { width: 570px; .module-input { height: 220px; width: 100%; resize: none; padding: 20px; } .arrow-button { .arrow-btn(145px, 46px, inline-block, 0); background-position: 120px 50%; margin-top: 30px; text-transform: none; } }
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 () { sendViolationReminder(0); }) getPhotos('standard', '').then(function (response) { $('#standard-photos-content').html(photosAdminTemplate(response)); standardPhotos = response; }) searchAction(); } function switchTab(tab) { $('.js-admin-tab').removeClass("admin-tab__active"); $('[data-tab="' + tab + '"]').addClass("admin-tab__active"); $('.js-tab-content').hide(); $('.js-tab-content-' + tab).show(); $('.js-send-reminder').toggleClass("item-hidden"); currentTab = tab; } function getPhotos(type, search) { return $.get('/admin/getphotos', { type: type, search: search }); } function renderCustomPhotos() { getPhotos('custom', '').then(function (response) { $('#custom-photos-content').html(photosAdminTemplate(response)); customPhotos = response; }); switchTab('custom'); } function searchAction() { $('.js-tab-content-custom').on('keyup', '.js-custom-search', function (e) { console.log($(this).val()); var query = $(this).val(); var k = e.keyCode; if ((k < 48 && k > 90) && (k != 46 || k != 8)) return; getPhotos('custom', query).then(function (response) { if (response != null) { $('#custom-photos-content').html(photosAdminTemplate(response)); } }); }) } function getStandardUsers() { var standardUsers = []; if (standardPhotos == null) return; for (var item in standardPhotos) { if (item != null) { standardUsers.push(standardPhotos[item].EmployeeID); } } return standardUsers; } function sendViolationReminder(id) { clearViolationForm(); $('.js-violation-remodal').off().on('click', '.js-violation-send', function () { if ($('#violation-text').val().replace(/^\s+/g, '').length > 0) { if (currentTab === 'custom') { sendUserReminder(id, $('#violation-text').val()); } if (currentTab === 'standard') { sendGroupReminder(getStandardUsers(), $('#violation-text').val()); } } else { $('#violation-text').addClass('not-valid'); } }); } function sendUserReminder(id, text) { $.post('/admin/sendReminder', { userID: id, text: text }).then(function (response) { window.location.replace(location.pathname); }); } function sendGroupReminder(users, text) { $.post('/admin/sendGroupReminder', { users: users, text: text }).then(function (response) { var modal = $('[data-remodal-id=modal-success]').remodal(); modal.open(); }); } function clearViolationForm() { $('#violation-text').val(''); } return { initPhotos: initPhotos } })();

Related: See More


Questions / Comments: