From 7ae7da5af11bb5036819831231e16f195258abd7 Mon Sep 17 00:00:00 2001
From: Raphael Michel <mail@raphaelmichel.de>
Date: Sat, 7 May 2016 14:29:00 +0200
Subject: [PATCH] Improved list views to look better when they are empty

---
 .../pretixcontrol/attendees/index.html        | 64 +++++++++----
 .../pretixcontrol/items/categories.html       | 65 +++++++++----
 .../templates/pretixcontrol/items/index.html  | 69 ++++++++------
 .../pretixcontrol/items/questions.html        | 62 ++++++++----
 .../templates/pretixcontrol/items/quotas.html | 79 ++++++++++-----
 .../templates/pretixcontrol/orders/index.html | 66 ++++++++-----
 .../pretixcontrol/vouchers/index.html         | 95 +++++++++++--------
 src/static/pretixcontrol/scss/main.scss       |  9 ++
 8 files changed, 334 insertions(+), 175 deletions(-)

diff --git a/src/pretix/control/templates/pretixcontrol/attendees/index.html b/src/pretix/control/templates/pretixcontrol/attendees/index.html
index 93c33fe98f..b4854ba880 100644
--- a/src/pretix/control/templates/pretixcontrol/attendees/index.html
+++ b/src/pretix/control/templates/pretixcontrol/attendees/index.html
@@ -1,9 +1,30 @@
 {% extends "pretixcontrol/event/base.html" %}
 {% load i18n %}
+{% load eventurl %}
 {% block title %}{% trans "Attendees" %}{% endblock %}
 {% block content %}
-	<h1>{% trans "Attendees" %}</h1>
-    <p>
+    <h1>{% trans "Attendees" %}</h1>
+    {% if attendees|length == 0 %}
+        <div class="empty-collection">
+            <p>
+                {% blocktrans trimmed %}
+                    Nobody ordered a ticket yet.
+                {% endblocktrans %}
+            </p>
+
+            {% if not request.event.live %}
+                <a href="{% url "control:event.live" event=request.event.slug organizer=request.event.organizer.slug %}"
+                        class="btn btn-primary btn-lg">
+                    {% trans "Take your shop live" %}
+                </a>
+            {% else %}
+                <a href="{% eventurl request.event "presale:event.index" %}" class="btn btn-primary btn-lg">
+                    {% trans "Go to the ticket shop" %}
+                </a>
+            {% endif %}
+        </div>
+    {% else %}
+        <p>
         <form class="form-inline helper-display-inline" action="" method="get">
             <select name="status" class="form-control">
                 <option value="">{% trans "All attendees" %}</option>
@@ -24,10 +45,10 @@
             </select>
             <button class="btn btn-primary" type="submit">{% trans "Filter" %}</button>
         </form>
-    </p>
-    <div class="table-responsive">
-        <table class="table table-condensed table-hover">
-            <thead>
+        </p>
+        <div class="table-responsive">
+            <table class="table table-condensed table-hover">
+                <thead>
                 <tr>
                     <th>{% trans "Order code" %}</th>
                     <th>{% trans "Product" %}</th>
@@ -35,21 +56,22 @@
                     <th>{% trans "Order date" %}</th>
                     <th>{% trans "Status" %}</th>
                 </tr>
-            </thead>
-            <tbody>
+                </thead>
+                <tbody>
                 {% for a in attendees %}
-                <tr>
-                    <td><strong><a
-                            href="{% url "control:event.order" event=request.event.slug organizer=request.event.organizer.slug code=a.order.code%}"
-                            >{{ a.order.code }}</a></strong></td>
-                    <td>{{ a.item.name }}</td>
-                    <td>{{ a.attendee_name|default:"" }}</td>
-                    <td>{{ a.order.datetime|date:"SHORT_DATETIME_FORMAT" }}</td>
-                    <td>{% include "pretixcontrol/orders/fragment_order_status.html" with order=a.order %}</td>
-                </tr>
+                    <tr>
+                        <td><strong><a
+                                href="{% url "control:event.order" event=request.event.slug organizer=request.event.organizer.slug code=a.order.code %}"
+                        >{{ a.order.code }}</a></strong></td>
+                        <td>{{ a.item.name }}</td>
+                        <td>{{ a.attendee_name|default:"" }}</td>
+                        <td>{{ a.order.datetime|date:"SHORT_DATETIME_FORMAT" }}</td>
+                        <td>{% include "pretixcontrol/orders/fragment_order_status.html" with order=a.order %}</td>
+                    </tr>
                 {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% include "pretixcontrol/pagination.html" %}
