improve styling

This commit is contained in:
Richard Schreiber
2024-11-19 09:26:57 +01:00
parent 59dccaf680
commit 3c5ccaa1ba
2 changed files with 30 additions and 15 deletions

View File

@@ -9,8 +9,8 @@
<h2> <h2>
{% trans "Your account" %} {% trans "Your account" %}
</h2> </h2>
<div class="row"> <div class="blank-after">
<dl> <dl class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<dt>{{ customer.name }}</dt> <dt>{{ customer.name }}</dt>
<dd>{{ customer.email }}</dd> <dd>{{ customer.email }}</dd>
@@ -31,7 +31,8 @@
<div class="col-sm-6 text-right"> <div class="col-sm-6 text-right">
<dt>{% trans "Customer ID" %}</dt> <dt>{% trans "Customer ID" %}</dt>
<dd>#{{ customer.identifier }}</dd> <dd>#{{ customer.identifier }}</dd>
</div> </dl> </div>
</dl>
<nav class="row" aria-label="{% trans "customer account information" %}"> <nav class="row" aria-label="{% trans "customer account information" %}">
<ul class="list-inline blank-after col-xs-12"> <ul class="list-inline blank-after col-xs-12">
<li> <li>
@@ -67,11 +68,11 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
{% if orders %} {% if orders %}
<ol class="event-list list-unstyled"> <ol class="full-width-list alternating-rows">
{% for o in orders %} {% for o in orders %}
<li class="row"> <li class="row">
<dl> <dl>
<div class="col-md-3 col-sm-3 col-xs-8"> <div class="col-md-4 col-sm-5 col-xs-8">
<dt class="sr-only">{% trans "Order" %}</dt> <dt class="sr-only">{% trans "Order" %}</dt>
<dd><strong> <dd><strong>
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank"> <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
@@ -85,12 +86,11 @@
></span> ></span>
{% endif %} {% endif %}
<small>{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</small> <small>{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</small>
{% if o.testmode and False %}
<span class="label label-warning">{% trans "TEST MODE" %}</span>
{% endif %}
</dd> </dd>
<dd><time datetime="{{ o.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></dd> <dd><time datetime="{{ o.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></dd>
<dd class="small"></dd> {% if o.testmode and False %}
<dd><span class="label label-warning">{% trans "TEST MODE" %}</span></dd>
{% endif %}
</div> </div>
<div class="col-md-2 col-sm-2 col-xs-4 text-right"> <div class="col-md-2 col-sm-2 col-xs-4 text-right">
<dt class="sr-only">{% trans "Order total" %}</dt> <dt class="sr-only">{% trans "Order total" %}</dt>
@@ -99,20 +99,18 @@
<dd class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small> <dd class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small>
</dd> </dd>
</div> </div>
<div class="col-md-5 col-sm-5 col-xs-8"> <div class="col-md-4 col-sm-3 col-xs-8">
<dt class="sr-only">{% trans "Event" %}</dt> <dt class="sr-only">{% trans "Event" %}</dt>
<dd> <dd>
<br class="hidden-sm"/>
{{ o.event }} {{ o.event }}
{% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %} {% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %}
<br><small class="text-muted">{{ o.event.get_date_range_display }}</small> <br><small class="text-muted">{{ o.event.get_date_range_display }}</small>
{% endif %} {% endif %}
</dd> </dd>
</div> </div>
<div class="col-md-2 col-sm-2 col-xs-4"> <div class="col-sm-2 col-xs-4">
<dt class="sr-only">{% trans "Actions" %}</dt> <dt class="sr-only">{% trans "Actions" %}</dt>
<dd class="text-right"> <dd class="text-right">
<br class="hidden-sm"/>
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}"
target="_blank"> target="_blank">
<span class="fa fa-list-ul" aria-hidden="true"></span> <span class="fa fa-list-ul" aria-hidden="true"></span>
@@ -123,7 +121,6 @@
</li> </li>
{% endfor %} {% endfor %}
</ol> </ol>
{% include "pretixcontrol/pagination.html" %}
{% else %} {% else %}
<p class="text-center">{% trans "You dont have any orders in your account yet." %}</p> <p class="text-center">{% trans "You dont have any orders in your account yet." %}</p>
{% endif %} {% endif %}

View File

@@ -254,7 +254,7 @@ svg.svg-icon {
@include table-row-variant('danger', var(--pretix-brand-danger-lighten-30), var(--pretix-brand-danger-lighten-25)); @include table-row-variant('danger', var(--pretix-brand-danger-lighten-30), var(--pretix-brand-danger-lighten-25));
.text-blob-success, .text-blob-info, .text-blob-warning, .text-blob-danger { .text-blob-success, .text-blob-info, .text-blob-warning, .text-blob-danger {
padding: .125em .5em; padding: .125em .65em 0;
border-radius: 1em; border-radius: 1em;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
@@ -282,3 +282,21 @@ svg.svg-icon {
color: var(--pretix-brand-danger-darken-5); color: var(--pretix-brand-danger-darken-5);
background: var(--pretix-brand-danger-lighten-43); background: var(--pretix-brand-danger-lighten-43);
} }
.full-width-list {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 15px 0;
}
li+li {
border-top: 1px solid $table-border-color;
}
}
.alternating-rows .row:nth-child(even) {
background-color: $table-bg-accent;
}