New layout fixes.

diff --git a/src/catalogue/templates/catalogue/2022/book_box.html b/src/catalogue/templates/catalogue/2022/book_box.html
index 2d2ac05..db6bfb1 100644 (file)
--- a/src/catalogue/templates/catalogue/2022/book_box.html
+++ b/src/catalogue/templates/catalogue/2022/book_box.html
@@ -20,7 +20,7 @@
     {% if book.is_book %}
       <span class="icon icon-book-alt" title="książka"></span>
     {% endif %}
-    {% if book.has_mp3 %}
+    {% if book.has_mp3_file %}
       <span class="icon icon-audio" title="audiobook"></span>
     {% endif %}
     {% if book.is_picture %}

diff --git a/src/catalogue/templates/catalogue/2022/theme_detail.html b/src/catalogue/templates/catalogue/2022/theme_detail.html
index 622b6b5..71ec046 100644 (file)
--- a/src/catalogue/templates/catalogue/2022/theme_detail.html
+++ b/src/catalogue/templates/catalogue/2022/theme_detail.html
@@ -57,7 +57,7 @@
                 <div class="l-books__item__content">
                   <div class="l-books__item__actions">
                     <a href="#" class="icon icon-book-alt"></a>
-                    {% if fragment.book.has_mp3 %}
+                    {% if fragment.book.has_mp3_file %}
                       <a href="#" class="icon icon-audio"></a>
                     {% endif %}
                   </div>

diff --git a/src/catalogue/templates/catalogue/preview_ad.html b/src/catalogue/templates/catalogue/preview_ad.html
index 33ea773..85b4ed2 100644 (file)
--- a/src/catalogue/templates/catalogue/preview_ad.html
+++ b/src/catalogue/templates/catalogue/preview_ad.html
@@ -1,8 +1,18 @@
 {% if book %}
-  <p>
-    <strong>Prapremiera!</strong>
-    Dziękujemy za wsparcie – przeczytaj w prezencie już dzisiaj!
-  </p>
+  <div class="l-navigation__menu__book__header">
+    {% if accessible %}
+      <p class='korona'>
+        <strong>Prapremiera!</strong>
+        Dziękujemy za wsparcie – przeczytaj w prezencie już dzisiaj!
+      </p>
+    {% else %}
+      <p>
+        <strong>Prapremiera!</strong>
+        Dorzuć się, aby przeczytać.
+      </p>
+      <a class="button" href="{% url 'club_join' %}?pk_campaign=menu-preview">Dorzuć się</a>
+    {% endif %}
+  </div>
   <div class="l-navigation__menu__book__info">
     <a href="{{ book.get_absolute_url }}" tabindex="-1">
       <img src="{{ book.cover_clean.url }}" alt="{{ book.pretty_title }}">

diff --git a/src/catalogue/templatetags/catalogue_tags.py b/src/catalogue/templatetags/catalogue_tags.py
index 93b6f1c..f4f121d 100644 (file)
--- a/src/catalogue/templatetags/catalogue_tags.py
+++ b/src/catalogue/templatetags/catalogue_tags.py
@@ -530,8 +530,10 @@ def content_warning(book):
     }
 
 
-@register.inclusion_tag('catalogue/preview_ad.html')
-def preview_ad():
+@register.inclusion_tag('catalogue/preview_ad.html', takes_context=True)
+def preview_ad(context):
+    book = Book.objects.filter(preview=True).first()
     return {
-        'book': Book.objects.filter(preview=True).first()
+        'accessible': book.is_accessible_to(context['request'].user),
+        'book': book,
     }

diff --git a/src/chunks/templates/chunks/menu.html b/src/chunks/templates/chunks/menu.html
index 56ccfa2..ed6669a 100644 (file)
--- a/src/chunks/templates/chunks/menu.html
+++ b/src/chunks/templates/chunks/menu.html
@@ -4,8 +4,12 @@
       <a href="{{ item.final_link }}" tabindex="-1">
     {% endif %}
     {% if item.highlight %}
