receipts/templates/receipt.html.tera

84 lines
1.6 KiB
Plaintext

{% extends "base" %} {% block head %}
<title>Receipt: ${{ amount }} at {{ vendor }}</title>
<style>
.photo {
max-width: 100%;
}
.photo img {
max-width: 100%;
}
.photo iframe {
width: 100%;
aspect-ratio: 8.5 / 11;
}
@media screen and (min-width: 900px) {
article {
display: flex;
justify-content: space-between;
}
.attributes {
margin-right: 1em;
}
.photo {
flex-grow: 1;
}
}
</style>
{% endblock %} {% block main %}
<h1>Receipt</h1>
<nav>
<sl-button href="/receipts">
<sl-icon slot="prefix" name="chevron-left"></sl-icon>Receipts
</sl-button>
</nav>
<article>
<div class="attributes">
<p>
<sl-input
label="Date"
value='{{ date | date(format="%A %_d %B %Y") }}'
readonly
></sl-input>
</p>
<p>
<sl-input label="Vendor" value="{{ vendor }}" readonly></sl-input>
</p>
<p>
<sl-input
type="number"
min="0.01"
step="0.01"
label="Amount"
name="amount"
value="{{ amount }}"
readonly
></sl-input>
</p>
<p>
<sl-textarea
label="Notes"
name="notes"
value="{{ notes }}"
readonly
></sl-textarea>
</p>
</div>
<div class="photo">
<p>
{% if filename is ending_with(".pdf") %}
<iframe src="/receipts/{{ id }}/view/{{ filename }}"></iframe>
{% else %}
<img src="/receipts/{{ id }}/view/{{ filename }}" />
{% endif %}
</p>
</div>
</article>
{% endblock %} {% block scripts %}
<script src="/static/receipt.js"></script>
{% endblock %}