From: Radek Czajka <rczajka@rczajka.pl>
Date: Fri, 1 Apr 2022 12:58:05 +0000 (+0200)
Subject: Merge remote-tracking branch 'zawadzki/new-design'
X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/1249091e84840ca27aa6047db36c8e899328f15c?ds=sidebyside;hp=-c

Merge remote-tracking branch 'zawadzki/new-design'
---

1249091e84840ca27aa6047db36c8e899328f15c
diff --combined src/wolnelektury/static/2021/scripts/main.js
index 000000000,c456b6c37..d1138658b
mode 000000,100644..100644
--- a/src/wolnelektury/static/2021/scripts/main.js
+++ b/src/wolnelektury/static/2021/scripts/main.js
@@@ -1,0 -1,204 +1,204 @@@
+ // JS Menu
+ (function () {
+   let button = $('.js-menu');
+   let menu = $('.l-navigation__menu');
+   let menuLinks = menu.find('a');
+ 
+   button.on('click', function() {
+     if(!$(this).hasClass('is-active')) {
+       $(this).addClass('is-active');
+       menu.addClass('is-open');
+       button.find('.bar').addClass('animate');
+       menuLinks.attr('tabindex', 0);
+     } else {
+       $(this).removeClass('is-active');
+       menu.removeClass('is-open');
+       button.find('.bar').removeClass('animate');
+       menuLinks.attr('tabindex', -1);
+     }
+   });
+ 
+   $(document).keyup(function(e) {
+     if (e.keyCode === 27) {
+       button.removeClass('is-active');
+       menu.removeClass('is-open');
+       button.find('.bar').removeClass('animate');
+       menuLinks.attr('tabindex', -1);
+     }
+   });
+ })();
+ 
+ // Ebook/Audiobook Btns
+ (function() {
+   let button = $('.c-media__btn button:not(.l-button--media--full)');
+   let popupLayer = $('.c-media__popup');
+   let closeButton = $('.c-media__popup__close');
+   let playButton = $('.c-player__btn--md');
+   let chaptersButton = $('.c-player__chapters span');
+   let select = $('.c-select');
+   let selectItem = $('.c-select li');
+   let volumeButton = $('.icon-volume');
+ 
 -  playButton.on('click', function() {
++  /*playButton.on('click', function() {
+     if($(this).find('.icon').hasClass('icon-play')) {
+       $(this).find('.icon-play').removeClass('icon-play').addClass('icon-pause');
+     } else if($(this).find('.icon').hasClass('icon-pause')) {
+       $(this).find('.icon-pause').removeClass('icon-pause').addClass('icon-play');
+     }
 -  });
++  });*/
+ 
+   button.on('click', function () {
+     let target = $(this).attr('id');
+     $('[data-popup=' + target).addClass('is-open');
+     $('body').addClass('popup-open');
+   });
+ 
+   closeButton.on('click', function() {
+     $(this).closest('.c-media__popup').removeClass('is-open');
+     $('body').removeClass('popup-open');
+   });
+ 
+   popupLayer.on('click', function(e) {
+     let _this = $(this);
+     if($(e.target).is(popupLayer)) {
+       _this.removeClass('is-open');
+       $('body').removeClass('popup-open');
+     }
+   });
+ 
+   chaptersButton.on('click', function() {
+     $(this).parent().toggleClass('is-active');
+   });
+ 
+   select.on('click', function() {
+     $(this).toggleClass('is-active');
+   });
+ 
+   selectItem.on('click', function() {
+     selectItem.removeClass('is-active');
+     $(this).addClass('is-active');
+   });
+ 
+   volumeButton.on('click', function() {
+     if($(this).hasClass('icon-volume')) {
+       $(this).removeClass('icon-volume').addClass('icon-mute');
+       $(this).next().val(0);
+       $(this).next().css('background-size', '0% 100%');
+     } else if($(this).hasClass('icon-mute')) {
+       $(this).removeClass('icon-mute').addClass('icon-volume');
+       $(this).next().val(50);
+       $(this).next().css('background-size', '50% 100%');
+     }
+   });
+ 
+   $(document).keyup(function(e) {
+     if (e.keyCode === 27) {
+       $('.c-media__popup').removeClass('is-open');
+     }
+   });
+ })();
+ 
+ // Range
+ const rangeInputs = document.querySelectorAll('input[type="range"]')
+ 
+ function handleInputChange(e) {
+   let target = e.target
+   if (e.target.type !== 'range') {
+     target = document.getElementById('range')
+   }
+   const min = target.min
+   const max = target.max
+   const val = target.value
+ 
+   target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
+ }
+ 
+ rangeInputs.forEach(input => {
+   input.addEventListener('input', handleInputChange)
+ });
+ 
+ // Quotes slider
+ (function () {
+   let slider = $('.l-author__quotes__slider');
+ 
+   slider.slick({
+     slidesToScroll: 1,
+     slidesToShow: 1,
+     infinite: true,
+     dots: true,
+     arrows: false,
+     autoplay: true,
+     autoplaySpeed: 2500
+   });
+ })();
+ 
+ // Text overlay toggler
+ (function () {
+   let overlays = $('.l-article__overlay');
+   let button = $('.l-article__read-more');
+ 
+   overlays.each(function () {
+     let maxHeight = $(this).attr('data-max-height');
+     if($(this).outerHeight() > maxHeight) {
+       $(this).css({'maxHeight': maxHeight+'px'}).addClass('is-active');
+     } else {
+       $(this).next('.l-article__read-more').hide();
+     }
+   });
+ 
+   button.on('click', function() {
+     let dataLabel = $(this).attr('data-label');
+     let dataAction = $(this).attr('data-action');
+     $(this).parent().find('.l-article__overlay').toggleClass('is-clicked');
+     if($(this).text() === dataLabel) {
+       $(this).text(dataAction);
+     } else {
+       $(this).text(dataLabel);
+     }
+   });
+ })();
+ 
+ //Zmieniamy się popup
+ (function() {
+   let $change = $('.l-change-pop');
+   function change() {
+     if(localStorage.getItem('change') === null) {
+       $change.addClass('show');
+     } else {
+       $change.remove();
+       return false;
+     }
+ 
+     $change.on('click', '.l-change-pop__close', function () {
+       $change.slideUp();
+       localStorage.setItem('change', 'showed');
+     });
+   }
+ 
+   if($change.length) { change(); }
+ })();
+ 
+ //Switch
+ (function() {
+   let $switchOnce = $('#switch-once');
+   let $switchMonthly = $('#switch-monthly');
+ 
+   $switchMonthly.on('click', function() {
+     $('.l-checkout__payments__box').removeClass('once');
+   });
+ 
+   $switchOnce.on('click', function() {
+     $('.l-checkout__payments__box').addClass('once');
+   });
+ })();
+ 
+ //Copy function
+ (function() {
+   let $copy = $('.js-copy');
+ 
+   $copy.on('click', function() {
+     let $copyText = $(this).closest('.l-checkout__info__item').find('input');
+     $copyText.select();
+     document.execCommand('copy');
+   });
+ })();
diff --combined src/wolnelektury/static/2022/styles/components/_player.scss
index 9e4095088,7ef0760dc..8b4ee513f
--- a/src/wolnelektury/static/2022/styles/components/_player.scss
+++ b/src/wolnelektury/static/2022/styles/components/_player.scss
@@@ -3,9 -3,19 +3,19 @@@
    width: 100%;
    align-items: center;
    position: relative;
-   padding: 25px 34px;
    background-color: #D5ECED;
-   border-radius: 5px;
+   padding: 25px 34px 25px 14px;
+ }
+ 
+ .c-player__head {
+   background: #006066;
+   padding: 8px 14px;
+   border-radius: 5px 5px 0px 0px;
+   font-weight: 600;
+   font-size: 12px;
+   line-height: 140%;
+   letter-spacing: 0.02em;
+   color: #FFFFFF;
  }
  
  .c-player__btn {
@@@ -41,6 -51,51 +51,51 @@@
    }
  }
  
