heroweb/poc/webcomponents0/tasks/templates/task_overview.html

40 lines
2.2 KiB
HTML
Raw Normal View History

2024-09-01 18:00:13 +00:00
<div class="">
<section class="section">
<div class="container">
<div class="box px-0">
<div class="px-5 pb-4 is-flex is-justify-content-space-between is-align-items-center" style="border-bottom: 1px solid #E1E4E8;">
<h5 class="title is-size-4 mb-0">Task overview</h5>
<div class="select is-small is-white">
<select aria-label="select example" class="has-text-white has-background-primary" name="name">
<option value="1">Change</option>
<option value="2">Sort</option>
<option value="3">Add</option>
</select>
</div>
</div>
<div class="px-5 pt-4">
<div class="mb-3 is-flex is-justify-content-space-between">
<h4 class="is-size-7 has-text-grey has-text-weight-medium">Task Name</h4>
<h4 class="is-size-7 has-text-grey has-text-weight-medium">Action</h4>
</div>
{% for task in task_list_html.tasks %}
<div class="is-flex p-3 is-align-items-center {% if task.is_highlighted %}has-background-primary-light{% endif %} is-rounded" style="background-color: {{ task.background_color }};">
<span class="mr-3 is-inline-flex is-justify-content-center is-align-items-center is-rounded" style="width: 32px; height: 32px; background-color: {{ task.icon_color }};">
{{ deduper.svg_get(task.icon_svg) | safe }}
</span>
<div>
<p class="is-size-7 has-text-weight-medium">{{ task.name }}</p>
<p class="is-size-7 has-text-grey">{{ task.category }}</p>
</div>
<button class="button is-ghost p-0 ml-auto">
{{ deduper.svg_get(task.action_svg) | safe }}
</button>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
</div>