Skip to content

Commit 96375b9

Browse files
machikoyasudamachikoyasuda
authored
Admin: Front-end for Flow pages (#2688)
2 parents dd66198 + 7b3476d commit 96375b9

File tree

10 files changed

+114
-119
lines changed

10 files changed

+114
-119
lines changed

‎benefits/in_person/templates/error-base.html

-29
This file was deleted.

‎benefits/in_person/templates/in_person/eligibility.html

+16-27
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
1-
{% extends "admin/agency-base.html" %}
1+
{% extends "admin/flow-base.html" %}
22

3-
{% block title %}
4-
{{ title }}
5-
{% endblock title %}
6-
7-
{% block content %}
8-
<div class="row justify-content-center">
9-
<div class="col-11 col-md-10 col-lg-6 border border-3 px-0">
10-
<div class="border border-3 border-top-0 border-start-0 border-end-0">
11-
<h2 class="p-3 m-0 text-start">In-person enrollment</h2>
12-
</div>
13-
<div class="p-3">{% include "core/includes/form.html" with form=form %}</div>
14-
<div class="row d-flex justify-content-start p-3 pt-8">
15-
<div class="col-6">
16-
{% url form.cancel_url as url_cancel %}
17-
<a href="{{ url_cancel }}" class="btn btn-lg btn-outline-primary d-block">Cancel</a>
18-
</div>
19-
<div class="col-6">
20-
<button class="btn btn-lg btn-primary d-flex justify-content-center align-items-center"
21-
data-action="submit"
22-
type="submit"
23-
form="{{ form.id }}">
24-
<span class="btn-text">Continue</span>
25-
</button>
26-
</div>
27-
</div>
3+
{% block flow-content %}
4+
<div class="p-3">{% include "core/includes/form.html" with form=form %}</div>
5+
<div class="row d-flex justify-content-start p-3 pt-8">
6+
<div class="col-6">
7+
{% url form.cancel_url as url_cancel %}
8+
<a href="{{ url_cancel }}" class="btn btn-lg btn-outline-primary d-block">Cancel</a>
9+
</div>
10+
<div class="col-6">
11+
<button class="btn btn-lg btn-primary d-flex justify-content-center align-items-center"
12+
data-action="submit"
13+
type="submit"
14+
form="{{ form.id }}">
15+
<span class="btn-text">Continue</span>
16+
</button>
2817
</div>
2918
</div>
30-
{% endblock content %}
19+
{% endblock flow-content %}

‎benefits/in_person/templates/in_person/enrollment/index.html

+18-27
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,25 @@
1-
{% extends "admin/agency-base.html" %}
1+
{% extends "admin/flow-base.html" %}
22

33
{% block title %}
44
{{ title }}
55
{% endblock title %}
66

7-
{% block content %}
8-
9-
<div class="row justify-content-center">
10-
<div class="col-lg-6">
11-
<div class="border border-3 p-3">
12-
<h2 class="p-0 m-0 text-start">In-person enrollment</h2>
13-
</div>
14-
<div class="border border-3 border-top-0 p-3">
15-
<div class="loading">
16-
<p>
17-
<span class="spinner-border align-middle text-primary" role="status"></span>
18-
<span id="loading-message" class="fw-bold p-2">Please wait...</span>
19-
</p>
20-
</div>
21-
<div class="invisible">
22-
<p>Provide the rider's contactless debit or credit card details.</p>
23-
<iframe class="card-collection" name="card-collection-iframe"></iframe>
24-
</div>
25-
<div class="row d-flex justify-content-start p-3 pt-8">
26-
<div class="col-12">
27-
{% url routes.ADMIN_INDEX as url_cancel %}
28-
<a href="{{ url_cancel }}" class="btn btn-lg btn-outline-primary d-block">Cancel</a>
29-
</div>
30-
</div>
7+
{% block flow-content %}
8+
<div class="p-3">
9+
<div class="loading">
10+
<p>
11+
<span class="spinner-border align-middle text-primary" role="status"></span>
12+
<span id="loading-message" class="fw-bold p-2">Please wait...</span>
13+
</p>
14+
</div>
15+
<div class="invisible">
16+
<p>Provide the rider's contactless debit or credit card details.</p>
17+
<iframe class="card-collection" name="card-collection-iframe"></iframe>
18+
</div>
19+
<div class="row d-flex justify-content-start p-3 pt-8">
20+
<div class="col-12">
21+
{% url routes.ADMIN_INDEX as url_cancel %}
22+
<a href="{{ url_cancel }}" class="btn btn-lg btn-outline-primary d-block">Cancel</a>
3123
</div>
3224
</div>
3325
</div>
@@ -138,5 +130,4 @@ <h2 class="p-0 m-0 text-start">In-person enrollment</h2>
138130
{% for f in forms %}
139131
{% include "core/includes/form.html" with form=f %}
140132
{% endfor %}
141-
142-
{% endblock content %}
133+
{% endblock flow-content %}

‎benefits/in_person/templates/in_person/enrollment/retry.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{% extends "error-base.html" %}
1+
{% extends "in_person/error-base.html" %}
22

33
{% block error-message %}
44
<h3 class="fw-bold h4">Card not found.</h3>

‎benefits/in_person/templates/in_person/enrollment/success.html

+23-30
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,33 @@
1-
{% extends "admin/agency-base.html" %}
1+
{% extends "admin/flow-base.html" %}
22
{% load static %}
33

44
{% block title %}
55
{{ title }}
66
{% endblock title %}
77

8-
{% block content %}
9-
<div class="row justify-content-center">
10-
<div class="col-lg-6">
11-
<div class="border border-3 p-3">
12-
<h2 class="p-0 m-0 text-start">In-person enrollment</h2>
13-
</div>
14-
<div class="border border-3 border-top-0 p-3 min-vh-60 d-flex flex-column justify-content-between">
15-
<div class="d-flex">
16-
<i class="success-icon"></i>
17-
<div>
18-
<p>Success! This rider can now use their contactless card to automatically receive a reduced fare when they tap-to-ride.</p>
8+
{% block flow-content %}
9+
<div class="p-3 min-vh-60 d-flex flex-column justify-content-between">
10+
<div class="d-flex">
11+
<i class="success-icon"></i>
12+
<div>
13+
<p>Success! This rider can now use their contactless card to automatically receive a reduced fare when they tap-to-ride.</p>
1914

20-
{% if enrollment.supports_expiration %}
21-
<p>
22-
<span class="fw-bold my-3">This rider will enjoy a transit benefit until {{ enrollment.expires|date }}.</span> They will need to enroll again at that time to continue receiving reduced fares.
23-
</p>
24-
{% endif %}
25-
</div>
26-
</div>
27-
<div class="row">
28-
<div class="col-6">
29-
{% url routes.IN_PERSON_ELIGIBILITY as url_eligibility %}
30-
<a href="{{ url_eligibility }}" class="btn btn-lg btn-outline-primary d-block">New enrollment</a>
31-
</div>
32-
<div class="col-6">
33-
{% url routes.ADMIN_INDEX as url_done %}
34-
<a href="{{ url_done }}" class="btn btn-lg btn-primary d-block">Done</a>
35-
</div>
36-
</div>
15+
{% if enrollment.supports_expiration %}
16+
<p>
17+
<span class="fw-bold my-3">This rider will enjoy a transit benefit until {{ enrollment.expires|date }}.</span> They will need to enroll again at that time to continue receiving reduced fares.
18+
</p>
19+
{% endif %}
20+
</div>
21+
</div>
22+
<div class="row">
23+
<div class="col-6">
24+
{% url routes.IN_PERSON_ELIGIBILITY as url_eligibility %}
25+
<a href="{{ url_eligibility }}" class="btn btn-lg btn-outline-primary d-block">New enrollment</a>
26+
</div>
27+
<div class="col-6">
28+
{% url routes.ADMIN_INDEX as url_done %}
29+
<a href="{{ url_done }}" class="btn btn-lg btn-primary d-block">Done</a>
3730
</div>
3831
</div>
3932
</div>
40-
{% endblock content %}
33+
{% endblock flow-content %}

‎benefits/in_person/templates/in_person/error-base.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{% extends "admin/flow-base.html" %}
2+
{% load static %}
3+
4+
{% block title %}
5+
{{ title }}
6+
{% endblock title %}
7+
8+
{% block flow-content %}
9+
<div class="p-3 min-vh-60 d-flex flex-column justify-content-between">
10+
<div class="d-flex">
11+
<i class="error-icon"></i>
12+
<div class="mt-lg-3">
13+
{% block error-message %}
14+
{% endblock error-message %}
15+
</div>
16+
</div>
17+
<div class="row">
18+
{% block cta-buttons %}
19+
{% endblock cta-buttons %}
20+
</div>
21+
</div>
22+
{% endblock flow-content %}

‎benefits/static/css/admin/styles.css

+4
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ html[data-theme="light"],
99
--link-fg: #ffffff;
1010
--body-quiet-color: var(--dark-color);
1111
--button-bg: #ffffff;
12+
--bs-secondary-bg-subtle: #f1f1f1; /* Background color for Admin, lighter than bs-secondary, used with bg-secondary-subtle */
13+
--bs-secondary-rgb:
14+
197, 196, 196; /* Border color for Admin, used with border-secondary */
15+
--bs-secondary: #c5c4c4;
1216
}
1317