+      <em>
     {% endif %}
     {{ item.final_name }}
+    {% if item.highlight %}
+      </em>
+    {% endif %}
     {% if item.has_link %}
       </a>
     {% endif %}

diff --git a/src/chunks/templatetags/chunks.py b/src/chunks/templatetags/chunks.py
index e86288e..7c431c1 100644 (file)
--- a/src/chunks/templatetags/chunks.py
+++ b/src/chunks/templatetags/chunks.py
@@ -11,8 +11,8 @@ from ..models import Chunk, Attachment
 register = template.Library()
 
 
-@register.simple_tag
-def chunk(key, cache_time=0):
+@register.simple_tag(takes_context=True)
+def chunk(context, key, cache_time=0):
     try:
         cache_key = 'chunk:%s:%s' % (key, get_language())
         c = cache.get(cache_key)
@@ -23,7 +23,11 @@ def chunk(key, cache_time=0):
     except Chunk.DoesNotExist:
         n = Chunk(key=key)
         n.save()
-        return ''
+        content = ''
+
+    if context['request'].user.is_staff:
+        content = f'<span data-edit="chunks/chunk/{key}"></span>' + content
+
     return mark_safe(content)
 
 

diff --git a/src/club/templates/club/2022/donation_step1.html b/src/club/templates/club/2022/donation_step1.html
index 057ab41..2f28d06 100644 (file)
--- a/src/club/templates/club/2022/donation_step1.html
+++ b/src/club/templates/club/2022/donation_step1.html
@@ -10,6 +10,9 @@
     <input type="radio" name="switch" id="switch-once" value="single" class="toggle-input" {% if schedule and not schedule.monthly %}checked{% endif %}>
     <input type="radio" name="switch" id="switch-monthly" value="monthly" class="toggle-input" {% if not schedule or schedule.monthly %}checked{% endif %}>
     <div class="l-switch__wrapper">
+      {% if user.is_staff %}
+        <span data-edit="club/club/{{ club.pk }}"></span>
+      {% endif %}
 
       <div class="l-switch white">
         <label class='toggle-for' for="switch-once">Jednorazowo</label>

diff --git a/src/club/templates/club/2022/donation_step_base.html b/src/club/templates/club/2022/donation_step_base.html
index 976b13c..df26493 100644 (file)
--- a/src/club/templates/club/2022/donation_step_base.html
+++ b/src/club/templates/club/2022/donation_step_base.html
@@ -1,4 +1,5 @@
 {% extends '2022/base.html' %}
+{% load chunks %}
 {% load club %}
 {% load static %}
 
@@ -84,9 +85,7 @@
           <h3>Transparentność jest dla nas bardzo ważna.</h3>
           <div>
             <div class="l-article__overlay" data-max-height="91">
-              <p>
-                O tym, jak wydajemy pozyskane pieniądze, dowiesz się ze sprawozdań finansowych i merytorycznych, które znajdziesz na naszej stronie lub w bazie Narodowego Instytutu Wolności, wpisując nr KRS 0000070056.
-              </p>
+              {% chunk 'donation-transparency' %}
             </div>
           </div>
         </div>
@@ -94,18 +93,7 @@
           <h3>Informacja o przetwarzaniu danych osobowych</h3>
           <div>
             <div class="l-article__overlay" data-max-height="91">
-              <p>
-                W każdej chwili możesz zrezygnować z subskrypcji. <a href="#">Więcej informacji. Polityka prywatności.</a>
-                Administratorem Twoich danych osobowych jest Fundacja Nowoczesna Polska z siedzibą w Warszawie, przy ul. Marszałkowskiej 84/92 lok. 125, 00-514 Warszawa (dalej: Fundacja).
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias consequatur deserunt doloribus facilis, ipsum nisi nulla quam rem totam!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias consequatur deserunt doloribus facilis, ipsum nisi nulla quam rem totam!
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias consequatur deserunt doloribus facilis, ipsum nisi nulla quam rem totam!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias consequatur deserunt doloribus facilis, ipsum nisi nulla quam rem totam!
-              </p>
+              {% chunk 'donation-data-processing' %}
             </div>
             <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Więcej" data-action="Mniej">Więcej</button>
           </div>
