Improve responsiveness of organizer page

This commit is contained in:
Raphael Michel
2020-06-24 19:39:57 +02:00
parent 2a5c24482e
commit e5cc15ffac
2 changed files with 106 additions and 84 deletions
@@ -55,24 +55,32 @@
<a href="?{% url_replace request "old" "1" %}" class="btn btn-link">{% trans "Show past events" %}</a> <a href="?{% url_replace request "old" "1" %}" class="btn btn-link">{% trans "Show past events" %}</a>
{% endif %} {% endif %}
</div> </div>
<div class="table-responsive"> <div class="event-list">
<table class="table"> <div class="row hidden-xs hidden-sm">
<thead> <div class="col-md-5">
<tr> <strong>{% trans "Name" %}</strong>
<th>{% trans "Name" %}</th> </div>
<th>{% trans "Date" %}</th> <div class="col-md-3">
<th>{% trans "Status" %}</th> <strong>{% trans "Date" %}</strong>
<th></th> </div>
</tr> <div class="col-md-2">
</thead> <strong>{% trans "Status" %}</strong>
<tbody> </div>
<div class="col-md-2">
</div>
</div>
{% for e in events %}{% eventurl e "presale:event.index" as url %} {% for e in events %}{% eventurl e "presale:event.index" as url %}
<tr> <div class="row">
<td> <div class="col-md-5 col-xs-12">
<a href="{{ url }}">{{ e.name }}</a> <a href="{{ url }}">
</td> <strong>
{{ e.name }}
</strong>
</a>
</div>
<div class="col-md-3 col-xs-12">
{% if e.settings.show_dates_on_frontpage %} {% if e.settings.show_dates_on_frontpage %}
<td>
{{ e.daterange|default:e.get_date_range_display }} {{ e.daterange|default:e.get_date_range_display }}
{% if e.settings.show_times and not e.has_subevents %} {% if e.settings.show_times and not e.has_subevents %}
{% timezone e.tzname %} {% timezone e.tzname %}
@@ -84,11 +92,12 @@
</small> </small>
{% endtimezone %} {% endtimezone %}
{% endif %} {% endif %}
</td>
{% else %} {% else %}
<td>&nbsp;</td> &nbsp;
{% endif %} {% endif %}
<td> <td>
</div>
<div class="col-md-2 col-xs-6">
{% if e.has_subevents %} {% if e.has_subevents %}
<span class="label label-default">{% trans "Event series" %}</span> <span class="label label-default">{% trans "Event series" %}</span>
{% elif e.presale_is_running and request.organizer.settings.event_list_availability %} {% elif e.presale_is_running and request.organizer.settings.event_list_availability %}
@@ -114,9 +123,9 @@
{% else %} {% else %}
<span class="label label-warning">{% trans "Not yet on sale" %}</span> <span class="label label-warning">{% trans "Not yet on sale" %}</span>
{% endif %} {% endif %}
</td> </div>
<td class="text-right flip"> <div class="col-md-2 col-xs-6 text-right flip">
<a class="btn btn-primary" href="{{ url }}"> <a class="btn btn-primary btn-block" href="{{ url }}">
{% if e.has_subevents %}<span class="fa fa-ticket"></span> {% trans "Tickets" %} {% if e.has_subevents %}<span class="fa fa-ticket"></span> {% trans "Tickets" %}
{% elif e.presale_is_running and e.best_availability_state == 100 %} {% elif e.presale_is_running and e.best_availability_state == 100 %}
<span class="fa fa-ticket"></span> {% trans "Tickets" %} <span class="fa fa-ticket"></span> {% trans "Tickets" %}
@@ -124,25 +133,19 @@
<span class="fa fa-info"></span> {% trans "More info" %} <span class="fa fa-info"></span> {% trans "More info" %}
{% endif %} {% endif %}
</a> </a>
</td> </div>
</tr> </div>
{% empty %} {% empty %}
{% if "old" in request.GET %} {% if "old" in request.GET %}
<tr> <div class="col-md-12">
<td colspan="3">
<em>{% trans "No archived events found." %}</em> <em>{% trans "No archived events found." %}</em>
</td> </div>
</tr>
{% else %} {% else %}
<tr> <div class="col-md-12">
<td colspan="3">
<em>{% trans "No public upcoming events found." %}</em> <em>{% trans "No public upcoming events found." %}</em>
</td> </div>
</tr>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</tbody>
</table>
</div> </div>
{% include "pretixpresale/pagination.html" %} {% include "pretixpresale/pagination.html" %}
{% endblock %} {% endblock %}
@@ -277,6 +277,25 @@ h2 .label {
display: none !important; display: none !important;
} }
.event-list {
margin-top: 15px;
border-top: 1px solid $table-border-color;
.row {
margin-left: 0;
margin-right: 0;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid $table-border-color;
border-left: 1px solid $table-border-color;
border-right: 1px solid $table-border-color;
}
.row > div {
padding-top: 5px;
padding-bottom: 5px;
}
}
@import "_iframe.scss"; @import "_iframe.scss";
@import "_a11y.scss"; @import "_a11y.scss";
@import "_print.scss"; @import "_print.scss";