check.html

<style type="text/css" scoped>
@media screen {
    div#checkprint {
        display: none;
    }
}
@media print {
    tr.onscreen {
        display: none;
    }
    div#printable-content.panel {
        font-size: 14pt !important; font-weight: normal;
        line-height: 1.25;
    }
    table#vouchertable {
        position: absolute;
        top: 470px;
    }
    table#vouchertable2 {
        position: absolute;
        top: 950px;
    }
    div#date {
        position: absolute;
        top: 80px;
        left: 930px;
    }
    div#amount{
        position: absolute;
        top: 130px;
        left: 930px;
    }
    div#payee{
        position: absolute;
        top: 130px;
        left: 100px;
    }
    div#amountwords{
        position: absolute;
        top: 180px;
        left: 0px;
        right: -100pt;

       white-space: nowrap;

       overflow: hidden;
    }
    div#address {
        position: absolute;
        top: 220px;
        left: 180px;
    }
    div#memo {
        position: absolute;
        top: 320px;
        left: 100px;
    }
}
}
</style>
{% capture payee %}{{ recipient.name }}{% endcapture %}
{% capture date %}{% for field in fields %}{% if field.label == "Date" %}{{ field.text }}{% endif %}{% endfor %}{% endcapture %}
{% capture amount %}{% for total in table.totals %}{% if total.label == "Total" %}{{ total.text }}{% endif %}{% endfor %}{% endcapture %}
{% capture anc %}{% for total in table.totals %}{% if total.label == "Total" %}{% assign an=total.number %}{% endif %}{% endfor %}{% endcapture %}
{% capture amount_in_words %}{% for total in table.totals %}{% if total.label == "Total" %}{{ total.number | spell_out }}{% endif %}{% endfor %}{% endcapture %}
{% capture cents%}{{an| plus: 0 | modulo: 1| times: 100 | round: 0}}{%endcapture%}
{% capture cents_in_words %}{% if cents != "0" %}{{cents|prepend: " and " | append: "/100 "}}{% endif %}{% endcapture %}

<div id="checkprint">
<div id="date">{{date}}</div>
<div id="payee">{{payee}}</div>
<div id="amount">{{-amount | remove: "$"|strip|prepend: '***'-}}</div>
<div id="amountwords"><span>{{amount_in_words}}{{cents_in_words}}* * * * * * *</span></div>
<div id="address">{{recipient.name}}<br>{{ recipient.address | newline_to_br }}</div>
<div id="memo">{{description}}</div>
</div>

<table style="padding: 30px" id="vouchertable">
    <thead>
    <tr class="onscreen">
            <td colspan="99">

                <table style="margin-bottom: 20px"><tr>
                    <td>
                        <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                        <div>{{ recipient.address | newline_to_br }}</div>
                        <div>{{ recipient.identifier }}</div>
                    </td>
                    <td style="{% if business.address != null %}border-right-width: 1px; padding-right: 20px; {% endif %}text-align: right">
                        {% for field in fields %}
                        <div style="font-weight: bold">{{ field.label }}</div>
                        <div style="margin-bottom: 10px">{{ field.text }}</div>
                        {% endfor %}
                    </td>
                    {% if business.address != null %}
                    <td style="padding-left: 20px; width: 1px; white-space: nowrap">
                        <div style="font-weight: bold">{{ business.name }}</div>
                        <div>{{ business.address | newline_to_br }}</div>
                        <div>{{ business.identifier }}</div>
                    </td>
                    {% endif %}
                </tr></table>

                <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
            </td>
        </tr>
        <tr>
            {% for column in table.columns %}
            <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; width: 80px{% endif %}">{{ column.label }}</td>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in table.rows %}
        <tr>
            {% for cell in row.cells %}
            <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
        <tr>
        {% for column in table.columns %}
            <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}">&nbsp;</td>
        {% endfor %}
        </tr>
        {% for total in table.totals %}
        <tr>
            <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
            <td style="border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
        </tr>
        {% endfor %}

        {% for field in custom_fields %}
        <tr>
            <td colspan="99">
                <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
                <div>{{ field.text | newline_to_br }}</div>
            </td>
        </tr>
        {% endfor %}

        <tr>
            <td colspan="99">
                {% if emphasis.text != null and emphasis.positive %}
                <div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
                {% endif %}

                {% if emphasis.text != null and emphasis.negative %}
                <div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

<table style="padding: 30px" id="vouchertable2">
    <thead>
        <tr>
            {% for column in table.columns %}
            <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; width: 80px{% endif %}">{{ column.label }}</td>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in table.rows %}
        <tr>
            {% for cell in row.cells %}
            <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
        <tr>
        {% for column in table.columns %}
            <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}">&nbsp;</td>
        {% endfor %}
        </tr>
        {% for total in table.totals %}
        <tr>
            <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
            <td style="border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
        </tr>
        {% endfor %}

        {% for field in custom_fields %}
        <tr>
            <td colspan="99">
                <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
                <div>{{ field.text | newline_to_br }}</div>
            </td>
        </tr>
        {% endfor %}

        <tr>
            <td colspan="99">
                {% if emphasis.text != null and emphasis.positive %}
                <div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
                {% endif %}

                {% if emphasis.text != null and emphasis.negative %}
                <div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>