Widget:Порталы

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <script> $('.portal-carousel').slick({

 slidesToShow: 4,
 slidesToScroll: 1,
 infinite: true,
 arrows: true,

prevArrow: '

', nextArrow: '

',

 responsive: [
   {
     breakpoint: 1300,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 1000,
     settings: {
       slidesToShow: 2,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 800,
     settings: {
       slidesToShow: 1,
       slidesToScroll: 1
     }
   }
 ]

});

/* Слайдер галерея*/ $('.gallery-slider').slick({

 dots: false,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 arrows: false,
 asNavFor: '.gallery-slider-nav',

});

$('.gallery-slider-nav').slick({

 infinite: true,
 slidesToShow: 5,
 slidesToScroll: 1,
 asNavFor: '.gallery-slider',
 dots: false,
 centerMode: true,
 focusOnSelect: true,
 arrows: true,

prevArrow: '

', nextArrow: '

',

 responsive: [
   {
     breakpoint: 1200,
     settings: {
       slidesToShow: 4,
     }
   },
   {
     breakpoint: 992,
     settings: {
       slidesToShow: 3,
     }
   }
 ]

});

/* Слайдер сликовский на страницах порталов внизу*/ $('.friends-carousel').slick({

 slidesToShow: 5,
 slidesToScroll: 1,
 infinite: true,
 arrows: true,

prevArrow: '

', nextArrow: '

',

 responsive: [
   {
     breakpoint: 1300,
     settings: {
       slidesToShow: 4,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 600,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1
     }
   }
 ]

});

$(document).ready(function() {

 $(".portals-friends__card_img").mouseenter(function() {
   $(this).addClass("rotate");
 }).mouseleave(function() {
   $(this).removeClass("rotate");
 });

 var isFixed = false;
 var linkList;

 if (window.innerWidth > 640) {

linkList = $('

');

 } else {

linkList = $('

');

 }

 var contentLabel = $('<label class="sidebar" id="p-tb">Содержание</label>');

var contentListItem = $('

'); contentListItem.append(contentLabel); linkList.append(contentListItem); $('.sections_title, .period_title').each(function() { var sectionTitle = $(this).text().trim(); var sectionLink = $(''); sectionLink.text(sectionTitle); sectionLink.attr('href', '#' + $(this).attr('id')); var listItem = $('

'); listItem.append(sectionLink); if ($(this).hasClass('period_title')) { listItem.addClass('side-nav'); } linkList.append(listItem); }); var portalContents = $('

');

 portalContents.append(linkList);
 $('#sidebar:last').append(portalContents);

 var contentItemWrapList = linkList.clone();
 contentItemWrapList.find('.sidebar').remove();

 setTimeout(function() {
   $('.contents-item-wrap').append(contentItemWrapList);
 }, 1000);

 var sidebarTop = $('.sidebar:last').offset().top;
 var portalContentsTop = portalContents.offset().top;

 $(window).scroll(function() {
  var scrollTop = $(window).scrollTop();

   if (scrollTop > sidebarTop && scrollTop > portalContentsTop && !isFixed) {
       portalContents.addClass('fixed');
       isFixed = true;
   } else if ((scrollTop <= sidebarTop || scrollTop <= portalContentsTop) && isFixed) {
       portalContents.removeClass('fixed');
       isFixed = false;
   }

});

// Функция для добавления класса "active" к соответствующей ссылке в зависимости от текущей позиции на странице function setActiveLink() {

   var scrollTop = $(window).scrollTop();
   // Находим все заголовки и проверяем, какой из них виден на экране
   $('.sections_title, .period_title').each(function() {
       var sectionId = $(this).attr('id');
       var sectionTop = $('#' + sectionId).offset().top;
       var sectionBottom = sectionTop + $('#' + sectionId).outerHeight();
       // Если верхняя граница раздела видна на экране
       if (scrollTop >= sectionTop && scrollTop < sectionBottom) {
           // Удаляем класс "active" у всех заголовков
           $('.portal-contents a').removeClass('active');
           // Находим соответствующий элемент в содержании и добавляем класс "active"
           $('.portal-contents a[href="#' + sectionId + '"]').addClass('active');
       }
   });

}

// Вызываем функцию setActiveLink при загрузке страницы и при прокрутке страницы $(window).on('load scroll', function() {

   setActiveLink();

});

// Вызываем функцию setActiveLink при клике на ссылку с # $('.portal-contents a[href^="#"]').on('click', function() {

   setActiveLink();

});

}); </script> <style> .sections_title { width: 100%; font-size: 25px;

       font-weight: bold;

padding: 5px; margin-top: 20px; margin-bottom: 20px; text-align: center; }

