Skip to content

Commit

Permalink
Make countdown widget go full width on homepage https://trello.com/c/…
Browse files Browse the repository at this point in the history 
…Oo7bUy1N/17-countdown-widget
  • Loading branch information
@drogers98
drogers98 committed Jan 5, 2024
1 parent ab310b7 commit afbe41b
Showing 1 changed file with 44 additions and 50 deletions.
94 changes: 44 additions & 50 deletions modules/hp_countdown/templates/paragraph--hp-countdown.html.twig
View file
Expand Up @@ -15,69 +15,63 @@
%}

{% if content.field_hp_cdn_image|render %}
{% set img_classes = ['countdown-container', 'has-image'] %}
{% set img_classes = ['countdown-container', 'has-image'] %}
{% else %}
{% set img_classes = ['countdown-container'] %}
{% set img_classes = ['countdown-container'] %}
{% endif %}

<section{{attributes.addClass(classes).setAttribute('id','hp-'~paragraph.id())}} aria-label="Countdown">
{% if hp_show_wrapper %}
<div class="compartment">
{% endif %}

<div class="countdown" data-enddate="{{ hp_cdn_ymd }}T{{ hp_cdn_hms }}">
<div{{ attributes.addClass(img_classes) }}>
<div class="countdown" data-enddate="{{ hp_cdn_ymd }}T{{ hp_cdn_hms }}">
<div{{attributes.addClass(img_classes)}}>

{% if content.field_hp_cdn_image|render %}
<div class="countdown-image-canvas">
{{ content.field_hp_cdn_image }}
</div>
{% endif %}
{% if content.field_hp_cdn_image|render %}
<div class="countdown-image-canvas">
{{ content.field_hp_cdn_image }}
</div>
{% endif %}

<div class="countdown-sequence-container">
<div class="countdown-sequence-container">

{% if content.field_hp_cdn_title|render %}
<p class="countdown-sequence-title">{{ content.field_hp_cdn_title }}</p>
{% endif %}
{% if content.field_hp_cdn_title|render %}
<p class="countdown-sequence-title">{{ content.field_hp_cdn_title }}</p>
{% endif %}


<div class="countdown-sequence">
<div class="countdown-sequence_days">
<p class="countdown-sequence-text">
<span class="countdown-days">0</span>
</p>
<p class="countdown-sequence-label">Days</p>
</div>
<span class="time-sep">:</span>
<div class="countdown-sequence_hours">
<p class="countdown-sequence-text">
<span class="countdown-hours">0</span>
</p>
<p class="countdown-sequence-label">Hours</p>
</div>
<span class="time-sep">:</span>
<div class="countdown-sequence_mins">
<p class="countdown-sequence-text">
<span class="countdown-mins">0</span>
</p>
<p class="countdown-sequence-label">Mins</p>
</div>
<span class="time-sep">:</span>
<div class="countdown-sequence_secs">
<p class="countdown-sequence-text">
<span class="countdown-secs">0</span>
</p>
<p class="countdown-sequence-label">Secs</p>
</div>
<div class="countdown-sequence">
<div class="countdown-sequence_days">
<p class="countdown-sequence-text">
<span class="countdown-days">0</span>
</p>
<p class="countdown-sequence-label">Days</p>
</div>
<span class="time-sep">:</span>
<div class="countdown-sequence_hours">
<p class="countdown-sequence-text">
<span class="countdown-hours">0</span>
</p>
<p class="countdown-sequence-label">Hours</p>
</div>
<span class="time-sep">:</span>
<div class="countdown-sequence_mins">
<p class="countdown-sequence-text">
<span class="countdown-mins">0</span>
</p>
<p class="countdown-sequence-label">Mins</p>
</div>
<span class="time-sep">:</span>
<div class="countdown-sequence_secs">
<p class="countdown-sequence-text">
<span class="countdown-secs">0</span>
</p>
<p class="countdown-sequence-label">Secs</p>
</div>
{% if content.field_hp_cdn_link|render %}
<p class="countdown-link">{{ content.field_hp_cdn_link }}</p>
{% endif %}
</div>
{% if content.field_hp_cdn_link|render %}
<p class="countdown-link">{{ content.field_hp_cdn_link }}</p>
{% endif %}
</div>
</div>
</div>

{% if hp_show_wrapper %}
</div>
{% endif %}
</section>

0 comments on commit afbe41b

Please sign in to comment.