Some more template improvements

- Better config icon.
- Renamed media to files (only for GUI).
- Add datatable function for motion and asssignemnt overview table. Removed old filter/sorting code.
- Some more template styling work.

openslides/assignment/templates/assignment/overview.html

@@ -1,9 +1,18 @@
 {% extends "base.html" %}
 
 {% load i18n %}
+{% load staticfiles %}
 
 {% block title %}{{ block.super }} – {% trans "Elections" %}{% endblock %}
 
+{% block header %}
+    <link href="{% static 'styles/dataTables/dataTables.bootstrap.css' %}" type="text/css" rel="stylesheet">
+{% endblock %}
+
+{% block javascript %}
+    <script src="{% static 'javascript/jquery.dataTables.min.js' %}" type="text/javascript"></script>
+    <script src="{% static 'javascript/dataTables.bootstrap.js' %}" type="text/javascript"></script>
+{% endblock %}
 
 {% block content %}
     <h1>{% trans "Elections" %}
@@ -17,37 +26,30 @@
         </small>
     </h1>
 
-    <form action="{{request.url}}" name="filter" method="get">
+    <table id="dataTable" class="table table-striped table-bordered">
-        {% trans "Filter" %}:
+    <thead>
-        <select class="span3" name="status" onchange="document.forms['filter'].submit()">
-            <option value="---">-- {% trans "Status" %}--</option>
-            <option value="sea" {% if 'sea' in request.GET.status %}selected{% endif %}>{% trans "Searching for candidates" %}</option>
-            <option value="vot" {% if 'vot' in request.GET.status %}selected{% endif %}>{% trans "Voting" %}</option>
-            <option value="fin" {% if 'fin' in request.GET.status %}selected{% endif %}>{% trans "Finished" %}</option>
-        </select>
-    </form>
-
-    <small><i>{{ assignments|length }}
-    {% blocktrans count counter=assignments|length %}election{% plural %}elections{% endblocktrans %}
-    </i></small>
-    <table class="table table-striped table-bordered">
         <tr>
-            <th><a href="?sort=name{% if 'name' in request.GET.sort and 'reverse' not in request.GET %}&reverse{%endif%}">{% trans "Election" %}</a></th>
+            <th>{% trans "Election" %}</th>
-            <th>{% trans "Candidates" %}</th>
+            <th class="optional">{% trans "Candidates" %}</th>
-            <th class="optional"><a href="?sort=status{% if 'status' in request.GET.sort and 'reverse' not in request.GET %}&reverse{%endif%}">{% trans "Status" %}</a></th>
+            <th>{% trans "Status" %}</th>
             <th class="mini_width">{% trans "Actions" %}</th>
         </tr>
+    </thead>
     {% for assignment in assignments %}
         <tr {% if assignment.active %}activeline{% endif %}>
             <td><a href="{% url 'assignment_view' assignment.id %}">{{ assignment }}</a></td>
-            <td>
+            <td  class="optional">
-                {% blocktrans with posts=assignment.posts context "Number of searched candidates for an election"%}posts: {{ posts }}{% endblocktrans %}
+                <!-- posts -->
+                {% trans "Posts" context "Number of searched candidates for an election" %}:
+                <span class="badge badge-info">{{ assignment.posts }}</span>
+                <!-- candidates -->
                 {% if assignment.status != 'fin' %}
-                    | {% blocktrans with candidates=assignment.get_participants|length %}candidates: {{ candidates }}{% endblocktrans %}
+                    | {% trans "Candidates" %}: <span class="badge badge-warning">{{ assignment.get_participants|length }}</span>
                 {% endif %}
-                | {% blocktrans with elected=assignment.elected|length %}elected: {{ elected }}{% endblocktrans %}
+                <!-- elected candidates -->
+                | {% trans "Elected" %}: <span class="badge badge-success">{{ assignment.elected|length }}</span>
             </td>
-            <td class="optional">{{ assignment.get_status_display }}</td>
+            <td><span class="label label-info">{{ assignment.get_status_display }}</status></td>
             <td>
                 <span style="width: 1px; white-space: nowrap;">
                 {% if perms.projector.can_manage_projector %}
@@ -69,10 +71,6 @@
                 </span>
             </td>
         </tr>
-    {% empty %}
-        <tr>
-            <td colspan="4"><i>{% trans "No assignments available." %}</i></td>
-        </tr>
     {% endfor %}
     </table>
 {% endblock %}

openslides/assignment/views.py