1418
/* Buttons */

‎benefits/templates/admin/agency-dashboard-index.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,25 @@
77

88
{% block content %}
99
<div class="row">
10-
<div class="col-lg-12">
10+
<div class="col-lg-7">
1111
<h1 class="pt-0 pb-3 text-start">{{ agency.long_name }}</h1>
1212
{% if has_permission_for_in_person %}
13-
<div class="border border-3 p-3">
13+
<div class="bg-white border border-1 border-secondary p-3">
1414
<h2 class="pt-0 pb-2 text-start">In-person enrollment</h2>
1515
<p>Verify transit benefit eligibility using agency criteria and complete a rider’s open-loop card enrollment.</p>
1616
{% url routes.IN_PERSON_ELIGIBILITY as url_eligibility %}
1717
<div class="row pt-4">
18-
<div class="col-lg-2">
18+
<div class="col-lg-6">
1919
<a href="{{ url_eligibility }}" class="btn btn-lg btn-primary d-block">New enrollment</a>
2020
</div>
2121
</div>
2222
</div>
2323
{% if transit_processor_portal_url %}
24-
<div class="border border-3 p-3 mt-4">
24+
<div class="bg-white border border-1 border-secondary p-3 mt-4">
2525
<h2 class="pt-0 pb-2 text-start">Transit Processor</h2>
2626
<p>Manage fare-calculation, view rider transactions, and process refunds.</p>
2727
<div class="row pt-4">
28-
<div class="col-lg-3">
28+
<div class="col-lg-6">
2929
<a href="{{ transit_processor_portal_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-lg btn-outline-primary">Launch Littlepay Control Portal</a>
3030
</div>
3131
</div>

‎benefits/templates/admin/flow-base.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{% extends "admin/agency-base.html" %}
2+
3+
{% block title %}
4+
{{ title }}
5+
{% endblock title %}
6+
7+
{% block bodyclass %}
8+
{{ block.super }} bg-secondary-subtle
9+
{% endblock bodyclass %}
10+
11+
{% block content %}
12+
<div class="row">
13+
<div class="bg-white offset-lg-3 col-lg-5 border border-1 border-secondary px-0">
14+
<div class="border border-1 border-top-0 border-start-0 border-end-0 border-secondary">
15+
<h2 class="p-3 m-0 text-start">In-person enrollment</h2>
16+
</div>
17+
{% block flow-content %}
18+
{% endblock flow-content %}
19+
</div>
20+
</div>
21+
{% endblock content %}

‎benefits/templates/admin/login.html

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{% extends "admin/login.html" %}
22
{% load i18n static %}
33

4+
{% block bodyclass %}
5+
{{ block.super }} bg-secondary-subtle
6+
{% endblock bodyclass %}
7+
48
{% block dark-mode-vars %}
59
{% endblock dark-mode-vars %}
610

0 commit comments

Comments
 (0)