mozilla
/
foundation.mozilla.org
зеркало из https://github.com/MozillaFoundation/foundation.mozilla.org.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Fix template indentation

This commit is contained in:
Tibor Leupold 2023-01-20 16:44:20 -08:00
Родитель ecb81d4c9d
Коммит 7271aea1aa
1 изменённых файлов: 37 добавлений и 37 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

74
network-api/networkapi/templates/fragments/blocks/card_grid_block.html
Просмотреть файл

@ -2,15 +2,15 @@
{% load wagtailcore_tags wagtailimages_tags %}
{% block block_content %}
<div class="tw-row">
{% for block in self.cards %}
{% with card=block count=self.cards|length %}
<div class="tw-px-4 small:tw-w-full {% if count > 2 %} large:tw-w-1/3 medium:tw-w-1/2 {% else %} medium:tw-w-1/2 {% endif %} tw-mb-5">
<div class="card-regular tw-h-full tw-flex tw-flex-col">
<div class="tw-row">
{% for block in self.cards %}
{% with card=block count=self.cards|length %}
<div class="tw-px-4 small:tw-w-full {% if count > 2 %} large:tw-w-1/3 medium:tw-w-1/2 {% else %} medium:tw-w-1/2 {% endif %} tw-mb-5">
<div class="card-regular tw-h-full tw-flex tw-flex-col">
<div class="tw-w-full tw-aspect-video tw-bg-gray-05">
<picture>
{% comment %}
<div class="tw-w-full tw-aspect-video tw-bg-gray-05">
<picture>
{% comment %}
Because of the card layout, the image size is not increasing consistently with the device size.
The image sizes are based on the layout on a banner page with wide layout.
The designed image aspect ratio is 16:9.
@ -25,35 +25,35 @@
The picture element will use the first source with a matching media query.
Using min-media queries, we need to list the breakpoints in decending order, otherwise larger screens will always use the first listed (because that min-width query would be fulfilled).
{% endcomment %}
{% image card.image fill-512x288 as img_small %}
{% image card.image fill-1024x576 as img_small_2x %}
{% image card.image fill-336x189 as img_medium %}
{% image card.image fill-672x378 as img_medium_2x %}
{% image card.image fill-448x252 as img_large %}
{% image card.image fill-896x504 as img_large_2x %}
{% image card.image fill-592x333 as img_xlarge %}
{% image card.image fill-1184x666 as img_xlarge_2x %}
<source media="(min-width: 1200px)" srcset="{{ img_xlarge.url }}, {{ img_xlarge_2x.url }} 2x" />
<source media="(min-width: 992px)" srcset="{{ img_large.url }}, {{ img_large_2x.url }} 2x" />
<source media="(min-width: 768px)" srcset="{{ img_medium.url }}, {{ img_medium_2x.url }} 2x" />
<source media="(max-width: 767px)" srcset="{{ img_small.url }}, {{ img_small_2x.url }} 2x" />
<img class="tw-w-full tw-h-full tw-object-cover" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}" />
</picture>
</div>
{% image card.image fill-512x288 as img_small %}
{% image card.image fill-1024x576 as img_small_2x %}
{% image card.image fill-336x189 as img_medium %}
{% image card.image fill-672x378 as img_medium_2x %}
{% image card.image fill-448x252 as img_large %}
{% image card.image fill-896x504 as img_large_2x %}
{% image card.image fill-592x333 as img_xlarge %}
{% image card.image fill-1184x666 as img_xlarge_2x %}
<source media="(min-width: 1200px)" srcset="{{ img_xlarge.url }}, {{ img_xlarge_2x.url }} 2x" />
<source media="(min-width: 992px)" srcset="{{ img_large.url }}, {{ img_large_2x.url }} 2x" />
<source media="(min-width: 768px)" srcset="{{ img_medium.url }}, {{ img_medium_2x.url }} 2x" />
<source media="(max-width: 767px)" srcset="{{ img_small.url }}, {{ img_small_2x.url }} 2x" />
<img class="tw-w-full tw-h-full tw-object-cover" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}" />
</picture>
</div>
<div class="tw-flex tw-flex-1">
<div class="tw-border-b-4 tw-border-gray-05 tw--mt-5 tw-bg-white tw-relative tw-mx-2 medium:tw-mx-4 tw-p-4 tw-w-full tw-flex tw-flex-col">
<h3 class="tw-h3-heading tw-mb-2">{{ card.title }}</h3>
<p>{{ card.body }}</p>
{% if card.link_label and card.link_url %}
<a class="tw-cta-link tw-mb-2" href="{{ card.link_url }}">{{ card.link_label }}</a>
{% endif %}
</div>
</div>
<div class="tw-flex tw-flex-1">
<div class="tw-border-b-4 tw-border-gray-05 tw--mt-5 tw-bg-white tw-relative tw-mx-2 medium:tw-mx-4 tw-p-4 tw-w-full tw-flex tw-flex-col">
<h3 class="tw-h3-heading tw-mb-2">{{ card.title }}</h3>
<p>{{ card.body }}</p>
{% if card.link_label and card.link_url %}
<a class="tw-cta-link tw-mb-2" href="{{ card.link_url }}">{{ card.link_label }}</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endwith %}
{% endfor %}
</div>
</div>
</div>
{% endwith %}
{% endfor %}
</div>
{% endblock %}