@@ -42,19 +42,7 @@ from openslides.assignment.forms import AssignmentForm, AssignmentRunForm
 @permission_required('assignment.can_see_assignment')
 @template('assignment/overview.html')
 def get_overview(request):
-    query = Assignment.objects
+    assignments = Assignment.objects.all()
-    if 'status' in request.GET and '---' not in request.GET['status']:
-        query = query.filter(status__iexact=request.GET['status'])
-    try:
-        sort = request.GET['sort']
-        if sort in ['name', 'status']:
-            query = query.order_by(sort)
-    except KeyError:
-        pass
-    if 'reverse' in request.GET:
-        query = query.reverse()
-
-    assignments = query.all()
     return {
         'assignments': assignments,
     }

openslides/mediafile/templates/mediafile/mediafile_form.html

@@ -5,18 +5,18 @@
 {% block title %}
     {{ block.super }} –
     {% if mediafile %}
-        {% trans "Edit media" %}
+        {% trans "Edit file" %}
     {% else %}
-        {% trans "New media" %}
+        {% trans "New file" %}
     {% endif %}
 {% endblock %}
 
 {% block content %}
     <h1>
         {% if mediafile %}
-            {% trans "Edit media" %}
+            {% trans "Edit file" %}
         {% else %}
-            {% trans "New media" %}
+            {% trans "New file" %}
         {% endif %}
         <small class="pull-right">
         <a href="{% url 'mediafile_list' %}" class="btn btn-mini"><i class="icon-chevron-left"></i> {% trans "Back to overview" %}</a>

openslides/mediafile/templates/mediafile/mediafile_list.html

@@ -3,13 +3,13 @@
 {% load i18n %}
 {% load tags %}
 
-{% block title %}{{ block.super }} – {% trans 'Media' %}{% endblock %}
+{% block title %}{{ block.super }} – {% trans 'Files' %}{% endblock %}
 
 {% block content %}
-    <h1>{% trans 'Media' %}
+    <h1>{% trans 'Files' %}
         <small class="pull-right">
         {% if perms.mediafile.can_upload %}
-            <a href="{% url 'mediafile_create' %}" class="btn btn-mini btn-primary" rel="tooltip" data-original-title="{% trans 'New media' %}"><i class="icon-plus icon-white"></i> {% trans "New" %}</a>
+            <a href="{% url 'mediafile_create' %}" class="btn btn-mini btn-primary" rel="tooltip" data-original-title="{% trans 'New file' %}"><i class="icon-plus icon-white"></i> {% trans "New" %}</a>
         {% endif %}
         </small>
     </h1>
@@ -42,7 +42,7 @@
         </tr>
         {% empty %}
         <tr>
-            <td colspan="6"><i>{% trans 'No media available.' %}</i></td>
+            <td colspan="6"><i>{% trans 'No files available.' %}</i></td>
         </tr>
         {% endfor %}
     </table>

openslides/mediafile/views.py

