Improved list views to look better when they are empty

src/pretix/control/templates/pretixcontrol/attendees/index.html

@@ -1,8 +1,29 @@
 {% extends "pretixcontrol/event/base.html" %}
 {% load i18n %}
+{% load eventurl %}
 {% block title %}{% trans "Attendees" %}{% endblock %}
 {% block content %}
     <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">
@@ -52,4 +73,5 @@
             </table>
         </div>
         {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}

src/pretix/control/templates/pretixcontrol/items/categories.html

@@ -4,7 +4,25 @@
 {% 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>
+        {% 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">
@@ -18,16 +36,21 @@
                 <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>
+                            <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>
+                        <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" %}
+    {% endif %}
 {% endblock %}

src/pretix/control/templates/pretixcontrol/items/index.html

@@ -10,9 +10,21 @@
             give category.
         {% endblocktrans %}
     </p>
+    {% 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 new product" %}</a>
+                    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">
@@ -40,7 +52,9 @@
                                 <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>
+                            <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 %}
@@ -48,4 +62,5 @@
             </table>
         </div>
         {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}

src/pretix/control/templates/pretixcontrol/items/questions.html

@@ -4,7 +4,26 @@
 {% 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>
+        {% 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">
@@ -19,14 +38,17 @@
                 {% 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>
+                    {% 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>
+                    {% 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" %}
+    {% endif %}
 {% endblock %}

src/pretix/control/templates/pretixcontrol/items/quotas.html

@@ -4,7 +4,29 @@
 {% 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>
+        {% 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">
@@ -20,7 +42,9 @@
                 <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>
+                            <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 %}
@@ -32,11 +56,14 @@
                         </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>
+                        <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>
+    {% endif %}
     {% include "pretixcontrol/pagination.html" %}
 {% endblock %}

src/pretix/control/templates/pretixcontrol/orders/index.html

@@ -1,8 +1,29 @@
 {% extends "pretixcontrol/event/base.html" %}
 {% load i18n %}
+{% load eventurl %}
 {% block title %}{% trans "Orders" %}{% endblock %}
 {% block content %}
     <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 %}">
@@ -62,4 +83,5 @@
             </table>
         </div>
         {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}

src/pretix/control/templates/pretixcontrol/vouchers/index.html

@@ -3,6 +3,24 @@
 {% block title %}{% trans "Vouchers" %}{% endblock %}
 {% block inside %}
     <h1>{% trans "Vouchers" %}</h1>
+    <p>
+        {% 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>
+    {% 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>
@@ -45,4 +63,5 @@
             </table>
         </div>
         {% include "pretixcontrol/pagination.html" %}
+    {% endif %}
 {% endblock %}

src/static/pretixcontrol/scss/main.scss

@@ -164,3 +164,12 @@ h1 .btn-sm {
 .helper-space-below {
     margin-bottom: 10px;
 }
+
+.empty-collection {
+    margin: 20px 0;
+    text-align: center;
+
+    p {
+        font-size: 24px;
+    }
+}