+                </tbody>
+            </table>
+        </div>
+        {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}
diff --git a/src/pretix/control/templates/pretixcontrol/items/categories.html b/src/pretix/control/templates/pretixcontrol/items/categories.html
index d195c1306f..bbcdc93e80 100644
--- a/src/pretix/control/templates/pretixcontrol/items/categories.html
+++ b/src/pretix/control/templates/pretixcontrol/items/categories.html
@@ -2,32 +2,55 @@
 {% load i18n %}
 {% block title %}{% trans "Product categories" %}{% endblock %}
 {% block inside %}
-	<h1>{% trans "Product categories" %}</h1>
-	<p>
-		<a href="{% url "control:event.items.categories.add" organizer=request.event.organizer.slug event=request.event.slug %}" class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create new category" %}</a>
-	</p>
-    <div class="table-responsive">
-        <table class="table table-hover">
-            <thead>
+    <h1>{% trans "Product categories" %}</h1>
+    <p>
+        {% blocktrans trimmed %}
+            You can use categories to group multiple products together in an organized way.
+        {% endblocktrans %}
+    </p>
+    {% if categories|length == 0 %}
+        <div class="empty-collection">
+            <p>
+                {% blocktrans trimmed %}
+                    You haven't created any categories yet.
+                {% endblocktrans %}
+            </p>
+
+            <a href="{% url "control:event.items.categories.add" organizer=request.event.organizer.slug event=request.event.slug %}"
+                    class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> {% trans "Create a new category" %}</a>
+        </div>
+    {% else %}
+        <p>
+            <a href="{% url "control:event.items.categories.add" organizer=request.event.organizer.slug event=request.event.slug %}" class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create a new category" %}
+            </a>
+        </p>
+        <div class="table-responsive">
+            <table class="table table-hover">
+                <thead>
                 <tr>
                     <th>{% trans "Product categories" %}</th>
                     <th></th>
                     <th></th>
                 </tr>
-            </thead>
-            <tbody>
+                </thead>
+                <tbody>
                 {% for c in categories %}
-                <tr>
-                    <td><strong><a href="{% url "control:event.items.categories.edit" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}">{{ c.name }}</a></strong></td>
-                    <td>
-                        <a href="{% url "control:event.items.categories.up" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm {% if forloop.counter0 == 0 %}disabled{% endif %}"><i class="fa fa-arrow-up"></i></a>
-                        <a href="{% url "control:event.items.categories.down" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm {% if forloop.revcounter0 == 0 %}disabled{% endif %}"><i class="fa fa-arrow-down"></i></a>
-                    </td>
-                    <td class="text-right"><a href="{% url "control:event.items.categories.delete" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a></td>
-                </tr>
+                    <tr>
+                        <td>
+                            <strong><a href="{% url "control:event.items.categories.edit" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}">{{ c.name }}</a></strong>
+                        </td>
+                        <td>
+                            <a href="{% url "control:event.items.categories.up" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm {% if forloop.counter0 == 0 %}disabled{% endif %}"><i class="fa fa-arrow-up"></i></a>
+                            <a href="{% url "control:event.items.categories.down" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm {% if forloop.revcounter0 == 0 %}disabled{% endif %}"><i class="fa fa-arrow-down"></i></a>
+                        </td>
+                        <td class="text-right">
+                            <a href="{% url "control:event.items.categories.delete" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
+                        </td>
+                    </tr>
                 {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% include "pretixcontrol/pagination.html" %}
