ourworld_web/www_tf_demo
23
0
Fork 0
Code Pull Requests Activity

ui alternative using shortcodes

Browse Source
This commit is contained in:
timurgordon
2022-03-22 19:04:04 +03:00
parent 785e5f25d7
commit c7abe17090
8 changed files with 70 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
templates/shortcodes/row.html
View File

@@ -10,40 +10,48 @@ Parameters:
-->
{% set columns = body | safe | markdown | split(pat="|||") %}
{% set classes = "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-12 lg:py-16"%}
{% set row_class = "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-12 lg:py-16"%}
<!-- aligns columns depending on col number-->
{% if 2 < columns | length %}
{% set classes = classes ~ " lg:items-start" %}
{% set row_class = row_class ~ " lg:items-start" %}
{% else %}
{% set classes = classes ~ " lg:items-center" %}
{% set row_class = row_class ~ " lg:items-center" %}
{% endif %}
{% set column_classes = "flex-1 mb-8 md:mb-0 md:mx-8" %}
{% set col_class = "flex-1 mb-8 md:mb-0 md:mx-8" %}
{% if style %}
<!-- makes row full screen width, strips margins -->
{% if "lean" in style %}
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% set column_classes = "flex-1 m-4 lg:m-0" %}
{% if "center" in style %}
{% set row_class = row_class ~ " text-center mx-auto justify-center" %}
{% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
{% endif %}
{% if "center" in style %}
{% set classes = classes ~ " text-center" %}
<!-- makes row full screen width, strips margins -->
{% if "lean" in style %}
{% set row_class = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% set col_class = "flex-1 m-4 lg:m-0" %}
{% endif %}
<!-- makes row full screen width, strips margins -->
{% if "narrow" in style %}
{% set row_class = row_class ~ " lg:max-w-3xl" %}
{% elif "moderate" in style %}
{% set row_class = row_class ~ " lg:m-20" %}
{% endif %}
{% endif %}
<!-- makes row full screen width and adds background img -->
{% set styles = "" %}
{% if bgPath %}
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover" %}
{% set classes = classes ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
{% set row_class = row_class ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
{% endif %}
<div class="{{classes}}" style="{{styles}}">
<div class="{{row_class}}" style="{{styles}}">
{% for column in columns%}
<!-- Hides empty columns if displayed vertically in small screen -->
@@ -53,7 +61,7 @@ Parameters:
</div>
{% else %}
<div class="{{column_classes}}">
<div class="{{col_class}}">
<!-- handles mermaid markdown content display -->
{% if "{% mermaid() %}" in column %}
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
@@ -65,7 +73,6 @@ Parameters:
{{ column | safe }}
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>