Add new standard table style, improve UI for group management

This commit is contained in:
ErikKalkoken 2020-02-17 23:45:00 +01:00
parent 59855a71ef
commit 0f9927686b
7 changed files with 69 additions and 29 deletions

View File

@ -98,7 +98,7 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div style="height: 240px;overflow:-moz-scrollbars-vertical;overflow-y:auto;"> <div style="height: 240px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
<table class="table table-striped"> <table class="table table-aa">
{% for group in user.groups.all %} {% for group in user.groups.all %}
<tr> <tr>
<td>{{ group.name }}</td> <td>{{ group.name }}</td>
@ -118,7 +118,7 @@
</h3> </h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<table class="table table-striped hidden-xs"> <table class="table table-aa hidden-xs">
<thead> <thead>
<tr> <tr>
<th class="text-center"></th> <th class="text-center"></th>
@ -141,7 +141,7 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
<table class="table table-striped visible-xs-block" style="width: 100%"> <table class="table table-aa visible-xs-block" style="width: 100%">
<tbody> <tbody>
{% for ownership in request.user.character_ownerships.all %} {% for ownership in request.user.character_ownerships.all %}
{% with ownership.character as char %} {% with ownership.character as char %}

View File

@ -14,12 +14,9 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<p> <p>
<span class="pull-right"> <a class="btn btn-default" href="{% url 'groupmanagement:membership' %}" role="button">
&nbsp; Back
<a class="btn btn-default" href="{% url 'groupmanagement:membership' %}" role="button"> </a>
Back
</a>
</span>
</p> </p>
{% if entries %} {% if entries %}
<div class="table-responsive"> <div class="table-responsive">
@ -27,8 +24,8 @@
<thead> <thead>
<th class="text-center" scope="col">{% trans "Date/Time" %}</th> <th class="text-center" scope="col">{% trans "Date/Time" %}</th>
<th class="text-center" scope="col">{% trans "Requestor" %}</th> <th class="text-center" scope="col">{% trans "Requestor" %}</th>
<th class="text-center" scope="col">{% trans "Main Character" %}</th> <th class="text-center" scope="col">{% trans "Character" %}</th>
<th class="text-center" scope="col">{% trans "Group" %}</th> <th class="text-center" scope="col">{% trans "Corporation" %}</th>
<th class="text-center" scope="col">{% trans "Type" %}</th> <th class="text-center" scope="col">{% trans "Type" %}</th>
<th class="text-center" scope="col">{% trans "Action" %}</th> <th class="text-center" scope="col">{% trans "Action" %}</th>
<th class="text-center" scope="col">{% trans "Actor" %}</th> <th class="text-center" scope="col">{% trans "Actor" %}</th>
@ -39,7 +36,7 @@
<td class="text-center">{{ entry.date }}</td> <td class="text-center">{{ entry.date }}</td>
<td class="text-center">{{ entry.requestor }}</td> <td class="text-center">{{ entry.requestor }}</td>
<td class="text-center">{{ entry.req_char }}</td> <td class="text-center">{{ entry.req_char }}</td>
<td class="text-center">{{ entry.group }}</td> <td class="text-center">{{ entry.req_char.corporation_name }}</td>
<td class="text-center">{{ entry.type_to_str }}</td> <td class="text-center">{{ entry.type_to_str }}</td>
{% if entry.request_type is None %} {% if entry.request_type is None %}
<td class="text-center"> Removed</td> <td class="text-center"> Removed</td>
@ -55,10 +52,12 @@
All times displayed are EVE/UTC. All times displayed are EVE/UTC.
</p> </p>
</div> </div>
{% else %} {% else %}
<div class="alert alert-warning text-center"> <div class="clearfix"></div>
<br>
<div class="alert alert-warning text-center">
{% trans "No entries found for this group." %} {% trans "No entries found for this group." %}
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@ -67,6 +66,7 @@
{% block extra_javascript %} {% block extra_javascript %}
{% include 'bundles/datatables-js.html' %} {% include 'bundles/datatables-js.html' %}
<script type="text/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>
{% endblock %} {% endblock %}
{% block extra_css %} {% block extra_css %}
@ -75,7 +75,33 @@
{% block extra_script %} {% block extra_script %}
$(document).ready(function(){ $(document).ready(function(){
$('#log-entries').DataTable(); $('#log-entries').DataTable({
order: [[ 0, 'desc' ], [ 1, 'asc' ] ],
filterDropDown:
{
columns: [
{
idx: 1
},
{
idx: 2
},
{
idx: 3
},
{
idx: 4
},
{
idx: 5
},
{
idx: 6
}
],
bootstrap: true
},
});
}); });
{% endblock %} {% endblock %}

View File

@ -15,17 +15,14 @@
{{ group.name }} - {% trans 'Members' %} {{ group.name }} - {% trans 'Members' %}
</div> </div>
<div class="panel-body"> <div class="panel-body">
<p> <p>
<span class="pull-right"> <a class="btn btn-default" href="{% url 'groupmanagement:membership' %}" role="button">
&nbsp; Back
<a class="btn btn-default" href="{% url 'groupmanagement:membership' %}" role="button"> </a>
Back
</a>
</span>
</p> </p>
{% if group.user_set %} {% if group.user_set %}
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped" id="tab_group_members"> <table class="table table-aa" id="tab_group_members">
<thead> <thead>
<tr> <tr>
<th class="text-right">{% trans "Portrait" %}</th> <th class="text-right">{% trans "Portrait" %}</th>

View File

@ -16,7 +16,7 @@
<div class="panel-body"> <div class="panel-body">
{% if groups %} {% if groups %}
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-aa">
<thead> <thead>
<tr> <tr>
<th class="text-center">{% trans "Name" %}</th> <th class="text-center">{% trans "Name" %}</th>

View File

@ -9,7 +9,7 @@ url
<div class="col-lg-12"> <div class="col-lg-12">
<h1 class="page-header text-center">{% trans "Available Groups" %}</h1> <h1 class="page-header text-center">{% trans "Available Groups" %}</h1>
{% if groups %} {% if groups %}
<table class="table table-striped"> <table class="table table-aa">
<thead> <thead>
<tr> <tr>
<th class="text-center">{% trans "Name" %}</th> <th class="text-center">{% trans "Name" %}</th>

View File

@ -30,7 +30,7 @@
<div class="panel-body"> <div class="panel-body">
{% if acceptrequests %} {% if acceptrequests %}
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-aa">
<thead> <thead>
<tr> <tr>
<th class="text-center"></th> <th class="text-center"></th>
@ -89,7 +89,7 @@
<div class="panel-body"> <div class="panel-body">
{% if leaverequests %} {% if leaverequests %}
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-aa">
<thead> <thead>
<tr> <tr>
<th class="text-center"></th> <th class="text-center"></th>

View File

@ -43,12 +43,29 @@ ul.list-group.list-group-horizontal > li.list-group-item {
justify-content: center; justify-content: center;
} }
/* group headers within a table */ /* style group headers within a table */
.tr-group { .tr-group {
font-weight: bold; font-weight: bold;
background-color: #e6e6e6 !important; background-color: #e6e6e6 !important;
} }
/* default style for tables */
.table-aa > thead > tr > th{
border-bottom: 1px solid #f2f2f2;
}
.table-aa > thead > tr > th{
vertical-align: middle;
}
.table-aa > tbody > tr > td{
border-bottom: 1px solid #f2f2f2;
}
.table-aa > tbody > tr > td {
vertical-align: middle;
}
.table-aa > tbody > tr:last-child {
border-bottom: none;
}
/* Small devices (tablets, 768px and up) */ /* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { @media (min-width: 768px) {