vanilla-framework 4.37.0 → 4.37.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/templates/_macros/vf_equal-heights.jinja +13 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vanilla-framework",
3
- "version": "4.37.0",
3
+ "version": "4.37.1",
4
4
  "author": {
5
5
  "email": "webteam@canonical.com",
6
6
  "name": "Canonical Webteam"
package/templates/_macros/vf_equal-heights.jinja CHANGED
@@ -61,23 +61,25 @@
61
61
  <div class="{%- if items | length == 2 -%}col-6 col-start-large-7{%- elif items | length % 3 == 0 and items | length % 4 != 0 -%}col-9 col-start-large-4{%- else -%}col{%- endif -%}">
62
62
  <div class="p-equal-height-row--wrap">
63
63
  {%- for item in items -%}
64
- {% set image = item.get("image_html") | trim %}
65
- {% set title = item.get("title_text") or "" | trim %}
66
- {% set description = item.get("description_html") or "" | trim %}
67
- {% set cta = item.get("cta_html") or "" | trim %}
64
+ {% set image = item.get("image_html", "") | trim %}
65
+ {% set title = item.get("title_text", "") | trim %}
66
+ {% set description = item.get("description_html", "") | trim %}
67
+ {% set cta = item.get("cta_html", "") | trim %}
68
68
  <div class="p-equal-height-row__col is-borderless">
69
- {#- Image item (required) -#}
69
+ {#- Image item -#}
70
70
  <div class="p-equal-height-row__item">
71
- <div
72
- class="p-image-container {% if image_aspect_ratio_small != 'auto' %} p-image-container--{{ image_aspect_ratio_small }}-on-small{% endif %}{% if image_aspect_ratio_medium != 'auto' %} p-image-container--{{ image_aspect_ratio_medium }}-on-medium{% endif %}{% if image_aspect_ratio_large != 'auto' %} p-image-container--{{ image_aspect_ratio_large }}-on-large{% endif %} is-cover{% if highlight_images %} is-highlighted{% endif %}" >
73
- {#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
74
- {{- image | safe -}}
75
- </div>
71
+ {%- if image | length > 0 %}
72
+ <div
73
+ class="p-image-container {% if image_aspect_ratio_small != 'auto' %} p-image-container--{{ image_aspect_ratio_small }}-on-small{% endif %}{% if image_aspect_ratio_medium != 'auto' %} p-image-container--{{ image_aspect_ratio_medium }}-on-medium{% endif %}{% if image_aspect_ratio_large != 'auto' %} p-image-container--{{ image_aspect_ratio_large }}-on-large{% endif %} is-cover{% if highlight_images %} is-highlighted{% endif %}" >
74
+ {#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
75
+ {{- image | safe -}}
76
+ </div>
77
+ <hr class="p-rule--highlight"/>
78
+ {%- endif -%}
76
79
  </div>
77
80
  {#- Title item -#}
78
81
  <div class="p-equal-height-row__item">
79
82
  {%- if title | length > 0 -%}
80
- <hr class="p-rule--highlight"/>
81
83
  <p class="p-heading--{{ subtitle_heading_level }}">{{- title -}}</p>
82
84
  {%- endif -%}
83
85
  </div>