top banner

diff --git a/requirements/requirements.txt b/requirements/requirements.txt
index 6b650e3..f80322c 100644 (file)
--- a/requirements/requirements.txt
+++ b/requirements/requirements.txt
@@ -34,7 +34,7 @@ python-fb==0.2
 
 Feedparser==6.0.11
 
 
 Feedparser==6.0.11
 

-Pillow==10.4
+Pillow==9.5.0

 mutagen==1.47
 sorl-thumbnail==12.10.0
 
 mutagen==1.47
 sorl-thumbnail==12.10.0
 

diff --git a/src/annoy/templates/annoy/banner_top.html b/src/annoy/templates/annoy/banner_top.html
new file mode 100644 (file)
index 0000000..2a62d11
--- /dev/null
+++ b/src/annoy/templates/annoy/banner_top.html
@@ -0,0 +1,51 @@
+{% load l10n %}
+
+{% if banner %}
+<div class="
+           annoy-banner_{{ banner.place }}-container
+            annoy-banner-style_{{ banner.style }}
+           ">
+  <div class="
+              annoy-banner
+              annoy-banner_{{ banner.place }}
+              {% if banner.image %}with-image{% endif %}
+              {% if banner.smallfont %}banner-smallfont{% endif %}
+              "
+        id="annoy-banner-{{ banner.id }}"
+       style="
+           {% if banner.text_color %}color: {{ banner.text_color }};{% endif %}
+           {% if banner.background_color %}background-color: {{ banner.background_color }};{% endif %}
+
+        ">
+    <div class="annoy-banner-inner">
+
+      <div class="image-box">
+       {% if banner.image %}
+       <img src="{{ banner.image.url }}">
+       {% endif %}
+      </div>
+
+      <div class="text-box">
+       <div class="text">
+          {{ banner.get_text|safe|linebreaks }}
+       </div>
+
+       <div class="state-box">
+         <div class="action-box">
+           {% if banner.action_label %}
+            <a class="action" href="{{ banner.url }}">
+              {{ banner.action_label }}
+            </a>
+           {% endif %}
+         </div>
+       </div>
+      </div>
+
+
+
+    </div>
+  </div>
+  </div>
+
+{% endif %}
+

diff --git a/src/annoy/templatetags/annoy.py b/src/annoy/templatetags/annoy.py
index 40f7511..25293f1 100644 (file)
--- a/src/annoy/templatetags/annoy.py
+++ b/src/annoy/templatetags/annoy.py
@@ -22,6 +22,13 @@ def annoy_banner_blackout(context):
         'closable': True,
     }
 
         'closable': True,
     }
 

+@register.inclusion_tag('annoy/banner_top.html', takes_context=True)
+def annoy_banner_top(context):
+    banners = Banner.choice('top', request=context['request'])
+    return {
+        'banner': banners.first(),
+        'closable': True,
+    }

 
 @register.inclusion_tag('annoy/banners.html', takes_context=True)
 def annoy_banners(context, place):
 
 @register.inclusion_tag('annoy/banners.html', takes_context=True)
 def annoy_banners(context, place):

diff --git a/src/wolnelektury/static/2022/styles/layout/_annoy.scss b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
index 9d90c65..e91d585 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_annoy.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
@@ -75,10 +75,10 @@
 }
 
 
 }
 
 

-.annoy-banner_crisis-container {
+.annoy-banner_crisis-container,
+.annoy-banner_top-container {

     position: sticky;
     top: 0;
     position: sticky;
     top: 0;

-    height: 160px;

     z-index: 10;
     box-shadow: 0 0 10px black;
     display: flex;
     z-index: 10;
     box-shadow: 0 0 10px black;
     display: flex;


@@ -87,18 +87,27 @@
     align-items:center;
     cursor: pointer;
 
     align-items:center;
     cursor: pointer;
 

-    @media screen and (min-height: 480px) {
-       height: 33vh;
-       top: calc(-33vh + 160px);
+    &.annoy-banner_top-container {
+       padding: 16px 0;

     }
     }

+    &.annoy-banner_crisis-container {
+       height: 160px;
+    
+       @media screen and (min-height: 480px) {
+           height: 33vh;
+           top: calc(-33vh + 160px);
+       }

 
 

-    @media screen and (max-width: 940px) {
-       padding: 10px 0;
-       height: auto;
-       top: 0;
+       @media screen and (max-width: 940px) {
+           padding: 10px 0;
+           height: auto;
+           top: 0;
+       }

     }
 
     }
 

-    .annoy-banner_crisis {
+
+    .annoy-banner_crisis,
+    .annoy-banner_top {

        position: sticky;
        top: 0;
        width: 100%;
        position: sticky;
        top: 0;
        width: 100%;


@@ -116,11 +125,11 @@
            .image-box {
                position: relative;
                img {
            .image-box {
                position: relative;
                img {

-                   height: 159px;
+                   max-height: 159px;

                    display: block;
 
                    @media screen and (max-width: 700px) {
                    display: block;
 
                    @media screen and (max-width: 700px) {

-                       height: 120px;
+                       max-height: 120px;

                    }
                }
            }
                    }
                }
            }


@@ -191,7 +200,8 @@
            }
        }
     }
            }
        }
     }

-    &.annoy-banner-style_crisis_quiet {
+    &.annoy-banner-style_crisis_quiet,
+    &.annoy-banner_top-container {

        background: black;
        color: white;
        .annoy-banner-inner {
        background: black;
        color: white;
        .annoy-banner-inner {

diff --git a/src/wolnelektury/templates/header.html b/src/wolnelektury/templates/header.html
index 17e2379..3cc4851 100644 (file)
--- a/src/wolnelektury/templates/header.html
+++ b/src/wolnelektury/templates/header.html
@@ -7,6 +7,7 @@
 {% load preview_ad from catalogue_tags %}
 
 {% annoy_banner_crisis %}
 {% load preview_ad from catalogue_tags %}
 
 {% annoy_banner_crisis %}

+{% annoy_banner_top %}

 
 {% annoy_banner_blackout %}
 
 
 {% annoy_banner_blackout %}