From: Radek Czajka 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;