introduce styling for live-questions and improve functionalities like…

… full-screen and showing videos even if their phase is over
liqd · Nov 6, 2024 · 7caadbd · 7caadbd
1 parent 9d8e4bd
commit 7caadbd
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 100 deletions.
diff --git a/changelog/_8464.md b/changelog/_8464.md
@@ -0,0 +1,11 @@
+### Removed
+- styling for the video-wall that previously was packaged through webpack
+  - will now be styled in first party css
+
+### Changed
+- allowed certain attributes for iframes to make fullscreen possible
+- styled ck iframe embeds with aspect ratio
+- show live streams even when phase is over
+
+### Added
+- added pill for live stream status
diff --git a/meinberlin/assets/scss/components_user_facing/_pill.scss b/meinberlin/assets/scss/components_user_facing/_pill.scss
@@ -17,6 +17,10 @@
         background-color: $primary-400;
         color: $text-base;
     }
+
+    &--live {
+        background-color: $feedback-color-rejected;
+    }
 }
 
 .pill__list {

diff --git a/meinberlin/assets/scss/components_user_facing/_video-wall.scss b/meinberlin/assets/scss/components_user_facing/_video-wall.scss
@@ -0,0 +1,23 @@
+.video-wall {
+    width: 100%;
+    aspect-ratio: 16/9;
+    border: none;
+    position: relative;
+    background: rgba($white, 0.85) url("/static/images/placeholder.png");
+    background-blend-mode: lighten;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.375em;
+
+    button {
+        @extend .button, .button--play
+    }
+
+    .video-link,
+    strong {
+        display: none;
+    }
+}
diff --git a/meinberlin/assets/scss/components_user_facing/ck-editor/_iframe.scss b/meinberlin/assets/scss/components_user_facing/ck-editor/_iframe.scss
@@ -0,0 +1,3 @@
+.ck_embed_iframe {
+    aspect-ratio: 16/9;
+}
diff --git a/meinberlin/assets/scss/style_user_facing.scss b/meinberlin/assets/scss/style_user_facing.scss
@@ -49,6 +49,7 @@
 @import "components_user_facing/leaflet";
 @import "components_user_facing/project-tile";
 @import "components_user_facing/status-bar";
+@import "components_user_facing/video-wall";
 
 // a4 overwrites
 @import "components_user_facing/adhocracy4/a4-comments";
@@ -60,3 +61,4 @@
 
 // ck-editor 
 @import "components_user_facing/ck-editor/collapsible-fragment";
+@import "components_user_facing/ck-editor/iframe";
diff --git a/meinberlin/config/settings/base.py b/meinberlin/config/settings/base.py
@@ -397,7 +397,7 @@
             "a": ["href", "rel", "target"],
             "img": ["src", "alt", "style"],
             "div": ["class", "data-oembed-url"],
-            "iframe": ["src", "alt"],
+            "iframe": ["src", "alt", "allow", "allowfullscreen"],
             "figure": ["class", "div", "iframe"],
         },
     },

diff --git a/meinberlin/templates/a4modules/module_detail.html b/meinberlin/templates/a4modules/module_detail.html
@@ -3,122 +3,122 @@
 
 <!-- Extra blocks to ensure cookie banner for live stream -->
 {% block extra_css %}
-    {{ block.super }}
-    <link rel="stylesheet" href="{% static 'dsgvo_video_embed.css' %}"/>
-{% endblock %}
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'dsgvo_video_embed.css' %}"/>
+{% endblock extra_css %}
 
 {% block extra_js %}
-    {{ block.super }}
-    <script type="text/javascript" src="{% static 'dsgvo_video_embed.js' %}"></script>
-{% endblock %}
+  {{ block.super }}
+  <script type="text/javascript" src="{% static 'dsgvo_video_embed.js' %}"></script>
+{% endblock extra_js %}
 
 {% block title %}
-    {{ project.name }}
-    &mdash;
-    {{ block.super }}
-{% endblock %}
+  {{ project.name }}
+  –
+  {{ block.super }}
+{% endblock title %}
 
 {% block extra_messages %}
-    {{ block.super }}
+  {{ block.super }}
 
