ourworld_web/www_tf_demo
20
0
Fork 0
Code Pull Requests Activity

handled empty column display in small screen

Browse Source
This commit is contained in:
timurgordon 2022-03-01 01:50:47 +03:00
parent c26ab2725f
commit 46ee2cddbe
2 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/_default/base.html
View File

@ -6,7 +6,7 @@
<body> <body>
<div id="content" class="p-8 sm:p-12 md:p-16 lg:p-20"> <div id="content" class="p-8 pt-12 sm:p-12 md:p-16 lg:p-20">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
<div class="p-8 sm:p-12 md:p-16 lg:p-20"> <div class="p-8 sm:p-12 md:p-16 lg:p-20">

62
templates/shortcodes/row.html
View File

@ -12,54 +12,60 @@ Parameters:
{% set columns = body | safe | markdown | split(pat="|||") %} {% 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 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"%}
<!-- aligns columns depending on col number-->
{% if 2 < columns | length %} {% if 2 < columns | length %}
{% set classes = classes ~ " lg:items-start" %} {% set classes = classes ~ " lg:items-start" %}
{% else %} {% else %}
{% set classes = classes ~ " lg:items-center" %} {% set classes = classes ~ " lg:items-center" %}
{% endif %} {% endif %}
{% set column_classes = "flex-1 md:mx-8" %} {% set column_classes = "flex-1 mb-8 md:mb-0 md:mx-8" %}
{% if style %} {% if style %}
{% if "lean" in style %} <!-- makes row full screen width, strips margins -->
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %} {% if "lean" in style %}
{% set column_classes = "flex-1 m-4 lg:m-0" %} {% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% endif %} {% set column_classes = "flex-1 m-4 lg:m-0" %}
{% endif %}
{% if "center" in style %} {% if "center" in style %}
{% set classes = classes ~ " text-center" %} {% set classes = classes ~ " text-center" %}
{% endif %} {% endif %}
{% endif %} {% endif %}
<!-- makes row full screen width and adds background img -->
{% set styles = "" %} {% set styles = "" %}
{% if bgPath %} {% if bgPath %}
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover" %} {% 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 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" %}
{% endif %} {% endif %}
<div class="{{classes}}" style="{{styles}}"> <div class="{{classes}}" style="{{styles}}">
{% for column in columns%} {% for column in columns%}
<div class="{{column_classes}}"> <!-- Hides empty columns if displayed vertically in small screen -->
{% if "{% mermaid() %}" in column %} {% if column | as_str | length < 10 %}
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
{{ column | safe }}
</div>
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %} {% else %}
{% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%} <div class="{{column_classes}}">
<!-- handles mermaid markdown content display -->
<div class="mermaid"> {% if "{% mermaid() %}" in column %}
{{mermaid_content | safe }} yo {% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
</div> {% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
<div class="mermaid">
{% else %} {{mermaid_content | safe }}
</div>
{{ column | safe }} {% else %}
{{ column | safe }}
{% endif %} {% endif %}
</div>
</div>
{% endfor %} {% endif %}
{% endfor %}
</div> </div>