+                </tbody>
+            </table>
+        </div>
+        {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}
diff --git a/src/pretix/control/templates/pretixcontrol/items/index.html b/src/pretix/control/templates/pretixcontrol/items/index.html
index 8438040b5b..ad82bda197 100644
--- a/src/pretix/control/templates/pretixcontrol/items/index.html
+++ b/src/pretix/control/templates/pretixcontrol/items/index.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 {% block title %}{% trans "Products" %}{% endblock %}
 {% block inside %}
-	<h1>{% trans "Products" %}</h1>
+    <h1>{% trans "Products" %}</h1>
     <p>
         {% blocktrans trimmed %}
             Below, you find a list of all available products. You can click on a product name to inspect and change
@@ -10,42 +10,57 @@
             give category.
         {% endblocktrans %}
     </p>
-    <p>
-        <a href="{% url "control:event.items.add" organizer=request.event.organizer.slug event=request.event.slug %}"
-                class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create new product" %}</a>
-    </p>
-    <div class="table-responsive">
-        <table class="table table-condensed table-hover">
-            <thead>
+    {% if items|length == 0 %}
+        <div class="empty-collection">
+            <p>
+                {% blocktrans trimmed %}
+                    You haven't created any products yet.
+                {% endblocktrans %}
+            </p>
+
+            <a href="{% url "control:event.items.add" organizer=request.event.organizer.slug event=request.event.slug %}"
+                    class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> {% trans "Create a new product" %}</a>
+        </div>
+    {% else %}
+        <p>
+            <a href="{% url "control:event.items.add" organizer=request.event.organizer.slug event=request.event.slug %}"
+                    class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create a new product" %}</a>
+        </p>
+        <div class="table-responsive">
+            <table class="table table-condensed table-hover">
+                <thead>
                 <tr>
                     <th>{% trans "Product name" %}</th>
                     <th>{% trans "Category" %}</th>
                     <th></th>
                     <th></th>
                 </tr>
-            </thead>
-            <tbody>
+                </thead>
+                <tbody>
                 {% regroup items by category as cat_list %}
                 {% for c in cat_list %}
                     {% for i in c.list %}
-                    <tr>
-                        <td><strong>
-                            {% if not i.active %}<strike>{% endif %}
-                            <a href="
+                        <tr>
+                            <td><strong>
+                                {% if not i.active %}<strike>{% endif %}
+                                <a href="
                         {% url "control:event.item" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}">{{ i.name }}</a>
-                            {% if not i.active %}</strike>{% endif %}
-                        </strong></td>
-                        <td>{% if i.category %}{{ i.category.name }}{% endif %}</td>
-                        <td>
-                            <a href="{% url "control:event.items.up" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm {% if forloop.counter0 == 0 %}disabled{% endif %}"><i class="fa fa-arrow-up"></i></a>
-                            <a href="{% url "control:event.items.down" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm {% if forloop.revcounter0 == 0 %}disabled{% endif %}"><i class="fa fa-arrow-down"></i></a>
-                        </td>
-                        <td class="text-right"><a href="{% url "control:event.items.delete" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a></td>
-                    </tr>
+                                {% if not i.active %}</strike>{% endif %}
+                            </strong></td>
+                            <td>{% if i.category %}{{ i.category.name }}{% endif %}</td>
+                            <td>
+                                <a href="{% url "control:event.items.up" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm {% if forloop.counter0 == 0 %}disabled{% endif %}"><i class="fa fa-arrow-up"></i></a>
+                                <a href="{% url "control:event.items.down" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm {% if forloop.revcounter0 == 0 %}disabled{% endif %}"><i class="fa fa-arrow-down"></i></a>
+                            </td>
+                            <td class="text-right">
+                                <a href="{% url "control:event.items.delete" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
+                            </td>
+                        </tr>
                     {% endfor %}
                 {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% include "pretixcontrol/pagination.html" %}
