Merge pull request #269 from DanielGrams/issue/268

Optimize iFrame Widget #268

project/templates/_macros.html

@@ -1357,6 +1357,12 @@ $('#end-container').on('hidden', function() {
       {% endif %}
   }
 
+  {% if 'background' in styles %}
+  .page-link, .page-item.disabled .page-link {
+        background-color: {{ styles['background'] }};
+  }
+  {% endif %}
+
   {% if 'primary' in styles %}
   .btn-primary,
   .btn-primary:hover,

project/templates/example.html

@@ -3,9 +3,16 @@
 oveda - Terminkalender für Goslar und Hahnenklee
 {%- endblock -%}
 {% block content %}
+{% block header_before_site_js %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+    $(function () {
+        iFrameResize({ minHeight: 300 }, '#oveda-widget');
+    });
+</script>
+{%- endblock -%}
 
 <h1>Terminkalender für Goslar und Hahnenklee</h1>
-
-<iframe src="{{ url_for('widget_event_dates', au_short_name='goslar') }}" style="display: block; width: 100vw; height: 70vh; max-width: 100%;"></iframe>
+<iframe id="oveda-widget" src="{{ url_for('widget_event_dates', au_short_name='goslar') }}" style="width: 1px; min-width: 100%; max-width:100%;"></iframe>
 
 {% endblock %}

project/templates/layout.html

@@ -235,6 +235,7 @@
           </div>
       </nav>
       {%- endblock navbar %}
+      {% block managebar -%}
       {% if current_admin_unit %}
       {% set menu_options = get_manage_menu_options(current_admin_unit) %}
       <nav class="navbar navbar-expand-md navbar-light bg-light">
@@ -308,6 +309,7 @@
           </div>
       </nav>
       {% endif %}
+      {%- endblock managebar %}
 
       <div class="body-content"{% block body_content__attribs %}{% endblock body_content__attribs %}>
 

project/templates/layout_widget.html

@@ -9,6 +9,9 @@
 {% block navbar %}
 {% endblock %}
 
+{% block managebar %}
+{% endblock %}
+
 {%- block gtm_header %}
 {%- endblock gtm_header %}
 

project/templates/widget/event_date/list.html

@@ -3,7 +3,18 @@
 {%- block title -%}
 {{ _('Widget') }}
 {%- endblock -%}
-
+{% block header_before_site_js %}
+<script>
+    window.iFrameResizer = {
+        onReady: function() {
+            if ('parentIFrame' in window && document.location.search.length) {
+                parentIFrame.scrollToOffset(0,0);
+            }
+        }
+    }
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js" integrity="sha512-14SY6teTzhrLWeL55Q4uCyxr6GQOxF3pEoMxo2mBxXwPRikdMtzKMYWy2B5Lqjr6PHHoGOxZgPaxUYKQrSmu0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+{%- endblock -%}
 {% block content %}
 
     <form action="{{ request.url }}" class="form-inline mb-4" method="GET" autocomplete="off">

project/templates/widget/infoscreen/read.html

@@ -9,6 +9,8 @@
 {% endblock %}
 {% block navbar %}
 {% endblock %}
+{% block managebar %}
+{% endblock %}
 {% block metas %}
 <meta http-equiv="refresh" content="600"/>
 <meta name="apple-mobile-web-app-capable" content="yes">