Боковая панель FM
JS
<!-- Подмена пункта меню Chatium -->
$(function() {
setTimeout(function(){
$(".menu-item-sales").after(
'<li class="menu-item new-chatium-icon">'+
'<a href="/chatium" title="Chatium">'+
'<img class="menu-item-icon" src="https://fs.gcfiles.net/fileservice/file/download/a/87136/sc/31/h/80723613363bcb010a2e0e6a98a90c65.png">'+
'</a>'+
'</li>'
);
},0);
});
<!-- END Подмена ссылки на chatium -->
<!-- Установка активности пунктов на подмененных ссылках-->
$(document).ready(function(){
setTimeout(function(){
if (window.location.pathname.startsWith("/chatium")) {
$('.gc-account-user-menu li').removeClass('active');
$('.gc-account-user-menu li.new-chatium-icon').addClass('active');
}
if (window.location.pathname.startsWith("/profile")) {
$('.gc-account-user-menu li').removeClass('active');
}
}, 10);
});
<!-- Подмена ссылок на профиль и смену пароля -->
$(document).ajaxSuccess(function(event, xhr, settings) {
if ( settings.url == "/cms/counters/menu" ) {
var target = $('.gc-account-user-submenu-bar')[0];
var observer = new MutationObserver(function(mutations) {
$(".gc-account-user-submenu-bar li.menu-item-profile a").attr("href", "/profile");
$(".gc-account-user-submenu-bar li.menu-item-change_password a").attr("href", "/changePassword");
}).observe(target, { attributes: false, childList: true, characterData: false, subtree: true });
}
});
<!-- End Подмена ссылок на профиль и смену пароля -->
<!-- Подмена страницы личного кабинета -->
$(document).ajaxSuccess(function(event, xhr, settings) {
if ( settings.url == "/teach/control/stream" ) {
var target = $('.gc-account-user-submenu-bar')[0];
var observer = new MutationObserver(function(mutations) {
$(".gc-account-user-submenu-bar li.menu-item-teach a").attr("href", "/l_kabinet");
}).observe(target, { attributes: false, childList: true, characterData: false, subtree: true });
}
});
<!-- End Подмена страницы личного кабинета -->
<!-- Боковое меню фикс сохранение подменный профиль-->
$(()=>{setTimeout(()=>{
$(".edit-profile-popup-btn").off().click((e)=>{
e.stopPropagation();
window.open('/profile', '_parent');
});
})});
<!-- Боковое меню фикс сохранение подменный профиль-->
CSS
/*Убираем бэкграунд иконки-пропадает ховер выделение */
.gc-account-leftbar .gc-account-user-menu li a {
background-color: transparent!important;
}
/* Убираем разрыв */
.gc-account-leftbar .gc-account-user-menu li {
border-bottom: none;
}
/* Прячем старую иконку чатиума полностью*/
li.menu-item-chatium {
display:none;
}
/* Отступы между иконкой и выделением*/
.gc-account-leftbar .gc-account-user-menu li a.with-label {
padding: 3px 0px 0px 0px!important;
margin-top:10px;
}
/* Делает прозрачными места иконок + шрифт */
.gc-account-leftbar .gc-account-user-menu li a {
background:none!important;
font-family: 'Urbanist', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 11px;
}
/* Подпись для новой*/
.gc-account-user-menu li.menu-item.new-chatium-icon a:after{
content: "Chatium";
color: #000;
bottom: 2px!important;
font-weight: 600;
}
/*Задаем выделение ярлыка*/
.custom-menu .gc-account-leftbar .gc-account-user-menu li.active a, .custom-menu .gc-account-leftbar .gc-account-user-menu li.selected a {
background-color: #FFF!important;
}
li.menu-item.menu-item-profile a, li.menu-item.menu-item-notifications_button_small a, li.menu-item.menu-item-cms a, li.menu-item.menu-item-teach a, li.menu-item.menu-item-user a, li.menu-item.menu-item-tasks a, li.menu-item.menu-item-notifications a, li.menu-item.menu-item-sales a, li.menu-item.menu-item-chatium a {
display: block;
background: transparent;
margin: 3px auto 0px;
width: 62px !important;
height: 62px !important;
border-radius: 8px;
transition: all 1.0s;
}
/* пододвигаем колокольчик */
li.menu-item.menu-item-notifications_button_small a {
height: 35px !important;
border-radius: 5px;
}
/*Скругление профиля*/
.menu-item-profile .menu-item-icon {
border-radius: 26px;
width: 52px;
border: 2px solid #EB1a41;
margin-top:5px;
}
/*Позицианируем номерки*/
.gc-account-leftbar li:not(.menu-item-profile):not(.menu-item-notifications_button_small) .notify-count {
bottom: unset;
top: 0%;
}
/* Шайк меню */
.gc-account-user-menu .menu-item a:hover img
{
-webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.gc-account-user-menu .menu-item a:hover:after,
.menu-item-prolongation a:hover img,
.menu-item.new-chatium-icon a:hover img
{
-webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.notify-count {
z-index:1;
}
@-webkit-keyframes shake-top {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
10% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
20%,
40%,
60% {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
30%,
50%,
70% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
80% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
90% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
}
@keyframes shake-top {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
10% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
20%,
40%,
60% {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
30%,
50%,
70% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
80% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
90% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
}
/*_____________Настройка суб меню___________________*/
/*Настройка суб меню______________*/
<!-- Настройка суб меню -->
.gc-account-leftbar .gc-account-user-submenu-bar {
width: 320px;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
padding-top: 9px;
padding-bottom: 9px;
text-transform: lowercase;
font-family: 'Urbanist', sans-serif;
font-weight: 500!important;
font-style: normal;
font-size: 22px;
line-height: 108.5%;
padding-left: 20px;
}
/*Суб меню с заглавной*/
.gc-account-user-submenu-bar .gc-account-user-submenu li a::first-letter {
text-transform: uppercase;
}
.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu a:first-letter {
text-transform: uppercase;
}
.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu a:hover {
color: #555555;
}
/*Заголовок субменю_*/
.gc-account-user-submenu-bar h3 {
font-family: 'Urbanist', sans-serif;
font-weight: 700!important;
color: #004456;
font-size: 30px;
line-height: 40px;
}
.gc-account-leftbar .gc-account-user-submenu-bar {
display: flex;
flex-direction: column;
background: #FFF;
}
.gc-account-leftbar .gc-account-user-submenu-bar:after {
content: "";
display: block;
height: 60px;
background: url("https://fs.gcfiles.net/fileservice/file/download/a/87136/sc/323/h/2a01bc7dda6cdfa74cb5e627822c51f2.png") center / contain no-repeat;
margin-top: auto;
margin-bottom: 20px;
}
/* Анимация выбора меню */
.gc-account-user-submenu-bar .gc-account-user-submenu li {
position: realtive;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
position: relative !important;
z-index: 9999;
transition: all 1.3s;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li::after {
content: "";
width: 0%;
height: 100%;
position: absolute;
background: silver;
top:0;
left:0;
transition: all .5s;
z-index: 0;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
background: transparent;
color:#005B63;
z-index: 1;
text-decoration: none;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li:hover::after {
width: 100%;
}
@media (max-width: 768px) {
.gc-account-leftbar .gc-account-user-menu {
margin-bottom: 45px;
background: #5E2E92;
width: 70px;
height: 100%;
}
.gc-main-content.with-left-menu {
margin-left: 0;
}
}
@media (max-width: 576px) {
.gc-account-leftbar
.gc-account-user-submenu-bar-notifications_button_small {
width: calc(100vw - 70px);
overflow: auto;
}
}
@media (max-width: 768px) {
.gc-account-leftbar .gc-account-user-menu li {
border-bottom: none;
}
}
.gc-account-user-menu {
font-family: 'Urbanist', sans-serif!important;
}
.popover {
z-index: 8888;
}
No Comments