Оформеление GC (до Remake)
- Оформление бокового меню ГК
- Карточка тренинга в GC
- Стилизация страниц со списком уроков FM
- Изображения из кода оформления
Оформление бокового меню ГК
https://drive.google.com/file/d/103-7ZhGmtWc30PV3GXmUa9VeskELc1At/view?usp=sharing
Скрипт в настройках аккаунта
<!-- Боковое меню -->
<link rel="stylesheet" href="https://fitnessmama.school/pl/cms/layout/css?id=29680&hash=9cc3105d9df0b69b9fa7b4db22f48c30&bundle=1" />
<script src="https://fitnessmama.school/pl/cms/layout/js?id=29680&hash=9cc3105d9df0b69b9fa7b4db22f48c30&bundle=1"></script>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;
}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');
});
})});
<!-- Боковое меню фикс сохранение подменный профиль-->Карточка тренинга в GC
.stream-table {
margin-left:0!important;
}
.stream-table tbody {
display:flex;
flex-wrap: wrap;
}
.stream-table tbody tr {
position:relative;
flex:0 0 calc(33.3333% - 20px);
height:350px;
border-radius:9px;
box-shadow:0 0 3px 1px rgba(0,0,0,0.1);
overflow:hidden;
margin:10px;
transition:all 0.5s;
}
@media (max-width:850px) {
.stream-table tbody tr {
flex:0 0 calc(50% - 20px);
}
.stream-table tbody tr {
height:310px;
}
}
@media (max-width:510px) {
.stream-table tbody tr {
flex:0 0 100%;
}
}
.stream-table tr a {
height: 100%;
width:100%;
z-index: 2;
position: relative;
}
.stream-table tbody tr:hover {
transform:scale(1.05);
}
.stream-table tbody tr td {
position:relative;
display:flex;
height:100%;
width:100%;
padding:0!important;
}
/* Настраиваем заголовок */
.stream-table tbody tr td .stream-title {
position:absolute;
top:185px;
color:black!important;
z-index:1;
margin:auto 20px;
}
/* Настраиваем описание */
.stream-table tbody tr td div {
display: none;
position:absolute;
top:285px;
margin:auto 20px;
line-height:1.4em;
}
.stream-table tbody tr td:before {
content:"Deschide ";
position:absolute;
top:310px;
left:20px;
padding:5px 7px;
border:1px solid black;
border-radius:5px;
transition:all 0.3s;
}
.stream-table tbody tr td:hover:before {
background:rgb(228, 22, 122);
color:white;
}
.stream-table tbody tr.no-public td:before {
display:none;
}
.stream-table tbody tr td:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:180px;
background: #8E2DE2;
background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
background: linear-gradient(to right, #4A00E0, #8E2DE2);
}
.stream-table tbody tr[data-training-id="934063181"] td:after {
background:url(https://fs.getcourse.ru/fileservice/file/download/a/87136/sc/239/h/71f4ed3e615b77040c1fd4aaf9648be0.jpg) no-repeat;
background-size:cover;
background-position: 0 40%;
}
Стилизация страниц со списком уроков FM
.lesson-list li.user-state-not_reached .info {
border-left: 1px solid #ecf0f1;
background: #d3d3d3;
}
.lesson-list-01 .state-icon-block {
Color: white;
}
.lesson-list-01 .lesson-list li {
margin:20px!important;
box-shadow:0 0 10px rgba(0,0,0,.5);
}
.lesson-list {
margin: 0px;
padding: 0px;
list-style: none;
background: white;
padding: 10px 0px;
margin-bottom: 20px;
border-radius:0px;
}
.lesson-list li .item-a {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background: #f7f7f7;
}
.user-state-bg {
background: #f7f7f7;
}
.lesson-list li .state-icon-block {
background: #f80070;
}
.lesson-list li .info {
border-radius:15!important;
margin-left: 60px;
padding-top: 0px;
height: 100%;
background: #f7f7f7;
}
.lesson-list li .title {
font-size: 25px;
font-weight: normal;
line-height: 24px;
margin-right: 20px;
display: block;
max-width: 500px;
}
.lesson-list li .info {
margin-left: 0;
width: auto;
}
.lesson-list li table td {
vertical-align: middle;
min-height: 180px;
}
.lesson-list li .item-image {
display: flex;
}
Изображения из кода оформления
Убрали во всех тренингах и подтренингах код оформления.
Код оформления сохранили в вики.
Собрали из кода все ссылки на тренинги и соответствующие изображения в отдельной таблице.
Старался не пропускать какие-то дочерние подтренинги, но думаю есть не большой шанс что то упустить.
https://docs.google.com/spreadsheets/d/1nTtFkirQSJiWBujLhNuHQ8_kPhBZe-EQWCoOxhCXEFw/edit?gid=0#gid=0