@@ -114,10 +102,7 @@
           <h3>FAQ</h3>
           <div>
             <div class="l-article__overlay" data-max-height="91">
-              <p>
-                Chcesz zmienić wysokość darowizny, anulować przyszłe płatności lub masz inne pytania? Tu znajdziesz odpowiedzi na nie:
-                <a href="#">Pytania i odpowiedzi dotyczące płatności</a>.
-              </p>
+              {% chunk 'donation-faq' %}
             </div>
           </div>
         </div>

diff --git a/src/wolnelektury/settings/static.py b/src/wolnelektury/settings/static.py
index 2469532..a1e5318 100644 (file)
--- a/src/wolnelektury/settings/static.py
+++ b/src/wolnelektury/settings/static.py
@@ -27,6 +27,7 @@ PIPELINE = {
                 'contrib/jquery-ui-1.13.1.custom/jquery-ui.css',
                 '2022/styles/main.scss',
                 '2022/more.scss',
+                'chunks/edit.scss',
             ],
             'output_filename': 'css/compressed/2022.css',
         },
@@ -141,6 +142,7 @@ PIPELINE = {
                 'js/search.js',
                 'js/2022.js',
                 '2022/book/filter.js',
+                'chunks/edit.js',
             ],
             'output_filename': 'js/2022.min.js'
         },

diff --git a/src/wolnelektury/static/2022/images/korona.svg b/src/wolnelektury/static/2022/images/korona.svg
new file mode 100644 (file)
index 0000000..a53b60b
--- /dev/null
+++ b/src/wolnelektury/static/2022/images/korona.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7882 11.4369L3.63295 16.8863L0.26238 6.27546L5.02327 8.05076L8.57764 2.72475L14.554 5.02331L17.2865 0.413034L20.7882 11.4369Z" fill="#FBC40F"/>
+</svg>

diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
index dadf449..9d7cf21 100644 (file)
--- a/src/wolnelektury/static/2022/more.scss
+++ b/src/wolnelektury/static/2022/more.scss
@@ -12,16 +12,59 @@ body.is-open {
     padding: 10px 50px;
 }
 