+ .c-player__btns {
+   display: flex;
+   align-items: center;
+ 
+   button {
+     padding: 0;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     background-color: transparent;
+     width: 40px; height: 40px;
+     border-radius: 50%;
+     cursor: pointer;
+     margin: 0 5px;
+     outline: 0;
+     border: 1px solid transparent;
+     transition: border-color $ease-out 450ms;
+ 
+     &:first-child {
+       margin-left: 0;
+     }
+ 
+     &:hover {
+       border-color: rgba(#007880, 0.5);
+     }
+ 
+     &.c-player__btn--md {
+       width: 50px; height: 50px;
+       .icon-play {
+         font-size: 20px;
+         position: relative;
+         left: 2px;
+       }
+       .icon-pause {
+         font-size: 20px;
+       }
+     }
+ 
+     .icon {
+       color: #007880;
+       font-size: 16px;
+     }
+   }
+ }
+ 
  .c-player__timeline {
    max-width: 590px;
    width: calc(100% - 60px);
@@@ -48,65 -103,39 +103,60 @@@
    margin-right: 0;
    position: relative;
  
-   &:before {
-     content: "1×";
-     font-weight: bold;
-     font-size: 15px;
-     line-height: 120%;
-     text-align: center;
-     color: #007880;
-     position: absolute;
-     top: 0;
-     bottom: 0;
-     margin: auto;
-     display: flex;
-     align-items: center;
-     justify-content: center;
-     margin-left: -70px;
-   }
- 
    & > span {
      height: 10px;
      width: 100%;
      display: block;
 -    background: #FFFFFF;
 +    background: #F2F2F2;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
  
 -    span {
 -      width: 40%;
 +    span.jp-seek-bar {
 +      height: 100%;
 +      position: absolute;
 +      border-radius: 5px;
 +      background-color: #FFFFFF;
 +      top: 0; left: 0;
 +    }
 +    
 +    span.jp-play-bar {
        height: 100%;
        position: absolute;
        border-radius: 5px;
-       background-color: #083F4D;
+       background-color: #006066;
        top: 0; left: 0;
      }
    }
  }
  
 +
 +.c-player__title {
 +  top: -27px;
 +  left: 0;
 +  position: absolute;
 +  font-style: normal;
 +  font-weight: normal;
 +  font-size: 12px;
 +  line-height: 140%;
 +  letter-spacing: 0.05em;
 +  color: #083F4D;
 +}
 +
 +
  .c-player__info {
+   top: -27px;
+   left: 0;
+   position: absolute;
+   font-style: normal;
+   font-weight: normal;
+   font-size: 12px;
+   line-height: 140%;
+   letter-spacing: 0.05em;
+   color: #083F4D;
+ }
+ 
+ .c-player__chapters {
    top: -27px;
    right: 0;
    position: absolute;
@@@ -116,6 -145,105 +166,105 @@@
    line-height: 140%;
    letter-spacing: 0.05em;
    color: #083F4D;
+   z-index: 1;
+ 
+   &.is-active {
+     span {
+       &:after {
+         transform: rotate(180deg);
+       }
+     }
+     ul {
+       opacity: 1;
+       transform: none;
+       pointer-events: all;
+     }
+   }
+ 
+   span {
+     display: flex;
+     align-items: center;
+     cursor: pointer;
+ 
+     &:after {
+       margin-left: 5px;
+       content: $icon-arrow-down;
+       font-family: '#{$icomoon-font-family}' !important;
+       transition: transform $ease-out 450ms;
+     }
+   }
+ 
+   ul {
+     width: 283px;
+     position: absolute;
+     background-color: #083F4D;
+     transform: translateY(-10px);
+     opacity: 0;
+     box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
+     transition: all $ease-out 450ms;
+     list-style-position: inside;
+     border-radius: 10px;
+     right: 0;
+     margin: 10px 0 0;
+     padding: 15px;
+     pointer-events: none;
+     li {
+       font-size: 12px;
+       line-height: 140%;
+       letter-spacing: 0.05em;
+       list-style-type: decimal;
+       margin: 5px 0;
+       color: white;
+     }
+   }
+ }
+ 
+ .c-player__volume {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   margin-left: 40px;
+ 
+   .icon {
+     font-size: 21px;
+     color: #007880;
+     margin-right: 8px;
+     cursor: pointer;
+   }
+ 
+   input[type=range] {
+     width: 100px;
+     -webkit-appearance: none;
+     background: 0 0;
+     border: 0;
+     border-radius: 5px;
+     height: 10px;
+     color: #006066;
+     display: block;
+     margin: 0;
+     padding: 0;
+     transition: box-shadow .3s ease;
+     outline: 0;
+ 
+     background: white;
+     background-image: linear-gradient(#006066, #006066);
+     background-size: 60% 100%;
+     background-repeat: no-repeat;
+   }
+ }
+ 
+ input[type=range]::-webkit-slider-thumb {
+   height: 10px;
+   width: 10px;
+   background: #006066;
+   border-radius: 50%;
+   cursor: pointer;
+ }
+ 
+ input[type=range],
+ input[type=range]::-webkit-slider-runnable-track,
+ input[type=range]::-webkit-slider-thumb {
+   -webkit-appearance: none;
  }
  
  .c-player__length {
@@@ -123,7 -251,7 +272,7 @@@
    display: block;
    position: relative;
  
 -  span {
 +  > span {
      position: absolute;
      padding-top: 10px;
      font-style: normal;