Changed HTML to use djlint
This commit is contained in:
@@ -1,81 +1,92 @@
|
||||
<div class="dropdown is-up is-right {% if IsActive %} is-active{% endif %}" id="usage-dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-small to-reduce-opacity" aria-haspopup="true" aria-controls="dropdown-menu3"
|
||||
<div class="dropdown is-up is-right {% if IsActive %}is-active{% endif %}"
|
||||
id="usage-dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-small to-reduce-opacity"
|
||||
aria-haspopup="true"
|
||||
aria-controls="dropdown-menu3"
|
||||
onclick="this.parentElement.parentElement.classList.toggle('is-active')">
|
||||
<span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<!-- Placeholder for additional text -->
|
||||
<div class="content" id="usage-content" style="max-height: 30vh; overflow-y: auto;">
|
||||
<table class="table is-narrow is-fullwidth is-striped" style="max-width: 200px;">
|
||||
<tbody>
|
||||
{% for usage in usages %}
|
||||
<tr>
|
||||
<td>
|
||||
<small>{{ usage.Key.ModelID }}</small>
|
||||
</td>
|
||||
<td class="has-text-right totalCostCell">
|
||||
<small>{{ usage.TotalCost|floatformat:2 }}$</small>
|
||||
</td>
|
||||
<td class="has-text-right is-hidden totalCountCell">
|
||||
<small>{{ usage.TotalCount }}</small>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Total cost -->
|
||||
<div class="content totalCostCell">
|
||||
<p>
|
||||
<strong>Total: </strong>
|
||||
<span class="totalCost">
|
||||
{{ TotalCost|floatformat:2 }}$
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Total count -->
|
||||
<div class="content is-hidden totalCountCell">
|
||||
<p>
|
||||
<strong>Total: </strong>
|
||||
<span class="totalCount">
|
||||
{{ TotalCount }} messages
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Top buttons -->
|
||||
<div class="buttons has-addons is-centered">
|
||||
<button class="button is-small is-primary" title="Money Spent" id="money-spent-button">
|
||||
<span class="icon ml-4 mr-4"><i class="fa-regular fa-money-bill-1"></i></span>
|
||||
</button>
|
||||
<button class="button is-small" title="Messages Sent" id="messages-sent-button">
|
||||
<span class="icon ml-4 mr-4"><i class="fa-regular fa-envelope"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Row with text and buttons -->
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<button class="button is-small" hx-get="/loadUsageKPI?month={{ DateID }}&offset=-1"
|
||||
hx-swap="outerHTML" hx-target="#usage-dropdown">
|
||||
<span class="icon"><i class="fa-solid fa-chevron-left"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<p>{{ Date }}</p>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<button class="button is-small" hx-get="/loadUsageKPI?month={{ DateID }}&offset=1"
|
||||
hx-swap="outerHTML" hx-target="#usage-dropdown">
|
||||
<span class="icon"><i class="fa-solid fa-chevron-right"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<!-- Placeholder for additional text -->
|
||||
<div class="content"
|
||||
id="usage-content"
|
||||
style="max-height: 30vh;
|
||||
overflow-y: auto">
|
||||
<table class="table is-narrow is-fullwidth is-striped"
|
||||
style="max-width: 200px">
|
||||
<tbody>
|
||||
{% for usage in usages %}
|
||||
<tr>
|
||||
<td>
|
||||
<small>{{ usage.Key.ModelID }}</small>
|
||||
</td>
|
||||
<td class="has-text-right totalCostCell">
|
||||
<small>{{ usage.TotalCost|floatformat:2 }}$</small>
|
||||
</td>
|
||||
<td class="has-text-right is-hidden totalCountCell">
|
||||
<small>{{ usage.TotalCount }}</small>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Total cost -->
|
||||
<div class="content totalCostCell">
|
||||
<p>
|
||||
<strong>Total:</strong>
|
||||
<span class="totalCost">{{ TotalCost|floatformat:2 }}$</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Total count -->
|
||||
<div class="content is-hidden totalCountCell">
|
||||
<p>
|
||||
<strong>Total:</strong>
|
||||
<span class="totalCount">{{ TotalCount }} messages</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Top buttons -->
|
||||
<div class="buttons has-addons is-centered">
|
||||
<button class="button is-small is-primary"
|
||||
title="Money Spent"
|
||||
id="money-spent-button">
|
||||
<span class="icon ml-4 mr-4"><i class="fa-regular fa-money-bill-1"></i></span>
|
||||
</button>
|
||||
<button class="button is-small"
|
||||
title="Messages Sent"
|
||||
id="messages-sent-button">
|
||||
<span class="icon ml-4 mr-4"><i class="fa-regular fa-envelope"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Row with text and buttons -->
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<button class="button is-small"
|
||||
hx-get="/loadUsageKPI?month={{ DateID }}&offset=-1"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#usage-dropdown">
|
||||
<span class="icon"><i class="fa-solid fa-chevron-left"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<p>{{ Date }}</p>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<button class="button is-small"
|
||||
hx-get="/loadUsageKPI?month={{ DateID }}&offset=1"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#usage-dropdown">
|
||||
<span class="icon"><i class="fa-solid fa-chevron-right"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -142,4 +153,4 @@
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user