@@ -98,7 +98,7 @@ def register_tab(request):
     """
     selected = request.path.startswith('/mediafile/')
     return Tab(
-        title=_('Media'),
+        title=_('Files'),
         app='mediafile',  # TODO: Rename this to icon='mediafile' later
         stylefile='styles/mediafile.css',
         url=reverse('mediafile_list'),

openslides/motion/templates/motion/motion_detail.html

@@ -170,7 +170,7 @@
         {% endfor %}
 
         <!-- Supporters -->
-        {% if min_supporters > 0 %}
+        {% if 'motion_min_supporters'|get_config > 0 %}
             <h5>{% trans "Supporters" %}: *</h5>
             {% if not motion.supporters %}
                 -
@@ -187,7 +187,7 @@
         <h5>{% trans "Status" %}:</h5>
         {% if motion.state_id != "pub" %}
             {# TODO: trans motion.state #}
-            <span class="label label-info">{{ motion.state }}</span>
+            <span class="label label-info">{% trans motion.state.name %}</span>
             <br>
         {% endif %}
 
@@ -220,6 +220,8 @@
                     {% endif %}
                 </li>
             {% endif %}
+        {% empty %}
+        <span style="margin-left:-25px;">-</span>
         {% endfor %}
         </ol>
         {% if allowed_actions.create_poll %}
@@ -234,15 +236,23 @@
         {% if motion.category %}
             {{ motion.category }}
         {% else %}
-            <i>{% trans 'No category' %}</i>
+            -
         {% endif %}
 
         <!-- Creation Time -->
-        <h5>{% trans "Creation Time" %}:</h5>
+        <h5>
-        {# TODO: use creation time of _first_ version #}
+            {% with versions=motion.versions.all %}
+            {% if versions|length > 1 %}
+                {% trans "Last changes (of this version)" %}:
+            {% else %}
+                {% trans "Last changes" %}:
+            {% endif %}
+            {% endwith %}
+        </h5>
         {{ motion.version.creation_time }}
 
         <!-- Widthdraw button -->
+        {# TODO: Check this button #}
         {% if  allowed_actions.wit and user in motion.submitters %}
             <br><br>
             <a href="{% url 'motion_set_state' motion.id 'wit' %}" class="btn">
@@ -251,7 +261,7 @@
         {% endif %}
 
         <!-- Support/Unsupport button -->
-        {% if perms.motion.can_support_motion and min_supporters > 0 %}
+        {% if perms.motion.can_support_motion and 'motion_min_supporters'|get_config > 0 %}
             {% if allowed_actions.unsupport %}
                 <br><br>
                 <a href="{% url 'motion_unsupport' motion.id %}" class="btn">
@@ -267,9 +277,9 @@
         {% endif %}
 
         <!-- Footnote: requried supporters -->
-        {% if min_supporters > 0 %}
+        {% if 'motion_min_supporters'|get_config > 0 %}
             <br><br>
-            <small>* {% trans "minimum required supporters" %}: {{ min_supporters }}</small>
+            <small>* {% trans "minimum required supporters" %}: {{ 'motion_min_supporters'|get_config }}</small>
         {% endif %}
     </div> <!--/well-->
 
@@ -279,13 +289,13 @@
     <h4>{% trans "Manage motion" %}</h4>
         <div class="btn-group btn-group-vertical">
         {% for state in motion.state.next_states.all %}
-            <a href="{% url 'motion_set_state' motion.pk state.pk %}" class="btn btn-small">{{ state }}</a>
+            <a href="{% url 'motion_set_state' motion.pk state.pk %}" class="btn btn-small">{% trans state.name %}</a>
         {% endfor %}
         </div>
     <p></p>
     <hr>
     <h5>{% trans "For administration only:" %}</h5>
-    <a href="{% url 'motion_reset_state' motion.id %}" class="btn btn-danger">
+    <a href="{% url 'motion_reset_state' motion.id %}" class="btn btn-mini btn-danger">
         <i class="icon-exclamation-sign icon-white"></i> {% trans 'Reset state' %}
     </a>
     </div> <!--/well-->

openslides/motion/templates/motion/motion_diff.html

@@ -34,11 +34,11 @@
 <table class="table table-striped table-bordered">
 <tr>
     <td><b>{% trans "Version" %} {{ version_rev1.version_number }}</b><br>
-        {% trans "created" %}: {{ version_rev1.creation_time }}<br>
+        {% trans "Last changes" %}: {{ version_rev1.creation_time }}<br>
         <h4>{{ version_rev1.title }}</h4>
     </td>
     <td><b>{% trans "Version" %} {{ version_rev2.version_number }}</b><br>
-        {% trans "created" %}: {{ version_rev1.creation_time }}<br>
+        {% trans "Last changes" %}: {{ version_rev1.creation_time }}<br>
         <h4>{{ version_rev2.title }}</h4>
     </td>
 </tr>

openslides/motion/templates/motion/motion_list.html

@@ -2,9 +2,19 @@
 
 {% load tags %}
 {% load i18n %}
+{% load staticfiles %}
 
 {% block title %}{{ block.super }} – {% trans "Motions" %}{% endblock %}
 
+{% block header %}
+    <link href="{% static 'styles/dataTables/dataTables.bootstrap.css' %}" type="text/css" rel="stylesheet">
+{% endblock %}
+
+{% block javascript %}
+    <script src="{% static 'javascript/jquery.dataTables.min.js' %}" type="text/javascript"></script>
+    <script src="{% static 'javascript/dataTables.bootstrap.js' %}" type="text/javascript"></script>
+{% endblock %}
+
 {% block content %}
     <h1>
         {% trans "Motions" %}
@@ -22,66 +32,45 @@
         </small>
     </h1>
 
-{% comment %}
+    <table id="dataTable" class="table table-striped table-bordered">
-    TODO: remove this filter and add client side filtering with DataTables
+    <thead>
-    <form action="{{ request.url }}" name="filter" method="get" class="form-inline">
-        {% if min_supporters > 0 %}
-        <label class="checkbox">
-        <input type="checkbox" name="needsup" onchange="document.forms['filter'].submit()"
-            {% if 'on' in request.GET.needsup %}checked{% endif %}> {% trans "Need supporters" %} &nbsp;
-        </label>
-        {% endif %}
-        <label class="checkbox">
-        <input type="checkbox" name="number" onchange="document.forms['filter'].submit()"
-            {% if 'on' in request.GET.number %}checked{% endif %}> {% trans "Without number" %} &nbsp;
-        </label>
-        <label class="checkbox">
-        <input type="checkbox" name="status" onchange="document.forms['filter'].submit()"
-            {% if 'on' in request.GET.status %}checked{% endif %}> {% trans "Status" %}:
-        </label>
-        <select class="default-input" name="statusvalue" onchange="{% if 'on' in request.GET.status %}document.forms['filter'].submit(){% endif %}">
-            <option value="pub" {% if 'pub' in request.GET.statusvalue %}selected{% endif %}>{% trans "Not yet authorized" %}</option>
-            <option value="per" {% if 'on' in request.GET.status and 'per' in request.GET.statusvalue %}selected{% endif %}>{% trans "Authorized" %}</option>
-            <option value="acc" {% if 'on' in request.GET.status and 'acc' in request.GET.statusvalue %}selected{% endif %}>{% trans "Accepted" %}</option>
-            <option value="rej" {% if 'on' in request.GET.status and 'rej' in request.GET.statusvalue %}selected{% endif %}>{% trans "Rejected" %}</option>
-            <option value="wit" {% if 'on' in request.GET.status and 'wit' in request.GET.statusvalue %}selected{% endif %}>{% trans "Withdrawen (by submitter)" %}</option>
-            <option value="rev" {% if 'rev' in request.GET.statusvalue %}selected{% endif %}>{% trans "Needs Review" %}</option>
-        </select>
-    </form>
-{% endcomment %}
-
-    <small><i>{{ motion_list|length }}
-    {% blocktrans count counter=motion_list|length context "number of motions"%}motion{% plural %}motions{% endblocktrans %}
-    </i></small>
-    <table class="table table-striped table-bordered">
         <tr>
-            <th><a href="?sort=number{% if 'number' in request.GET.sort and 'reverse' not in request.GET %}&reverse{%endif%}">{% trans "#" %}</a></th>
+            <th>{% trans "#" %}</th>
-            <th><a href="?sort=title{% if 'title' in request.GET.sort and 'reverse' not in request.GET %}&reverse{%endif%}">{% trans "Motion title" %}</a></th>
+            <th>{% trans "Motion title" %}</th>
             <th class="optional">{% trans 'Category' %}</th>
-            {% if min_supporters > 0 %}
+            <th>{% trans "Status" %}</th>
-            <th class="optional"><a href="?sort=supporter{% if 'supporter' in request.GET.sort and 'reverse' not in request.GET %}&reverse{%endif%}">{% trans "Number of supporters" %}</a></th>
+            <th class="optional">{% trans "Submitter" %}</th>
+            {% if 'motion_min_supporters'|get_config > 0 %}
+                <th class="optional">{% trans "Supporters" %}</th>
             {% endif %}
-            <th class="optional"><a href="?sort=status{% if 'status' in request.GET.sort and 'reverse' not in request.GET %}&reverse{%endif%}">{% trans "Status" %}</a></th>
+            <th class="optional">{% trans "Last changes" %}</th>
-            <th class="optional"><a href="?sort=submitter{% if 'submitter' in request.GET.sort and 'reverse' not in request.GET %}&reverse{%endif%}">{% trans "Submitter" %}</a></th>
-            <th class="optional"><a href="?sort=time{% if 'time' in request.GET.sort and 'reverse' not in request.GET %}&reverse{%endif%}">{% trans "Creation Time" %}<a></th>
             <th class="mini_width">{% trans "Actions" %}</th>
         </tr>
+    </thead>
     {% for motion in motion_list %}
         <tr class="{% if motion.active %}activeline{% endif %}">
-            <td>{{ motion.identifier|default:'' }}</td>
+            <td class="nobr">{{ motion.identifier|default:'' }}</td>
             <td><a href="{% model_url motion %}">{{ motion.title }}</a></td>
-            <td class="optional">{% if motion.category %}{{ motion.category }}{% else %}<i>{% trans 'No category' %}</i>{% endif %}</td>
+            <td class="optional">{% if motion.category %}{{ motion.category }}{% else %}-{% endif %}</td>
-        {% if min_supporters > 0 %}
+            <td><span class="label label-info">{% trans motion.state.name %}</span></td>
-            <td class="optional">{# motion.count_supporters #}</td>
-        {% endif %}
-            <td class="optional"><span class="label label-info">{% trans motion.state.name %}</span></td>
             <td class="optional">
                 {% for submitter in motion.submitter.all %}
                     {{ submitter.person }}{% if not forloop.last %}, {% endif %}
                 {% endfor %}
             </td>
-            {# TODO: user creation_time of _first_ version #}
+            {% if 'motion_min_supporters'|get_config > 0 %}
-            <td class="optional">{{ motion.version.creation_time }}</td>
+                {% with supporters=motion.supporters|length %}
+                    <td class="optional">
+                    {% if supporters >= 'motion_min_supporters'|get_config %}
+                        <a class="badge badge-success"  rel="tooltip" data-original-title="{% trans 'Enough supporters' %}">{{ supporters }}</a>
+                    {% endif %}
+                    {% if supporters < 'motion_min_supporters'|get_config %}
+                        <a class="badge badge-warning" rel="tooltip" data-original-title="{% trans 'Needs supporters' %}">{{ supporters }}</a>
+                    {% endif %}
+                    </td>
+                {% endwith %}
+            {% endif %}
+            <td class="optional">{{ motion.last_version.creation_time }}</td>
             <td>
                 <span style="width: 1px; white-space: nowrap;">
                 {% if perms.projector.can_manage_projector %}
@@ -103,10 +92,6 @@
                 </span>
             </td>
         </tr>
-    {% empty %}
-        <tr>
-        <td colspan="7"><i>{% trans "No motions available." %}</i></td>
-        </tr>
     {% endfor %}
     </table>
 {% endblock %}

openslides/motion/views.py

@@ -79,7 +79,6 @@ class MotionDetailView(GetVersionMixin, DetailView):
         """
         context = super(MotionDetailView, self).get_context_data(**kwargs)
         context['allowed_actions'] = self.object.get_allowed_actions(self.request.user)
