openeuropa / bootstrap-component-library

Openeuropa Bootstrap Component Library
https://oelibrary.netlify.app/
MIT License
15 stars 9 forks source link

Date block show better ratio for vertical cards with dates #522

Open msnassar opened 1 year ago

msnassar commented 1 year ago

When using the date block with the vertical card, the style for the date block looks broken. See screenshot image

For ucpkn, in order to fix this, we have patch BCL with: https://github.com/digit-devs/echo-ucpkn-dev/blob/develop/resources/patches/oe_bootstrap_theme_show_better_ratio_for_vertical_cards_with_dates.patch

diff --git a/assets/bcl/bcl-card/bcl-card.html.twig b/assets/bcl/bcl-card/bcl-card.html.twig
index e2b394d..0c2cab0 100644
--- a/assets/bcl/bcl-card/bcl-card.html.twig
+++ b/assets/bcl/bcl-card/bcl-card.html.twig
@@ -149,6 +149,11 @@
   <div class='{{ _horizontal_grid.left_col_classes  }}'>
 {% endif %}
   {% if _date is not empty %}
+    {% if not _horizontal %}
+      {% set _date = _date|merge({
+        attributes: create_attribute().addClass('ratio-16x9')
+      }) %}
+    {% endif %}
     {% block card_date %}
       {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
     {% endblock %}
diff --git a/assets/bcl/bcl-date-block/bcl-date-block.html.twig b/assets/bcl/bcl-date-block/bcl-date-block.html.twig
index e48d0c6..194fcad 100644
--- a/assets/bcl/bcl-date-block/bcl-date-block.html.twig
+++ b/assets/bcl/bcl-date-block/bcl-date-block.html.twig
@@ -23,16 +23,14 @@
   'bcl-date-block',
   'bg-date',
   'rounded',
-  'mw-date',
   'text-center',
   'd-flex',
   'flex-column',
-  'ratio',
-  'ratio-1x1'
+  'ratio'
 ] %}

 {% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+  {% set attributes = create_attribute().addClass(['mw-date', 'ratio-1x1']) %}
 {% endif %}

 {% set attributes = attributes.addClass(_classes) %}

And here is the result: image

tibi2303 commented 1 year ago

We are following the design here and the card component should not have cover all the space.

Here is the screenshot of the design.

image

I am waiting for your reply but we should not update this if it's not covered in the design. Please close this if there are no more points to discuss.

msnassar commented 1 year ago

Thanks for the reply, Yes, what I am proposing is not in the design. However, in UCPKN, we have a case where we display 3 date cards (events) next to each other. See example here https://civil-protection-knowledge-network.europa.eu/projects/arctic-reihn

The screenshot you provided is one col card without background (search variant)