From a37fe43b4e66df55d0491ae6defae31a07a645be Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Fri, 9 Sep 2022 11:57:17 +0200 Subject: [PATCH] Working menu. --- src/wolnelektury/static/2021/scripts/main.js | 37 ++++++++++- src/wolnelektury/static/2022/more.scss | 63 +++++++++++++++++- src/wolnelektury/templates/2022/header.html | 67 ++++++++++++-------- 3 files changed, 138 insertions(+), 29 deletions(-) diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index 994900a96..efe1a971a 100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@ -8,13 +8,13 @@ if(!$(this).hasClass('is-active')) { $(this).addClass('is-active'); menu.addClass('is-open'); - $('body').addClass('is-open'); + $('body').addClass('is-open'); button.find('.bar').addClass('animate'); menuLinks.attr('tabindex', 0); } else { $(this).removeClass('is-active'); menu.removeClass('is-open'); - $('body').removeClass('is-open'); + $('body').removeClass('is-open'); button.find('.bar').removeClass('animate'); menuLinks.attr('tabindex', -1); } @@ -24,13 +24,44 @@ if (e.keyCode === 27) { button.removeClass('is-active'); menu.removeClass('is-open'); - $('body').removeClass('is-open'); + $('body').removeClass('is-open'); button.find('.bar').removeClass('animate'); menuLinks.attr('tabindex', -1); } }); })(); +// User menu. +(function() { + let button = $('.l-navigation__actions .user'); + let menu = $('#user-menu'); + let menuLinks = menu.find('a'); + + button.on('click', function() { + if (!menu.hasClass('is-open')) { + menu.addClass('is-open'); + menuLinks.attr('tabindex', 0); + } else { + menu.removeClass('is-open'); + menuLinks.attr('tabindex', -1) + } + return false; + }); + + $(document).keyup(function(e) { + if (e.keyCode === 27) { + menu.removeClass('is-open'); + menuLinks.attr('tabindex', -1); + } + }); + + $(document).click(function() { + menu.removeClass('is-open'); + menuLinks.attr('tabindex', -1); + }); + +})(); + /// Ebook/Audiobook Btns (function() { let button = $('.c-media__btn button:not(.l-button--media--full)'); diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss index 2b3899520..dadf44990 100644 --- a/src/wolnelektury/static/2022/more.scss +++ b/src/wolnelektury/static/2022/more.scss @@ -1,4 +1,4 @@ -.is-open { +body.is-open { height: 100%; overflow-y: hidden; } @@ -16,6 +16,10 @@ //opacity: .5; } +.l-navigation__logo { + height: 44px; +} + .l-navigation__menu { overflow-y: scroll; } @@ -34,6 +38,9 @@ } } .l-navigation__actions { + position: relative; + height: 44px; + .user { margin-right: 25px; } @@ -140,3 +147,57 @@ } } } + + + +#user-menu { + //display: none; + + position:absolute; + top: 60px; + z-index: 1; + + position: absolute; + width: 186px; + top: 48px; + right: 45px; + + /* yellow 900 */ + background: #F7BA00; + box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2); + border-radius: 10px; + overflow: hidden; + + opacity:0; + pointer-events: none; + transition: 200ms opacity; + + &.is-open { + //display: block; + pointer-events: all; + opacity: 100%; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + + li { + a { + color: #474747; + display: block; + line-height: 27px; + padding: 8px 21px; + &:hover { + color: #474747; + background: #EDAA00; + } + + strong { + font-weight: 600; + } + } + } + } +} diff --git a/src/wolnelektury/templates/2022/header.html b/src/wolnelektury/templates/2022/header.html index 490159c9b..b7d7a3324 100644 --- a/src/wolnelektury/templates/2022/header.html +++ b/src/wolnelektury/templates/2022/header.html @@ -17,6 +17,21 @@
{% if request.user.is_authenticated %} +
+ +
{% if request.user.is_staff %} @@ -28,9 +43,9 @@ {% else %} {% endif %}