-        context['min_supporters'] = int(config['motion_min_supporters'])
         return context
 
 motion_detail = MotionDetailView.as_view()

openslides/participant/templates/participant/overview.html

@@ -52,7 +52,7 @@
         </small>
     </h1>
 
-    <table id="dataTableParticipants" class="table table-striped table-bordered" cellpadding="0" cellspacing="0" border="0">
+    <table id="dataTable" class="table table-striped table-bordered" cellpadding="0" cellspacing="0" border="0">
     <thead>
         <tr>
             <th>{% trans "Present" %}</th>
@@ -125,10 +125,6 @@
                     </td>
                 {% endif %}
             </tr>
-        {% empty %}
-            <tr>
-                <td colspan="9"><i>{% trans "No participants available." %}</i></td>
-            </tr>
         {% endfor %}
     </tbody>
     </table>

openslides/static/javascript/dataTables.bootstrap.js

@@ -10,23 +10,25 @@
  
 /* Table initialisation */
 $(document).ready(function() {
-    $('#dataTableParticipants').dataTable( {
+    $('#dataTable').dataTable( {
         "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
         "aoColumnDefs": [
           { "bSortable": false, "aTargets": [ -1 ] }
         ],
         "oLanguage": {
-            "sLengthMenu": gettext("_MENU_ participants per page"),
+            "sLengthMenu": gettext("_MENU_ entries per page"),
             "sSearch": gettext("Search:"),
-            "sInfo": gettext("Showing _START_ to _END_ of _TOTAL_ participants"),
+            "sInfo": gettext("Showing _START_ to _END_ of _TOTAL_ entries"),
             "sInfoEmpty": gettext("Showing 0 participants"),
             "sInfoFiltered": gettext("(filtered from _MAX_ total entries)"),
             "sZeroRecords": gettext("No matching records found"),
+            "oPaginate": {
                 "sFirst": gettext("First"),
                 "sLast": gettext("Last"),
                 "sNext": gettext("Next"),
                 "sPrevious": gettext("Previous"),
             }
+        }
     } );
 } );
 

openslides/static/styles/base.css

@@ -289,7 +289,7 @@ legend + .control-group {
     background-position: -168px 0;
 }
 .icon-config {
-    background-position: -360px -144px;
+    background-position: -432px 0px;
 }
 .icon-welcome {
     background-position: 0 -24px;