UI: 2024 Hero component options #103971

Merged
Márton Lente merged 66 commits from ui/2024-hero-options into main 2024-09-24 13:00:31 +02:00
22 changed files with 111 additions and 120 deletions
Showing only changes of commit 5608fb0410 - Show all commits

View File

@ -72,7 +72,7 @@ body.is-scrolled
img
height: calc(var(--spacer) * 14)
max-width: 100%
max-width: calc(var(--spacer) * 30)
object-fit: contain
.content

View File

@ -13,8 +13,9 @@ $col-time-width: 8%
background-color: var(--color-bg-primary)
.btn-toggle
@extend .btn
&.is-active
@extend .btn
@extend .btn-primary
+media-xs
@ -149,7 +150,7 @@ $col-time-width: 8%
top: 0
z-index: 10
+media-sm
+media-lg
display: none
body.is-scrolled

View File

@ -16,7 +16,7 @@ style.
--hero-max-height: 640px;
}
.hero-background {
.hero-bg {
background-position: center;
background-size: contain;
}
@ -34,7 +34,7 @@ style.
.hero {
--hero-max-height: 440px;
}
.hero-background {
.hero-bg {
background-position: left center;
background-size: cover;
}

View File

@ -18,7 +18,7 @@
li.list-group-item(class="{% if 'festival' in request.path %}is-active{% endif %}")
a(href="{% url 'account_festival_entries_list' %}")
| #[i.i-tv] My Festival Entries
li.list-group-item(class="{% if 'tickets' in request.path %}is-active{% endif %}")
li.list-group-item(class="{% if 'ticket' in request.path %}is-active{% endif %}")
a(href="{% url 'tickets:list' %}")
| #[i.i-ticket] Tickets
| {% endblock sidebar %}

View File

@ -1,7 +1,7 @@
style.
:root {
{% for l in edition.locations.all %}
--location-hue-{{ l.slug }}: {{ l.color_to_hsv.0 }};
--location-hue-{{ l.slug }}: {{ l.color_to_hsv.0|floatformat }};
{% endfor %}
}

View File

@ -4,3 +4,8 @@ a.alert.alert-fluid.alert-info.text-center(
| There {{ events_unscheduled_count|pluralize:"is,are" }} {{ events_unscheduled_count }}
| unscheduled event{{ events_unscheduled_count|pluralize }}
| {% endif %}
| {% if edition.schedule_status == 'proposed' %}
.alert.alert-fluid.alert-warning
| This is a proposed version of the schedule. The final version will be available 2 weeks before the event.
| {% endif %}

View File

@ -11,9 +11,9 @@
.hero-subtitle Submit your entry to the animation festival.
{% if edition.header %}
.hero-background(style="background-image: url({{ edition.header.url }})")
.hero-bg(style="background-image: url({{ edition.header.url }})")
{% else %}
.hero-background(style="background-image: url({% static 'images/bcon19_cityscape_notext.jpg' %})")
.hero-bg(style="background-image: url({% static 'images/bcon19_cityscape_notext.jpg' %})")
{% endif %}
.hero-overlay
| {% endblock jumbotron %}

View File

@ -3,7 +3,7 @@
| {% load conference_main %}
| {% block content %}
| {% include "conference_main/components/event_style.pug" %}
| {% include "conference_main/components/location_style.pug" %}
.panel-container
section.panel-events-list.panel-ajax-refresh(

View File

@ -3,7 +3,7 @@
| {% load conference_main %}
| {% block content %}
| {% include "conference_main/components/event_style.pug" %}
| {% include "conference_main/components/location_style.pug" %}
.panel-container.panel-location
ul.board-events(

View File

@ -17,9 +17,9 @@
| {{ edition.title }} special.
{% if edition.header %}
.hero-background(style="background-image: url({{ edition.header.url }})")
.hero-bg(style="background-image: url({{ edition.header.url }})")
{% else %}
.hero-background(style="background-image: url({% static 'images/bcon19_cityscape_notext.jpg' %})")
.hero-bg(style="background-image: url({% static 'images/bcon19_cityscape_notext.jpg' %})")
{% endif %}
.hero-overlay
| {% endblock jumbotron %}

View File

@ -30,7 +30,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% block content %}
| {% is_attending_edition user object.edition as is_attending %}
.container.event-detail.mt-3
| {% include "conference_main/components/event_style.pug" %}
| {% include "conference_main/components/location_style.pug" %}
.row
.col

View File

@ -30,7 +30,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% block header %}{% endblock %}
| {% block content %}
| {% include "conference_main/components/event_style.pug" %}
| {% include "conference_main/components/location_style.pug" %}
| {% is_attending_edition user object.edition as is_attending %}
| {% if permissions.can_change %}

View File

@ -10,14 +10,8 @@
| {% block content %}
| {% is_attending_edition user edition as is_attending %}
| {% include "conference_main/components/schedule_unscheduled_events.pug" %}
| {% if edition.schedule_status == 'proposed' %}
.alert.alert-fluid.alert-warning
| This is a proposed version of the schedule. The final version will be available 2 weeks before the event.
| {% endif %}
| {% include "conference_main/components/event_style.pug" %}
| {% include "conference_main/components/schedule_header_notice.pug" %}
| {% include "conference_main/components/location_style.pug" %}
.schedule-container.horizontal
.schedule-filters-container

View File

@ -10,14 +10,8 @@
| {% block content %}
| {% is_attending_edition user edition as is_attending %}
| {% include "conference_main/components/schedule_unscheduled_events.pug" %}
| {% if edition.schedule_status == 'proposed' %}
.alert.alert-fluid.alert-warning
| This is a proposed version of the schedule. The final version will be available 2 weeks before the event.
| {% endif %}
| {% include "conference_main/components/event_style.pug" %}
| {% include "conference_main/components/schedule_header_notice.pug" %}
| {% include "conference_main/components/location_style.pug" %}
.schedule-filters-container
.row

View File

@ -17,9 +17,9 @@
| {{ edition.title }} brings everyone together.
{% if edition.header %}
.hero-background(style="background-image: url({{ edition.header.url }});")
.hero-bg(style="background-image: url({{ edition.header.url }});")
{% else %}
.hero-background(style="background-image: url({% static 'images/bcon19_cityscape_notext.jpg' %})")
.hero-bg(style="background-image: url({% static 'images/bcon19_cityscape_notext.jpg' %})")
{% endif %}
.hero-overlay
| {% endblock jumbotron %}

View File

@ -1,32 +1,21 @@
{% if attendee %}
<div class="box border p-3 my-4">
<div>
<h4 class="d-flex align-items-end">
Your Badge
<h3>Conference Badge</h3>
<p>
This is a preview of what will be printed on your badge; the final design may differ.
<br>
You can edit your details in your <a class="text-decoration-underline" href="{% url "profile_update" %}">profile settings</a>.
</p>
<a href="{% url "profile_update" %}" class="btn btn-primary btn-md ms-auto">
<i class="i-edit"></i> Edit
</a>
</h4>
</div>
<div class="text-muted mt-3">
<small>
This is a preview of what will be printed on your Conference badge.
The final design of the badge may differ.
</small>
</div>
<hr>
<div class="text-center">
<div class="row">
<div class="col-md-8">
<div class="box p-3 bg-secondary text-center">
{% with profile=attendee.profile %}
{% if profile.full_name %}
<div class="row">
<div class="col h3">{{ profile.full_name }}</div>
</div>
{% else %}
<a href="{% url "profile_update" %}" class="alert alert-info mt-3">
<i class="i-edit"></i> Please fill in your full name in your profile.
<a href="{% url "profile_update" %}" class="alert alert-warning mt-3">
<i class="i-alert-triangle"></i> Please click here to fill in your full name.
</a>
{% endif %}
{% if profile.title %}
@ -49,4 +38,4 @@
{% endwith %}
</div>
</div>
{% endif %}
</div>

View File

@ -1,6 +1,5 @@
<h6>Get in touch</h6>
<h3>Get in Touch</h3>
<p class="text-muted">
If you require assistance or have question regarding your tickets,
get in touch with us via email
If you require assistance or have questions regarding your tickets, get in touch with us via email at
<a href="mailto:{{ DEFAULT_REPLY_TO_EMAIL }}{% if order.number %}?subject=Conference tickets, order #{{ order.number }}{% endif %}">{{ DEFAULT_REPLY_TO_EMAIL }}</a>
</p>

View File

@ -1,5 +1,9 @@
<div>
{% if ticket.order_number %}Order number: <strong>{{ ticket.order_number }}</strong>{% endif %}
<div class="d-flex justify-content-between">
{% if ticket.order_number %}
<div>
{% if compact %}#{% else %}Order Number: {% endif %}<strong>{{ ticket.order_number }}</strong>
</div>
{% endif %}
{% with refund_status=ticket.refund_status %}
<div class="float-right ms-3">

View File

@ -1,44 +1,41 @@
{% extends "conference_main/base_simple.pug" %}
{% extends "conference_main/base_with_sidebar.pug" %}
{% load pipeline %}
{% block content %}
<div class="container mt-3">
{% block content_main %}
{% with line=order.lines.0 %}
{% with variant=line.variant %}
{# Show information about pending payment if this ticket was bought by current user #}
{% include "tickets/ticket_detail_payment_pending.html" %}
<div class="row">
<div class="col-md-6 mx-auto">
<div class="box">
{% with line=order.lines.0 %}
{% with variant=line.variant %}
{# Show information about pending payment if this ticket was bought by current user #}
{% include "tickets/ticket_detail_payment_pending.html" %}
<div class="row">
<div class="col">
<h3>Your ticket{% if ticket.user_id == request.user.pk %}{{ ticket.quantity|pluralize }}{% endif %}</h3>
{% include "tickets/components/pill_payment_status.html" %}
{% include "tickets/ticket_detail_invoice.html" %}
</div>
</div>
<div class="row">
<div class="col">
{% include "tickets/components/line.html" %}
</div>
</div>
{# Show information about ticket claims if this ticket was bought by current user #}
{% include "tickets/ticket_detail_claims.html" %}
{% endwith %}
{% endwith %}
{% include "tickets/components/badge.html" %}
<div class="row">
<div class="col mt-4">
{% include "tickets/components/contact.html" %}
</div>
</div>
</div>
<div class="col">
<h3>Your Ticket{% if ticket.user_id == request.user.pk %}{{ ticket.quantity|pluralize }}{% endif %}</h3>
{% include "tickets/components/pill_payment_status.html" %}
</div>
</div>
<div class="row">
<div class="col">
{% include "tickets/components/line.html" %}
{% include "tickets/ticket_detail_invoice.html" %}
</div>
</div>
<hr>
{# Show information about ticket claims if this ticket was bought by current user #}
{% include "tickets/ticket_detail_claims.html" %}
{% endwith %}
{% endwith %}
{% if attendee %}
{% include "tickets/components/badge.html" %}
{% endif %}
<hr>
<div class="row">
<div class="col">
{% include "tickets/components/contact.html" %}
</div>
{% endblock %}
</div>
{% endblock content_main %}
{% block javascript-page %}
{% javascript "ticket-detail" %}

View File

@ -3,34 +3,31 @@
{% if ticket.user_id == request.user.pk %}
{% with unclaimed=ticket.unclaimed %}
{% if unclaimed %}
<h3>Unclaimed Tickets</h3>
<div class="row">
<div class="col">
<div class="alert alert-info mt-3">
<p class="float-right">
{% include "tickets/components/bi_exclamation_octagon.html" %}
</p>
<p class="pt-3">Unclaimed tickets remaining: <strong>{{ unclaimed }}</strong></p>
<p>
{% if unclaimed > 1 %}
Make sure all tickets are claimed by sharing the link below with all attendees.
{% else %}
Make sure this ticket is claimed by sharing the link below with the attendee.
{% endif %}
</p>
<div class="alert alert-info mb-3">
Unclaimed tickets remaining: <strong>{{ unclaimed }}</strong>
</div>
<p>
{% if unclaimed > 1 %}
Make sure all tickets are claimed by sharing the link below with all attendees.
{% else %}
Make sure this ticket is claimed by sharing the link below with the attendee.
{% endif %}
</p>
</div>
</div>
<div class="row mt-3">
<div class="row">
<div class="col">
Ticket{{ unclaimed|pluralize }} can be claimed using the following link:
<label class="sr-only" for="claim-url">
Ticket{{ unclaimed|pluralize }} can be claimed using the following link:
</label>
<div class="input-group mb-2 me-sm-2">
<input type="text" class="form-control" id="claim-url" readonly value="{% absolute_url ticket.claim_url %}">
<div class="input-group-append">
<button class="input-group-text btn btn-secondary" title="Copy to clipboard" id="btn-copy-claim-url">
<i class="i-copy"></i> Copy
<button class="input-group-text btn btn-primary" title="Copy to clipboard" id="btn-copy-claim-url">
<i class="i-copy"></i> Copy to Clipboard
</button>
</div>
</div>

View File

@ -3,11 +3,10 @@
{% with invoice_url=ticket.invoice_url %}
{% if invoice_url %}
{% if ticket.is_paid or ticket.should_send_mail_bank_transfer_required %}
<div class="row">
<div class="col">
<a href="{{ invoice_url }}">Download invoice</a>
</div>
</div>
<a href="{{ invoice_url }}" class="btn btn-sm">
<i class="i-download"></i>
<span>Invoice</span>
</a>
{% endif %}
{% endif %}
{% endwith %}

View File

@ -6,6 +6,11 @@
{% if object_list %}
<table class="table table-no-box">
<thead>
<th>Ticket</th>
<th>Order Number & Status</th>
<th>Download</th>
</thead>
<tbody>
{% for ticket in object_list %}
{% url 'tickets:detail' ticket_token=ticket.token as detail_url %}
@ -13,13 +18,20 @@
{% is_claimed_by ticket request.user as clamed %}
<td>
<a class="px-0" href="{{ detail_url }}">
{{ ticket.edition }} ({{ ticket.sku }})
<strong>{{ ticket.edition }}</strong> {{ ticket.sku }}
{% if clamed %}
(claimed by you)
<span class="badge badge-success badge-sm ms-2">
<i class="i-check"></i>
Claimed
</span>
{% endif %}
</a>
</td>
<td><a class="px-0" href="{{ detail_url }}">{% include "tickets/components/pill_payment_status.html" %}</a></td>
<td>
<a class="px-0" href="{{ detail_url }}">
{% include "tickets/components/pill_payment_status.html" with compact=True %}
</a>
</td>
<td>{% include "tickets/ticket_detail_invoice.html" %}</td>
</tr>
{% endfor %}