forked from hero/www_hero_project
44 lines
1.9 KiB
HTML
44 lines
1.9 KiB
HTML
|
<!-- row shortcode
|
||
|
|
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
||
|
|
Divides markdown into columns by splitting content using column identifier "|||"
|
||
|
|
Creates equal width blocks in a flex row.
|
||
|
|
|
||
|
|
Parameters:
|
||
|
|
- style:
|
||
|
|
- lean: if style is lean, the row doesn't have outer margins
|
||
|
|
- bgPath: if bgPath is passed, the row has a full width background
|
||
|
|
-->
|
||
|
|
|
||
|
|
{% set columns = body | safe | markdown | split(pat="|||") %}
|
||
|
|
|
||
|
|
<!-- aligns columns depending on col number-->
|
||
|
|
|
||
|
|
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %}
|
||
|
|
{% set column_classes = "flex-1 m-2 lg:m-4" %}
|
||
|
|
|
||
|
|
<!-- makes row full screen width and adds background img -->
|
||
|
|
|
||
|
|
<div class="{{classes}}">
|
||
|
|
{% for column in columns%}
|
||
|
|
<!-- Hides empty columns if displayed vertically in small screen -->
|
||
|
|
{% if column | as_str | length < 10 %}
|
||
|
|
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
|
||
|
|
{{column | split(pat="{% button() %}") | slice(end=1)}}
|
||
|
|
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
|
||
|
|
{% set body = button %}
|
||
|
|
{% include "shortcodes/button.html" %}
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<div class="{{column_classes}}">
|
||
|
|
{{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
|
||
|
|
<hr class="border-t-2 mt-2">
|
||
|
|
<br/>
|
||
|
|
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
|
||
|
|
{% set body = button %}
|
||
|
|
{% include "shortcodes/button.html" %}
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|