Last active
April 28, 2019 20:14
-
-
Save bastien34/499760989d706b6b0c41d76bfe5505a4 to your computer and use it in GitHub Desktop.
Simple html table: one card + search tools
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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