Skip to content

Instantly share code, notes, and snippets.

@bastien34

bastien34/simple_card_table.html

Last active April 28, 2019 20:14
Show Gist options
  • Save bastien34/499760989d706b6b0c41d76bfe5505a4 to your computer and use it in GitHub Desktop.
Save bastien34/499760989d706b6b0c41d76bfe5505a4 to your computer and use it in GitHub Desktop.
Download ZIP
Simple html table: one card + search tools
Raw
simple_card_table.html
<!-- Main card -->
<div class="card card-default">
<!-- Header card-->
<div class="card card-header">
<h2>{{ card_title }}</h2>
<p class="lead text-justify">
{{ card_description }}
</p>
<!-- Search bar & tools -->
<div class="pt-3">
<div class="d-flex">
<form action="" method="GET">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search" name="q">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">{% trans "Search" %}</button></div>
</div>
<span class="form-text">{% blocktrans %}help_text{% endblocktrans %}</span>
</form>
<div class="ml-auto">
<div class="input-group float-right">
<a class="btn btn-sm btn-secondary" href="{% url "{{ add_view_url }}" %}"><i class="fa fa-plus-circle"></i> {% trans "Add" %}</a>
</div>
</div>
</div>
</div>
</div>
<!-- Body card -->
<div class="card card-body">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{% for object in object_list %}
<tr data-url="{% url "update-url" pk=object.pk %}">
<td>{{ object }}</td>
<td>{{ object}}</td>
<td>{{ object }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Card footer -->
<div class="card-footer">
<div class="row px-1">
<form action="" method="post" class="">
{% csrf_token %}
<input type="submit" action="" class="btn btn-secondary btn-pill-right"{% if object.status in DISABLED %} disabled="disabled"{% endif %} name="decline" value="{% trans "Decline" %}">
<input type="submit" action="" class="btn btn-success btn-pill-right"{% if object.status in DISABLED %} disabled="disabled"{% endif %} name="invite" value="{% trans "Invite" %}">
<button type="button" class="btn btn-secondary btn-pill-right"{% if object.status in DISABLED %} disabled="disabled"{% endif %} data-toggle="modal" data-target="#myModal">{% trans "Add note" %}</button>
</form>
<!-- Dropdown force status -->
<div class="ml-auto">
<div class="btn-group float-right">
<form action="" method="post" class="form-inline">
{% csrf_token %}
<select class="custom-select" id="input_select_status" name="new_status">
<option value="">{{ status }}</option>
{% for code, name in object.STATUS %}
<option value="{{ code }}">{{ name | capfirst }}</option>
{% endfor %}
</select>
<div class="input-group-append"><button class="btn btn-secondary" type="submit">{% trans "Go" %}</button></div>
</form>
</div>
</div>
</div>
<span class="form-text">{% blocktrans %}Inviting will send an E-mail to {{ object }}.{% endblocktrans %}</span>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment