Working menu.

diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js
index 994900a..efe1a97 100644 (file)
--- 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');
     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');
       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);
     }
       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');
     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);
     }
   });
 })();
 
       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)');
 /// 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 2b38995..dadf449 100644 (file)
--- 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;
 }
     height: 100%;
     overflow-y: hidden;
 }


@@ -16,6 +16,10 @@
     //opacity: .5;
 }
 
     //opacity: .5;
 }
 

+.l-navigation__logo {
+    height: 44px;
+}
+

 .l-navigation__menu {
     overflow-y: scroll;
 }
 .l-navigation__menu {
     overflow-y: scroll;
 }


@@ -34,6 +38,9 @@
     }
 }
 .l-navigation__actions {
     }
 }
 .l-navigation__actions {

+    position: relative;
+    height: 44px;
+

     .user {
         margin-right: 25px;
     }
     .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 490159c..b7d7a33 100644 (file)
--- a/src/wolnelektury/templates/2022/header.html
+++ b/src/wolnelektury/templates/2022/header.html
@@ -17,6 +17,21 @@
     <div class="l-navigation__actions">
       {% if request.user.is_authenticated %}
         <a href="/ludzie/polka/"><i class="icon icon-liked"></i></a>
     <div class="l-navigation__actions">
       {% if request.user.is_authenticated %}
         <a href="/ludzie/polka/"><i class="icon icon-liked"></i></a>

+        <div id="user-menu">
+          <ul>
+            <li>
+              <a href="{% url 'user_settings' %}" tabindex="-1">
+                <strong>
+                  {{ request.user.username }}
+                </strong>
+              </a>
+            </li>
+            {% if request.user.is_staff %}
+              <li><a href="{% url 'admin:index' %}" tabindex="-1">Administracja</a></li>
+            {% endif %}
+            <li><a href="{% url 'logout' %}?next={% block logout %}{{ request.get_full_path }}{% endblock %}" tabindex="-1">Wyloguj się</a></li>
+          </ul>
+        </div>

         <a href="{% url 'user_settings' %}" class="user">
           {% if request.user.is_staff %}
             <img src="{% static '2022/images/icons/user-staff.svg' %}">
         <a href="{% url 'user_settings' %}" class="user">
           {% if request.user.is_staff %}
             <img src="{% static '2022/images/icons/user-staff.svg' %}">


@@ -28,9 +43,9 @@
         </a>
       {% else %}
         <div class="l-navigation__login">
         </a>
       {% else %}
         <div class="l-navigation__login">

-          <a href='...'>Zaloguj się</a>
+          <a href='{% url 'login' %}?next={{ request.path }}'>Zaloguj się</a>

           /
           /

-          <a href='...'>Załóż konto</a>
+          <a href='{% url 'register' %}?next={{ request.path }}'>Załóż konto</a>

         </div>
       {% endif %}
       <button class="l-navigation__button js-menu" aria-label="Menu">
         </div>
       {% endif %}
       <button class="l-navigation__button js-menu" aria-label="Menu">


@@ -42,35 +57,37 @@
     <div class="l-navigation__menu">
       <div class="l-container">
         <div class="l-navigation__menu__links">
     <div class="l-navigation__menu">
       <div class="l-container">
         <div class="l-navigation__menu__links">

-          <ul>
-            <li><strong>Katalog</strong></li>
-            {% menu 'Katalog' %}
-          </ul>
-          <ul>
-            <li><strong>Włącz się</strong></li>
-            {% menu 'Włącz się' %}
-          </ul>
-          <ul>
-            <li><strong>Aktualności</strong></li>
-            {% cache 1800 latest_blog_posts %}
+          {% cache 30 menu LANGUAGE_CODE %}
+            <ul>
+              <li><strong>Katalog</strong></li>
+              {% menu 'Katalog' %}
+            </ul>
+            <ul>
+              <li><strong>Włącz się</strong></li>
+              {% menu 'Włącz się' %}
+            </ul>
+            <ul>
+              <li><strong>Aktualności</strong></li>

               {% latest_blog_posts %}
               {% latest_blog_posts %}

-            {% endcache %}
-            {% menu 'Aktualności' %}
-          </ul>
-          <ul>
-            <li><strong>Narzędzia</strong></li>
-            {% menu 'Narzędzia' %}
-          </ul>
-          <ul>
-            <li><strong>O nas</strong></li>
-            {% menu 'O nas' %}
-          </ul>
+              {% menu 'Aktualności' %}
+            </ul>
+            <ul>
+              <li><strong>Narzędzia</strong></li>
+              {% menu 'Narzędzia' %}
+            </ul>
+            <ul>
+              <li><strong>O nas</strong></li>
+              {% menu 'O nas' %}
+            </ul>
+          {% endcache %}

         </div>
 
         <div class="l-navigation__menu__info">
 
           <div class="l-navigation__menu__book">
         </div>
 
         <div class="l-navigation__menu__info">
 
           <div class="l-navigation__menu__book">

-            {% preview_ad %}
+            {% cache 300 preview_ad LANGUAGE_CODE %}
+              {% preview_ad %}
+            {% endcache %}

           </div>
 
           <div class="l-navigation__menu__social">
           </div>
 
           <div class="l-navigation__menu__social">