+                </tbody>
+            </table>
+        </div>
+        {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}
diff --git a/src/pretix/control/templates/pretixcontrol/items/questions.html b/src/pretix/control/templates/pretixcontrol/items/questions.html
index 34e0b6dd47..73fef28638 100644
--- a/src/pretix/control/templates/pretixcontrol/items/questions.html
+++ b/src/pretix/control/templates/pretixcontrol/items/questions.html
@@ -2,31 +2,53 @@
 {% load i18n %}
 {% block title %}{% trans "Questions" %}{% endblock %}
 {% block inside %}
-	<h1>{% trans "Questions" %}</h1>
-	<p>
-		<a href="{% url "control:event.items.questions.add" organizer=request.event.organizer.slug event=request.event.slug %}" class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create new question" %}</a>
-	</p>
-    <div class="table-responsive">
-        <table class="table table-hover">
-            <thead>
+    <h1>{% trans "Questions" %}</h1>
+    <p>
+        {% blocktrans trimmed %}
+            Questions allow your attendees to fill in additional data about their ticket. If you provide food, one
+            example might be to ask your users about dietary requirements.
+        {% endblocktrans %}
+    </p>
+    {% if questions|length == 0 %}
+        <div class="empty-collection">
+            <p>
+                {% blocktrans trimmed %}
+                    You haven't created any questions yet.
+                {% endblocktrans %}
+            </p>
+
+            <a href="{% url "control:event.items.questions.add" organizer=request.event.organizer.slug event=request.event.slug %}"
+                    class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> {% trans "Create a new question" %}</a>
+        </div>
+    {% else %}
+        <p>
+            <a href="{% url "control:event.items.questions.add" organizer=request.event.organizer.slug event=request.event.slug %}" class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create a new question" %}
+            </a>
+        </p>
+        <div class="table-responsive">
+            <table class="table table-hover">
+                <thead>
                 <tr>
                     <th>{% trans "Question" %}</th>
                     <th>{% trans "Type" %}</th>
                     <th></th>
                 </tr>
-            </thead>
-            <tbody>
+                </thead>
+                <tbody>
                 {% for q in questions %}