.portal-carousel {

   width: 91%;
   margin-right: auto;
   margin-left: auto;

}

.portal-card {

color: #fff;
height: 450px;
padding: 15px;
text-align: center;
margin-left: 15px;
margin-right: 15px;
outline: none;
display: flex !important;
flex-direction: column;
align-items: center;

}

.portal-card__text { margin-top: 5px;

       font-size: 0.9em;
       padding: 5px;
       overflow-y: auto;

}

.portal-card__text a { text-decoration: none; transition: all 0.2s; }

.portal-card__title {

font-weight: bold;
margin-top: 5px;

}

.portal-card img {

   width: 100%;
   height: 200px;
   object-fit: cover;

}

.slider-arrow {

 position: absolute;
 top: 38%;
 height: 60px;
 width: 60px;
 padding: 10px;
 z-index: 1;
 border-radius: 50%;

}

.slider-arrow:hover {

 opacity: 70%;

}

.slider-arrow_prod_right, .slider-arrow_gallery_right {

 right: -3em;
 background: url("https://wikiwarriors.org/images/Arrow-right.png") center no-repeat;

}

.slider-arrow_prod_left, .slider-arrow_gallery_left {

 left: -3em;
 background: url("https://wikiwarriors.org/images/Arrow-left.png") center no-repeat;

}

.slider-arrow:hover {

 cursor: pointer;

}

.period_title {

 padding: 5px;
 font-size: 1.3em;
 margin-bottom: 10px;

}

.period_title a {

 color: #fff;

}

.warriors-cards-wrap {

   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: center;
   justify-content: space-around;
   align-items: center;

}

.warriors-card {

 border-radius: 5%;
 height: 110px;
 width: 140px;
 margin-bottom: 15px;
 position: relative;
 z-index: 0;
 transition: 0.2s all ease;
 }

.warriors-card:hover {

 transform: scale3d(1.1, 1.1, 1.1);
 }

.warriors-card img {

 margin: 0;
 width: 100%; 
 height: 100%; 
 vertical-align: bottom;
 object-fit: cover;
 object-position: top;
 }

.warriors-card-descr {

 color: #fff;
 font-size: 0.8em;
 background-color: #000;
 border-radius: 0 5px 0 3px;
 padding: 4px;
 line-height: 1;
 position: absolute;
 z-index: 1;
 left: 0;
 bottom: -1px;
 } 

.gallery-slider {

   width: 90%;
   margin: auto;

}

.gallery-img {

 width: auto!important;
 height: 550px!important;
 position: relative;
 margin-bottom: 0;

}

.gallery-wrap { height: 550px;

   text-align: center;
   margin: auto;
   outline: none;
   display: flex !important;
   justify-content: space-around;
   align-items: center;

}

.gallery-img-wrap { position: relative; height: 500px; }

.gallery-descr {

   opacity: 0;
   position: absolute;
   font-size: 1em;
   direction: ltr;
   padding: 10px;
   text-align: center;
   bottom: -50px;
   height: auto;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   transition: all 0.2s ease;

}

.gallery-wrap:hover .gallery-descr { opacity: 1; bottom: -25px; }

.gallery-slider-nav { width: 90%;

   margin: 20px auto;

}