-.l-navigation {
-    //opacity: .5;
-}
-
 .l-navigation__logo {
     height: 44px;
 }
 
 .l-navigation__menu {
-    overflow-y: scroll;
+    .scrollable {
+        height: 100%;
+        overflow-y: scroll;
+        padding-bottom: 30px;
+    }
+}
+
+.l-navigation__menu__book__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    p {
+        margin: 0;
+
+        &.korona {
+            &:before {
+                content: url('images/korona.svg');
+                width: 21px;
+                margin-right: -21px;
+                position: relative;
+                top: -10px;
+                left: -3px;
+            }
+        }
+    }
+}
+.l-navigation__menu__book {
+    .button {
+        display: inline-block;
+        font-size: 16px;
+        font-weight: 700;
+        padding: 0 20px;
+        min-width: 212px;
+        line-height: 38px;
+        text-align: center;
+
+        /* green 700 */
+        background: #92BD39;
+        color: #083F4D;
+        border-radius: 6px;
+
+        transition: background-color 150ms;
+
+        &:hover {
+            background-color: #FBC40F;
+        }
+    }
 }
 .l-navigation__menu__book__info {
     img {
@@ -29,6 +72,11 @@ body.is-open {
         height: 60px;
     }
 }
+.l-navigation__menu__links ul li a em {
+    font-style: normal;
+    color: #FFA500;
+    font-weight: 600;
+}
 .l-navigation__login {
     color: #74BDC2;
     margin-right: 20px;
@@ -85,6 +133,9 @@ body.is-open {
     }
 }
 
+.l-checkout__box {
+    position: relative;
+}
 
 .l-checkout__payments {
     display: none;

diff --git a/src/wolnelektury/templates/2022/header.html b/src/wolnelektury/templates/2022/header.html
index b7d7a33..47db25d 100644 (file)
--- a/src/wolnelektury/templates/2022/header.html
+++ b/src/wolnelektury/templates/2022/header.html
@@ -28,6 +28,7 @@
             </li>
             {% if request.user.is_staff %}
               <li><a href="{% url 'admin:index' %}" tabindex="-1">Administracja</a></li>
+              <li><a class='edit-links-toggle' href="#" tabindex="-1">Edycja</a></li>
             {% endif %}
             <li><a href="{% url 'logout' %}?next={% block logout %}{{ request.get_full_path }}{% endblock %}" tabindex="-1">Wyloguj się</a></li>
           </ul>
@@ -55,70 +56,70 @@
       </button>
     </div>
     <div class="l-navigation__menu">
-      <div class="l-container">
-        <div class="l-navigation__menu__links">
-          {% 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 %}
-              {% 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="scrollable">
+        <div class="l-container">
+          <div class="l-navigation__menu__links">
+            {% 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 %}
+                {% 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__info">
 
-          <div class="l-navigation__menu__book">
-            {% cache 300 preview_ad LANGUAGE_CODE %}
+            <div class="l-navigation__menu__book">
               {% preview_ad %}
-            {% endcache %}
-          </div>
+            </div>
 
-          <div class="l-navigation__menu__social">
-            <ul>
-              <li>
-                <a href="https://www.facebook.com/wolnelektury/"
-                   title="Facebook" tabindex="-1" target="_blank">
-                  <i class="icon icon-fb" aria-hidden="true"></i>
-                </a>
-              </li>
-              <li>
-                <a href="https://www.youtube.com/c/WolneLekturyYT/"
-                   title="YouTube" tabindex="-1" target="_blank">
-                  <i class="icon icon-yt" aria-hidden="true"></i>
-                </a>
-              </li>
-              <li>
-                <a href="https://www.instagram.com/wolnelektury/"
-                   title="Instagram" tabindex="-1" target="_blank">
-                  <i class="icon icon-ig" aria-hidden="true"></i>
-                </a>
-              </li>
-              <li>
-                <a href="https://twitter.com/wolnelektury"
-                   title="Twitter" tabindex="-1" target="_blank">
-                  <i class="icon icon-tt" aria-hidden="true"></i>
-                </a>
+            <div class="l-navigation__menu__social">
+              <ul>
+                <li>
+                  <a href="https://www.facebook.com/wolnelektury/"
+                     title="Facebook" tabindex="-1" target="_blank">
+                    <i class="icon icon-fb" aria-hidden="true"></i>
+                  </a>
+                </li>
+                <li>
+                  <a href="https://www.youtube.com/c/WolneLekturyYT/"
+                     title="YouTube" tabindex="-1" target="_blank">
+                    <i class="icon icon-yt" aria-hidden="true"></i>
+                  </a>
+                </li>
+                <li>
+                  <a href="https://www.instagram.com/wolnelektury/"
+                     title="Instagram" tabindex="-1" target="_blank">
+                    <i class="icon icon-ig" aria-hidden="true"></i>
+                  </a>
+                </li>
+                <li>
+                  <a href="https://twitter.com/wolnelektury"
+                     title="Twitter" tabindex="-1" target="_blank">
+                    <i class="icon icon-tt" aria-hidden="true"></i>
+                  </a>
               </li>
             </ul>
           </div>
         </div>
+        </div>
       </div>
     </div>
   </div>