-    {% if project.is_draft %}
-        <ul class="messages">
-            <li class="alert alert--warning" role="alert">
-                <div class="container">
-                    {% translate 'This project is not published yet.' %}
-                </div>
-            </li>
-        </ul>
-    {% endif %}
-{% endblock %}
+  {% if project.is_draft %}
+    <ul class="messages">
+      <li class="alert alert--warning" role="alert">
+        <div class="container">
+          {% translate 'This project is not published yet.' %}
+        </div>
+      </li>
+    </ul>
+  {% endif %}
+{% endblock extra_messages %}
 
 <!-- Breadcrumbs are only necessary for multimodule projects with simultaneously running modules since the project detail
      template correctly displays breadcrumbs for other project -->
 {% if module.is_in_module_cluster %}
-    {% block breadcrumbs %}
-        <div id="layout-grid__area--contentheader">
-            <div id="content-header">
-                <nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
-                    <ol>
-                        <li>
-                            <a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a>
-                        </li>
-                        <li>
-                            <a href="{% url 'project-detail' project.slug %}">{{ project.name|truncatechars:50 }}</a>
-                        </li>
-                        <li class="active" aria-current="page">{{ module.name|truncatechars:50 }}</li>
-                    </ol>
-                </nav>
-            </div>
-        </div>
-    {% endblock %}
+  {% block breadcrumbs %}
+    <div id="layout-grid__area--contentheader">
+      <div id="content-header">
+        <nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
+          <ol>
+            <li>
+              <a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a>
+            </li>
+            <li>
+              <a href="{% url 'project-detail' project.slug %}">{{ project.name|truncatechars:50 }}</a>
+            </li>
+            <li class="active" aria-current="page">{{ module.name|truncatechars:50 }}</li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  {% endblock breadcrumbs %}
 {% endif %}
 
 {% block content %}
-
-    <div id="layout-grid__area--herounit">
-        {% if module.is_in_module_cluster %}
-            <div class="u-align-right u-spacer-bottom-double">
-                {% if module.previous_module_in_cluster %}
-                    <a class="button button--light" href="{% url 'module-detail' module.previous_module_in_cluster.slug %}">
-                        <i class="fa fa-chevron-left u-md-up-display-none"></i>
-                        <span class="u-md-down-display-none">{% translate 'Previous' %}</span>
-                    </a>
-                {% endif %}
-                <span class="u-spacer-left u-spacer-right">{{ module.readable_index_in_cluster }}
+  <div id="layout-grid__area--herounit">
+    {% if module.is_in_module_cluster %}
+      <div class="u-align-right u-spacer-bottom-double">
+        {% if module.previous_module_in_cluster %}
+          <a class="button button--light" href="{% url 'module-detail' module.previous_module_in_cluster.slug %}">
+            <i class="fa fa-chevron-left u-md-up-display-none"></i>
+            <span class="u-md-down-display-none">{% translate 'Previous' %}</span>
+          </a>
+        {% endif %}
+        <span class="u-spacer-left u-spacer-right">{{ module.readable_index_in_cluster }}
                     {% translate 'of' %}
-                    {{ module.module_cluster|length }}</span>
-                {% if module.next_module_in_cluster %}
-                    <a class="button button--light" href="{% url 'module-detail' module.next_module_in_cluster.slug %}">
-                        <i class="fa fa-chevron-right u-md-up-display-none"></i>
-                        <span class="u-md-down-display-none">{% translate 'Next' %}</span>
-                    </a>
-                {% endif %}
-            </div>
+          {{ module.module_cluster|length }}</span>
+        {% if module.next_module_in_cluster %}
+          <a class="button button--light" href="{% url 'module-detail' module.next_module_in_cluster.slug %}">
+            <i class="fa fa-chevron-right u-md-up-display-none"></i>
+            <span class="u-md-down-display-none">{% translate 'Next' %}</span>
+          </a>
         {% endif %}
