Add paragraph for text and aside

itk-dev · Apr 12, 2024 · f815beb · f815beb
1 parent 19f3901
commit f815beb
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 89 deletions.
diff --git a/web/themes/custom/hoeringsportal/assets/css/layout/_aside.scss b/web/themes/custom/hoeringsportal/assets/css/layout/_aside.scss
@@ -1,14 +1,8 @@
-.group-right {
+.aside-contact-info-text {
+  background-color: $color-petroleum-100;
+  padding: $spacer;
+
   @include media-breakpoint-up(md) {
     padding: $spacer * 2.5 0 $spacer * 2.5 $spacer * 2.5;
   }
-
-  padding-top: $spacer * 2;
-  padding-bottom: $spacer * 2;
-}
-
-.aside-block {
-  background-color: $color-petroleum-100;
-
-
 }
diff --git a/web/themes/custom/hoeringsportal/assets/css/layout/_page-project.scss b/web/themes/custom/hoeringsportal/assets/css/layout/_page-project.scss
@@ -6,7 +6,7 @@
     font-size: clamp(1.25rem, calc(1.25vw + $font-size-base), 1.6rem);
   }
 
-  h2 + p strong {
+  .abstract {
     font-size: clamp(1.1rem, 0.8vw + 1rem, 1.3rem);
     font-weight: normal;
     line-height: 1.6;

diff --git a/web/themes/custom/hoeringsportal/templates/block/block-content--aside-contact-info.html.twig b/web/themes/custom/hoeringsportal/templates/block/block-content--aside-contact-info.html.twig
@@ -28,32 +28,36 @@
  * @ingroup themeable
  */
 #}
-
-<div class="aside-contact-info">
-  {% if block_content.field_department.value %}
-    <div class="text-primary">
-      {{ block_content.field_department.value }}
-    </div>
-  {% endif %}
-  {% if block_content.field_title.value %}
-    <div class="h4">
-      {{ block_content.field_title.value }}
-    </div>
-  {% endif %}
-  {% if block_content.field_address.value %}
-    <div>
-      {# @TODO Which is better; `nl2br` or `style="white-space: pre-line"` #}
-      {{ block_content.field_address.value|nl2br }}
-    </div>
-  {% endif %}
-  {% if block_content.field_phone_number.value %}
-    <div>
-      {{ 'Phone'|trans }}: <a href="tel:{{ block_content.field_phone_number.value }}">{{ block_content.field_phone_number.value }}</a>
-    </div>
-  {% endif %}
-  {% if block_content.field_email.value %}
-    <div>
-      {{ 'Email'|trans }}: <a href="mailto:{{ block_content.field_email.value }}">{{ block_content.field_email.value }}</a>
-    </div>
+<div class="aside-contact-info d-flex flex-column">
+  {% if block_content.field_image %}
+    <img class="aside-contact-info-image" src="{{ block_content.field_image|file_url }}" alt="" />
   {% endif %}
+  <div class="aside-contact-info-text">
+    {% if block_content.field_department.value %}
+      <div class="text-primary">
+        {{ block_content.field_department.value }}
+      </div>
+    {% endif %}
+    {% if block_content.field_title.value %}
+      <div class="h4">
+        {{ block_content.field_title.value }}
+      </div>
+    {% endif %}
+    {% if block_content.field_address.value %}
+      <p>
+        {# @TODO Which is better; `nl2br` or `style="white-space: pre-line"` #}
+        {{ block_content.field_address.value|nl2br }}
+      </p>
+    {% endif %}
+    {% if block_content.field_phone_number.value %}
+      <div>
+        {{ 'Phone'|trans }}: <a href="tel:{{ block_content.field_phone_number.value }}">{{ block_content.field_phone_number.value }}</a>
+      </div>
+    {% endif %}
+    {% if block_content.field_email.value %}
+      <div>
+        {{ 'Email'|trans }}: <a href="mailto:{{ block_content.field_email.value }}">{{ block_content.field_email.value }}</a>
+      </div>
+    {% endif %}
+  </div>
 </div>
diff --git a/.../custom/hoeringsportal/templates/field/field--block-content--aside-contact-info.html.twig b/.../custom/hoeringsportal/templates/field/field--block-content--aside-contact-info.html.twig
diff --git a/web/themes/custom/hoeringsportal/templates/node/node--project-main-page.html.twig b/web/themes/custom/hoeringsportal/templates/node/node--project-main-page.html.twig
@@ -10,14 +10,14 @@
 <div class="container content__container">
   <div class="row">
     <div class="col-md-8">
-      {{ content|without('field_project_image', 'field_short_description', 'field_aside_block', 'field_content_sections', 'published_at') }}
+      {{ content|without('field_project_image', 'field_short_description', 'field_aside_block', 'field_content_sections', 'field_area', 'published_at') }}
     </div>
     <div class="col-md-4 pt-md-3">
       {{ content.field_aside_block }}
     </div>
   </div>
 </div>
-<div class="sections">
+<div class="sections d-flex flex-column row-gap-5">
   {{ content.field_content_sections }}
 </div>
 <div class="container">

diff --git a/...custom/hoeringsportal/templates/paragraph/paragraph--text-aside-blocks-2-column.html.twig b/...custom/hoeringsportal/templates/paragraph/paragraph--text-aside-blocks-2-column.html.twig
@@ -0,0 +1,18 @@
+<div class="container">
+  <div class="row">
+    <div class="{{ paragraph.field_aside_block.value ? 'col-md-8' : 'col-md-12' }}">
+      {% if paragraph.field_title.value %}
+        <h2>{{ paragraph.field_title.value }}</h2>
+      {% endif %}
+      {% if paragraph.field_abstract.value %}
+        <p class="abstract">{{ paragraph.field_abstract.value }}</p>
+      {% endif %}
+      {{ content.field_body }}
+    </div>
+    {% if paragraph.field_aside_block.value %}
+      <div class="col-md-4">
+        {{ content.field_aside_block }}
+      </div>
+    {% endif %}
+  </div>
+</div>