.gallery-image-nav { max-width: 12rem;

 max-height: 7.8rem;
 margin-left: 0.5rem;
 margin-right: 0.5rem;
 

}

.gallery-wrap-nav { height: 100px;

   padding: 0;

outline: none;

 -webkit-filter: brightness(40%);
         filter: brightness(40%);

}

.slick-current {

 -webkit-filter: none !important;
 filter: none !important;

}

.gallery-image-nav img {

 width: 100%;
 object-fit: cover;
 height: 7.8rem;

}

.slider-arrow_gallery {

   height: 100%;
   top: 0;
   border-radius: 0;

}

/* Карточки дружественных порталов */ .friends-carousel {

  width: 91%;
   margin-right: auto;
   margin-left: auto;

}

.portals-friends__card, .portals-collections__card {

 text-align: center;
 padding: 10px;
 display: -webkit-box!important;
 display: -ms-flexbox!important;
 display: flex!important;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;

}

.portals-friends__card:focus {

 outline: none;

}

.portals-friends__card .portal-card__img {

 height: 140px;

}

.portals-friends__card_img {

 margin-bottom: 5px;

}

.portals-friends__card a, .portals-collections__card a { font-size: 1.7em; text-decoration: none; transition: all 0.2s; }

.rotate {

 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 -webkit-transition: -webkit-transform 0.5s ease;
 transition: transform 0.5s ease;

}

.mobile {

 display: none;

}

.portal-collections-cards-wrap {

   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: center;
   justify-content: space-around;
   align-items: center;

}

.portal-card__img_small {

   font-size: 0.6em;

}

.portals-collections__card {

    width: 150px;

}

.portal-contents {

   position: relative;
   padding: 0;
   margin-top: -25px;

}

.portal-contents.fixed {

 position: fixed;
 width: 215px;
 top: 1.875rem;
 left: 0.875rem;
 z-index: 9;

}

.portal-contents ul.side-nav li.side-nav {

 margin-left: 1em;
 padding: 0;

}

.side-nav li {

 position: relative;

}

1. sidebar ul a.active {

 color: #dfb836;

}

1. sidebar ul a.active::before {

   content: ;
   position: absolute;
   top: 1px;
   left: 0;
   transform: translateY(50%);
   border: solid transparent;
   border-width: 5px;
   border-left-color: #dfb836;

}

@media only screen and (max-width:640px) { .slider-arrow_prod_right {

 right: -2em;

}

.slider-arrow_prod_left {

 left: -2em;

} .portal-card__text {

  font-size: 0.75em;

} .warriors-card-descr {

  font-size: 0.6em;

} .portals-friends__card {

 font-size: 0.55em;

} .period_title { text-align: center; } .gallery-wrap {

   height: 280px; 

} .gallery-slider { width: 100%; } .gallery-descr { font-size: 0.6em; padding: 5px; left: 0; bottom: 0; opacity: 1; }

.gallery-img {

   width: auto!important;
   max-height: 280px!important; 

} .gallery-wrap-nav {

      height: 45px;

} .gallery-image-nav {

   height: 3.8rem; 

} .gallery-image-nav img {

   width: 100%;

height: 2.8rem; } .gallery-img-wrap { position: initial; height: 280px; } .slider-arrow_gallery {

   height: 110%;
   top: -2px; 

}

   .friends-carousel {
   height: 100px;

}

.slider-arrow_gallery_right {

 right: -2.2em;

}

.slider-arrow_gallery_left {

 left: -2.2em;

}

.gallery-img {

 object-fit: cover;

}

.nomobile {
 display: none;

}

.mobile {
 display: inline;

}

.friends-carousel {

margin-bottom: 40px;

}

.portals-friends__card .portal-card__img {

 height: 90px;

}

.contents-item-wrap ul {

 margin: 0;

}

.contents-item-wrap ul li.side-nav {

 margin: 0;
 padding: 3px;

}

.contents-item-wrap ul li:first-child {

 display: none;

}

} </style>