templates/manuals_detail_page: add class name for styling of block ty…

…pes, update styling, add classname for richtext video, rm title from video block fixes #2344
liqd · Sep 27, 2021 · 3a5b517 · 3a5b517
1 parent cb45c24
commit 3a5b517
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/euth_wagtail/assets/js/euth_wagtail.js b/euth_wagtail/assets/js/euth_wagtail.js
@@ -82,6 +82,10 @@ $(document).ready(function () {
     prevArrow: '<button class="slick-prev"><i class="fa fa-chevron-left"></i></button>',
     nextArrow: '<button class="slick-next"><i class="fa fa-chevron-right"></i></button>'
   })
+
+  // This function adds bootstrap ratio class to iframes added by wagtail richtext
+  $('.rich-text iframe').addClass('rich-text__iframe')
+  $('.rich-text__iframe').parent('div').addClass('ratio ratio-16x9')
 })
 
 export function showFileName () {

diff --git a/euth_wagtail/assets/scss/components/_filter_bar.scss b/euth_wagtail/assets/scss/components/_filter_bar.scss
@@ -73,7 +73,7 @@
 
     .search-filter-input {
         color: $gray-dark;
-        padding: 11px 20px;
+        padding: 12px 20px;
         border: 1px solid $gray-light;
         border-right: none;
         min-width: 270px;

diff --git a/euth_wagtail/assets/scss/wagtail-blocks/_blocks.scss b/euth_wagtail/assets/scss/wagtail-blocks/_blocks.scss
@@ -13,7 +13,6 @@
 }
 
 .rich-text {
-    padding-bottom: $block-vpadding;
     text-align: left;
 
     h2,
@@ -29,6 +28,11 @@
     }
 }
 
+.rich-text__iframe {
+    width: 100%;
+    height: 100%;
+}
+
 .tile-block__tile {
     box-shadow: 1px 1px 20px 5px rgba(0, 0, 0, 0.1);
 

diff --git a/home/templates/home/blocks/video_block.html b/home/templates/home/blocks/video_block.html
@@ -1,6 +1,8 @@
 {% load i18n wagtailimages_tags wagtailembeds_tags %}
 <section class="video-block block">
-    <h3 class="block-title">{{ self.title }}</h3>
+    {% if self.title %}
+      <h3 class="block-title">{{ self.title }}</h3>
+    {% endif %}
     <div class="ratio ratio-16x9">
         {% embed self.video.url "500" %}
     </div>

diff --git a/home/templates/home/manuals_detail_page.html b/home/templates/home/manuals_detail_page.html
@@ -30,13 +30,15 @@ <h1>
                            {% image block.value original class="img-fluid" %}
                       {% elif block.block_type == 'heading' %}
                           <h2>{{ block }}</h2>
+                      {% elif block.block_type == 'rich_text' or block.block_type == 'paragraph' %}
+                          <div class="rich-text">{{ block }}</div>
                       {% else %}
                           {{ block }}
                       {% endif %}
                   </div>
               </div>
             {% else %}
-              <div class="col-12">
+              <div class="offset-md-1 col-md-10">
                 {{ block }}
               </div>
             {% endif %}

diff --git a/home/templates/home/manuals_detail_page_sections.html b/home/templates/home/manuals_detail_page_sections.html
@@ -30,9 +30,14 @@ <h2>Contents</h2>
                 </ul>
             </div>
             <div class="col-sm-9 col-md-6">
-                {% for block in page.body %}
+              {% for block in page.body %}
+                {% if block.block_type == 'highlighted_column_block' or block.block_type == 'column_cta_block' or block.block_type == 'tile_column_block' %}
+                {% elif block.block_type == 'rich_text' or block.block_type == 'paragraph' %}
+                    <div class="rich-text">{{ block }}</div>
+                {% else %}
                     {% include_block block %}
-                {% endfor %}
+                {% endif %}
+              {% endfor %}
             </div>
         </div>
     </div>