-                <tr>
-                    <td><strong><a href="
-                    {% url "control:event.items.questions.edit" organizer=request.event.organizer.slug event=request.event.slug question=q.id %}">{{ q.question }}</a></strong></td>
-                    <td>{{ q.get_type_display }}</td>
-                    <td class="text-right"><a href="
-                    {% url "control:event.items.questions.delete" organizer=request.event.organizer.slug event=request.event.slug question=q.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a></td>
-                </tr>
+                    <tr>
+                        <td><strong><a href="
+                    {% url "control:event.items.questions.edit" organizer=request.event.organizer.slug event=request.event.slug question=q.id %}">{{ q.question }}</a></strong>
+                        </td>
+                        <td>{{ q.get_type_display }}</td>
+                        <td class="text-right"><a href="
+                    {% url "control:event.items.questions.delete" organizer=request.event.organizer.slug event=request.event.slug question=q.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
+                        </td>
+                    </tr>
                 {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% include "pretixcontrol/pagination.html" %}
+                </tbody>
+            </table>
+        </div>
+        {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}
diff --git a/src/pretix/control/templates/pretixcontrol/items/quotas.html b/src/pretix/control/templates/pretixcontrol/items/quotas.html
index 268c8dce17..f859a94717 100644
--- a/src/pretix/control/templates/pretixcontrol/items/quotas.html
+++ b/src/pretix/control/templates/pretixcontrol/items/quotas.html
@@ -2,13 +2,35 @@
 {% load i18n %}
 {% block title %}{% trans "Quotas" %}{% endblock %}
 {% block inside %}
-	<h1>{% trans "Quotas" %}</h1>
-	<p>
-		<a href="{% url "control:event.items.quotas.add" organizer=request.event.organizer.slug event=request.event.slug %}" class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create a new quota" %}</a>
-	</p>
-    <div class="table-responsive">
-        <table class="table table-hover table-quotas">
-            <thead>
+    <h1>{% trans "Quotas" %}</h1>
+    <p>
+        {% blocktrans trimmed %}
+            To make your products actually available, you also need quotas. Quotas define, how many instances of
+            your product pretix will sell. This way, you can configure whether your event can take an unlimited
+            number of attendees or the number of attendees is limited. You can assign a product to multiple quotas
+            to fulfil more complex requirements, e.g. if you want to limit the total number of tickets sold and the
+            number of a specific ticket type at the same time.
+        {% endblocktrans %}
+    </p>
+    {% if quotas|length == 0 %}
+        <div class="empty-collection">
+            <p>
+                {% blocktrans trimmed %}
+                    You haven't created any quotas yet.
+                {% endblocktrans %}
+            </p>
+
+            <a href="{% url "control:event.items.quotas.add" organizer=request.event.organizer.slug event=request.event.slug %}"
+                    class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> {% trans "Create a new quota" %}</a>
+        </div>
+    {% else %}
+        <p>
+            <a href="{% url "control:event.items.quotas.add" organizer=request.event.organizer.slug event=request.event.slug %}" class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create a new quota" %}
+            </a>
+        </p>
+        <div class="table-responsive">
+            <table class="table table-hover table-quotas">
+                <thead>
                 <tr>
                     <th>{% trans "Quota name" %}</th>
                     <th>{% trans "Products" %}</th>
@@ -16,27 +38,32 @@
                     <th>{% trans "Capacity left" %}</th>
                     <th></th>
                 </tr>
-            </thead>
-            <tbody>
+                </thead>
+                <tbody>
                 {% for q in quotas %}
-                <tr>
-                    <td><strong><a href="{% url "control:event.items.quotas.edit" organizer=request.event.organizer.slug event=request.event.slug quota=q.id %}">{{ q.name }}</a></strong></td>
-                    <td>
-                        <ul>
-                            {% for item in q.items.all %}
-                                <li><a href="
+                    <tr>
+                        <td>
+                            <strong><a href="{% url "control:event.items.quotas.edit" organizer=request.event.organizer.slug event=request.event.slug quota=q.id %}">{{ q.name }}</a></strong>
+                        </td>
+                        <td>
+                            <ul>
+                                {% for item in q.items.all %}
+                                    <li><a href="
                                 {% url "control:event.item" organizer=request.event.organizer.slug event=request.event.slug item=item.id %}"
-                                        >{{ item.name }}</a></li>
-                            {% endfor %}
-                        </ul>
-                    </td>
-                    <td>{% if q.size == None %}Unlimited{% else %}{{ q.size }}{% endif %}</td>
-                    <td>{% include "pretixcontrol/items/fragment_quota_availability.html" with availability=q.availability %}</td>
-                    <td class="text-right"><a href="{% url "control:event.items.quotas.delete" organizer=request.event.organizer.slug event=request.event.slug quota=q.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a></td>
-                </tr>
+                                    >{{ item.name }}</a></li>
+                                {% endfor %}
+                            </ul>
+                        </td>
+                        <td>{% if q.size == None %}Unlimited{% else %}{{ q.size }}{% endif %}</td>
+                        <td>{% include "pretixcontrol/items/fragment_quota_availability.html" with availability=q.availability %}</td>
+                        <td class="text-right">
+                            <a href="{% url "control:event.items.quotas.delete" organizer=request.event.organizer.slug event=request.event.slug quota=q.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
+                        </td>
+                    </tr>
                 {% endfor %}
-            </tbody>
-        </table>
-    </div>
+                </tbody>
+            </table>
+        </div>
+    {% endif %}
     {% include "pretixcontrol/pagination.html" %}
 {% endblock %}
diff --git a/src/pretix/control/templates/pretixcontrol/orders/index.html b/src/pretix/control/templates/pretixcontrol/orders/index.html
index 93a1e54b02..cc300d66f8 100644
--- a/src/pretix/control/templates/pretixcontrol/orders/index.html
+++ b/src/pretix/control/templates/pretixcontrol/orders/index.html
@@ -1,11 +1,32 @@
 {% extends "pretixcontrol/event/base.html" %}
 {% load i18n %}
+{% load eventurl %}
 {% block title %}{% trans "Orders" %}{% endblock %}
 {% block content %}
-	<h1>{% trans "Orders" %}</h1>
-    <p>
+    <h1>{% trans "Orders" %}</h1>
+    {% if questions|length == 0 %}
+        <div class="empty-collection">
+            <p>
+                {% blocktrans trimmed %}
+                    Nobody ordered a ticket yet.
+                {% endblocktrans %}
+            </p>
+
+            {% if not request.event.live %}
+                <a href="{% url "control:event.live" event=request.event.slug organizer=request.event.organizer.slug %}"
+                        class="btn btn-primary btn-lg">
+                    {% trans "Take your shop live" %}
+                </a>
+            {% else %}
+                <a href="{% eventurl request.event "presale:event.index" %}" class="btn btn-primary btn-lg">
+                    {% trans "Go to the ticket shop" %}
+                </a>
+            {% endif %}
+        </div>
+    {% else %}
+        <p>
         <form class="form-inline helper-display-inline"
-              action="{% url "control:event.orders.go" event=request.event.slug organizer=request.event.organizer.slug %}">
+                action="{% url "control:event.orders.go" event=request.event.slug organizer=request.event.organizer.slug %}">
             <div class="input-group">
                 <input type="text" name="code" class="form-control" placeholder="{% trans "Order code" %}">
                 <span class="input-group-btn">
@@ -34,10 +55,10 @@
             <input type="text" name="user" class="form-control" placeholder="{% trans "Search user" %}" value="{{ request.GET.user }}">
             <button class="btn btn-primary" type="submit">{% trans "Filter" %}</button>
         </form>
-    </p>
-    <div class="table-responsive">
-        <table class="table table-condensed table-hover">
-            <thead>
+        </p>
+        <div class="table-responsive">
+            <table class="table table-condensed table-hover">
+                <thead>
                 <tr>
                     <th>{% trans "Order code" %}</th>
                     <th>{% trans "User" %}</th>
@@ -45,21 +66,22 @@
                     <th>{% trans "Order date" %}</th>
                     <th>{% trans "Status" %}</th>
                 </tr>
-            </thead>
-            <tbody>
+                </thead>
+                <tbody>
                 {% for o in orders %}
-                <tr>
-                    <td><strong><a
-                            href="{% url "control:event.order" event=request.event.slug organizer=request.event.organizer.slug code=o.code%}"
-                            >{{ o.code }}</a></strong></td>
-                    <td>{{ o.email }}</td>
-                    <td>{{ o.total|floatformat:2 }} {{ request.event.currency }}</td>
-                    <td>{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</td>
-                    <td>{% include "pretixcontrol/orders/fragment_order_status.html" with order=o %}</td>
-                </tr>
+                    <tr>
+                        <td><strong><a
+                                href="{% url "control:event.order" event=request.event.slug organizer=request.event.organizer.slug code=o.code %}"
+                        >{{ o.code }}</a></strong></td>
+                        <td>{{ o.email }}</td>
+                        <td>{{ o.total|floatformat:2 }} {{ request.event.currency }}</td>
+                        <td>{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</td>
+                        <td>{% include "pretixcontrol/orders/fragment_order_status.html" with order=o %}</td>
+                    </tr>
                 {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% include "pretixcontrol/pagination.html" %}
+                </tbody>
+            </table>
+        </div>
+        {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}
diff --git a/src/pretix/control/templates/pretixcontrol/vouchers/index.html b/src/pretix/control/templates/pretixcontrol/vouchers/index.html
index 3dc6e2d48f..a93b663407 100644
--- a/src/pretix/control/templates/pretixcontrol/vouchers/index.html
+++ b/src/pretix/control/templates/pretixcontrol/vouchers/index.html
@@ -4,45 +4,64 @@
 {% block inside %}
     <h1>{% trans "Vouchers" %}</h1>
     <p>
-        <a href="{% url "control:event.vouchers.add" organizer=request.event.organizer.slug event=request.event.slug %}"
-                class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create a new voucher" %}</a>
+        {% blocktrans trimmed %}
+            Vouchers allow you to assign tickets to specific persons for a lower price. They also enable you to
+            reserve some quota for your very special guests.
+        {% endblocktrans %}
     </p>
-    <div class="table-responsive">
-        <table class="table table-hover table-quotas">
-            <thead>
-            <tr>
-                <th>{% trans "Voucher code" %}</th>
-                <th>{% trans "Is redeemed" %}</th>
-                <th>{% trans "Expiry" %}</th>
-                <th>{% trans "Product" %}</th>
-                <th></th>
-            </tr>
-            </thead>
-            <tbody>
-            {% for v in vouchers %}
+    {% if vouchers|length == 0 %}
+        <div class="empty-collection">
+            <p>
+                {% blocktrans trimmed %}
+                    You haven't created any vouchers yet.
+                {% endblocktrans %}
+            </p>
+
+            <a href="{% url "control:event.vouchers.add" organizer=request.event.organizer.slug event=request.event.slug %}"
+                    class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> {% trans "Create a new voucher" %}</a>
+        </div>
+    {% else %}
+        <p>
+            <a href="{% url "control:event.vouchers.add" organizer=request.event.organizer.slug event=request.event.slug %}"
+                    class="btn btn-default"><i class="fa fa-plus"></i> {% trans "Create a new voucher" %}</a>
+        </p>
+        <div class="table-responsive">
+            <table class="table table-hover table-quotas">
+                <thead>
                 <tr>
-                    <td>
-                        <strong><a href="
-                        {% url "control:event.voucher" organizer=request.event.organizer.slug event=request.event.slug voucher=v.id %}">{{ v.code }}</a></strong>
-                    </td>
-                    <td>{% if v.redeemed %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}</td>
-                    <td>{{ v.valid_until|date }}</td>
-                    <td>
-                        {% if v.item %}
-                            {{ v.item }}
-                        {% else %}
-                            {% blocktrans trimmed with quota=v.quota.name %}
-                                Any product in quota "{{ quota }}"
-                            {% endblocktrans %}
-                        {% endif %}
-                    </td>
-                    <td class="text-right">
-                        <a href="{% url "control:event.voucher.delete" organizer=request.event.organizer.slug event=request.event.slug voucher=v.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
-                    </td>
+                    <th>{% trans "Voucher code" %}</th>
+                    <th>{% trans "Is redeemed" %}</th>
+                    <th>{% trans "Expiry" %}</th>
+                    <th>{% trans "Product" %}</th>
+                    <th></th>
                 </tr>
-            {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% include "pretixcontrol/pagination.html" %}
+                </thead>
+                <tbody>
+                {% for v in vouchers %}
+                    <tr>
+                        <td>
+                            <strong><a href="
+                        {% url "control:event.voucher" organizer=request.event.organizer.slug event=request.event.slug voucher=v.id %}">{{ v.code }}</a></strong>
+                        </td>
+                        <td>{% if v.redeemed %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}</td>
+                        <td>{{ v.valid_until|date }}</td>
+                        <td>
+                            {% if v.item %}
+                                {{ v.item }}
+                            {% else %}
+                                {% blocktrans trimmed with quota=v.quota.name %}
+                                    Any product in quota "{{ quota }}"
+                                {% endblocktrans %}
+                            {% endif %}
+                        </td>
+                        <td class="text-right">
+                            <a href="{% url "control:event.voucher.delete" organizer=request.event.organizer.slug event=request.event.slug voucher=v.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
+                        </td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}
diff --git a/src/static/pretixcontrol/scss/main.scss b/src/static/pretixcontrol/scss/main.scss
index db75666f55..3ffaa40f26 100644
--- a/src/static/pretixcontrol/scss/main.scss
+++ b/src/static/pretixcontrol/scss/main.scss
@@ -163,4 +163,13 @@ h1 .btn-sm {
 }
 .helper-space-below {
     margin-bottom: 10px;
+}
+
+.empty-collection {
+    margin: 20px 0;
+    text-align: center;
+
+    p {
+        font-size: 24px;
+    }
 }
\ No newline at end of file