-        <div
-            class="offset-lg-3 col-lg-6">
-            <!-- Live stream -->
-            {% for phase in module.phases %}
-                {% if phase == module.active_phase and live_stream %}
-                    <div class="ck-content">
-                        {{ live_stream.live_stream | disable_iframes | richtext }}
-                        <span class="label label--active">•{% translate ' Live now' %}</span>
-                    </div>
-                {% endif %}
-            {% endfor %}
-
-            <h1 class="project-header__title">{{ module.name }}</h1>
-            <p class="project-header__description">{{ module.description }}</p>
-        </div>
+      </div>
+    {% endif %}
+    <div class="modul-video">
+      <div class="mb-2">
+        <a class="link link--back" href="{% url 'project-detail' project.slug %}">{% translate 'Back to the project' %}</a>
+      </div>
+      <h2 class="title">
+        {{ module.name }}
+        <span class="pill pill--live">{% translate 'Live' context 'video' %}</span>
+      </h2>
+      <p>{{ module.description }}</p>
+      <div class="video-container">
+        <!-- Live stream -->
+        {% if live_stream %}
+          <div class="ck-content">
+            {{ live_stream.live_stream | disable_iframes | richtext }}
+          </div>
+        {% endif %}
+      </div>
     </div>
 
-
     <section id="layout-grid__area--maincontent">
-        <div class="modul-servicepanel fullwidth panel--heavy phase-info">
-            <div class="servicepanel__main">
-                {% include "a4modules/includes/module_detail_phase.html" %}
-            </div>
-            <div class="servicepanel__right phase-info__cta">
-                {% block project_action %}{% endblock %}
-            </div>
+      <div class="modul-servicepanel fullwidth panel--heavy phase-info">
+        <div class="servicepanel__main">
+          {% include "a4modules/includes/module_detail_phase.html" %}
+        </div>
+        <div class="servicepanel__right phase-info__cta">
+          {% block project_action %}{% endblock project_action %}
         </div>
+      </div>
 
-        {% block voting_token_field %}{% endblock %}
-        {% block phase_content %}{% endblock %}
-        {% if module.is_in_module_cluster %}
-            <section class="participation-tile__wrapper">
-                <div class="participation-tile__list-container">
-                    <h2 class="participation-tile__list-header">{% translate 'More from this online participation:' %}</h2>
-                    <ul class="u-list-reset participation-tile__list">
-                        {% for other_module in module.module_cluster %}
-                            {% if not other_module == module %}
-                                {% include "meinberlin_projects/includes/project_module_tile.html" with project=project module=other_module %}
-                            {% endif %}
-                        {% endfor %}
-                    </ul>
-                </div>
-            </section>
-        {% endif %}
+      {% block voting_token_field %}{% endblock voting_token_field %}
+      {% block phase_content %}{% endblock phase_content %}
+      {% if module.is_in_module_cluster %}
+        <section class="participation-tile__wrapper">
+          <div class="participation-tile__list-container">
+            <h2 class="participation-tile__list-header">{% translate 'More from this online participation:' %}</h2>
+            <ul class="u-list-reset participation-tile__list">
+              {% for other_module in module.module_cluster %}
+                {% if not other_module == module %}
+                  {% include "meinberlin_projects/includes/project_module_tile.html" with project=project module=other_module %}
+                {% endif %}
+              {% endfor %}
+            </ul>
+          </div>
+        </section>
+      {% endif %}
     </section>
-</div>{% endblock %}
+  </div>{% endblock content %}
diff --git a/tests/livequestions/views/test_livequestion_detail.py b/tests/livequestions/views/test_livequestion_detail.py
@@ -26,7 +26,7 @@ def test_detail_view(
         assert_template_response(
             response, "meinberlin_livequestions/question_module_detail.html"
         )
-        assert "• Live now" not in response.content.decode()
+        assert "Live" not in response.content.decode()
 
     live_stream = live_stream_factory(module=module, creator_id=user.id)
     live_stream.live_stream = (

diff --git a/webpack.common.js b/webpack.common.js
@@ -44,7 +44,6 @@ module.exports = {
     },
     dsgvo_video_embed: {
       import: [
-        'dsgvo-video-embed/css/dsgvo-video-embed.css',
         'dsgvo-video-embed/js/dsgvo-video-embed.js'
       ],
       dependOn: 'adhocracy4'