Skip to content

Commit df36edb

Browse files
bnmnetpclaude
bnmnetp
and
claude
committed
refactor: extract embedded CSS/JS from auth pages; delete dead manage_tas
- New staticAssets/css/auth.css consolidates the style blocks from _auth_base.html and six auth pages: shared auth card (with wide/full width variants), btn-rs-primary/secondary, section headings, and auth-links, plus page-scoped rules for profile/courses/my_courses/donate - Course picker and PayPal button logic move to js/auth/courses.js and js/auth/donate.js - Delete admin/instructor/manage_tas.html and its JS: no route renders it (superseded by add_instructor) and nothing links to it; drop its ta-management/instructions rules from admin.css Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LFLtaVStyfvhuXsTtkHztA
1 parent 2751ec8 commit df36edb

12 files changed

Lines changed: 461 additions & 617 deletions

File tree

‎components/rsptx/templates/admin/auth/_auth_base.html‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,7 @@
77
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" />
88
<link rel="stylesheet" href="/staticAssets/css/rs-core.css" />
99
<link href="/staticAssets/main.css" rel="stylesheet" media="screen" />
10-
<style>
11-
.auth-card {
12-
max-width: 520px;
13-
margin: 60px auto;
14-
padding: 36px;
15-
background: #fff;
16-
border-radius: 8px;
17-
box-shadow: 0 2px 10px rgba(0,0,0,0.10);
18-
}
19-
.auth-card h1 {
20-
color: #4a90e2;
21-
font-size: 2em;
22-
font-weight: 300;
23-
margin-bottom: 24px;
24-
text-align: center;
25-
}
26-
.auth-card .form-group label { font-weight: 500; }
27-
.btn-rs-primary {
28-
background: #4a90e2;
29-
color: white;
30-
border: none;
31-
padding: 10px 28px;
32-
border-radius: 6px;
33-
font-size: 16px;
34-
font-weight: 600;
35-
cursor: pointer;
36-
width: 100%;
37-
margin-top: 8px;
38-
}
39-
.btn-rs-primary:hover { background: #357abd; color: white; }
40-
.auth-links { text-align: center; margin-top: 16px; font-size: 0.92em; }
41-
.auth-links a { color: #4a90e2; }
42-
</style>
10+
<link href="/staticAssets/css/auth.css" rel="stylesheet" media="screen" />
4311
{% block css %}{% endblock %}
4412
</head>
4513
<body>

‎components/rsptx/templates/admin/auth/courses.html‎

Lines changed: 2 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,8 @@
22

33
{% block title %}Choose a Course — Runestone Academy{% endblock %}
44

5-
{% block css %}
6-
<style>
7-
.courses-container {
8-
max-width: 780px;
9-
margin: 40px auto;
10-
padding: 36px;
11-
background: #fff;
12-
border-radius: 8px;
13-
box-shadow: 0 2px 10px rgba(0,0,0,0.10);
14-
}
15-
.courses-container h1 {
16-
color: #4a90e2;
17-
font-size: 2em;
18-
font-weight: 300;
19-
margin-bottom: 8px;
20-
}
21-
.section-title {
22-
color: #4a90e2;
23-
font-size: 1.1em;
24-
font-weight: 600;
25-
margin-top: 28px;
26-
margin-bottom: 10px;
27-
border-bottom: 1px solid #c8dff5;
28-
padding-bottom: 4px;
29-
}
30-
.course-option {
31-
padding: 6px 0;
32-
}
33-
.course-option label {
34-
font-weight: normal;
35-
cursor: pointer;
36-
margin-bottom: 0;
37-
}
38-
#bookFilter {
39-
margin-bottom: 12px;
40-
}
41-
.btn-rs-primary {
42-
background: #4a90e2;
43-
color: white;
44-
border: none;
45-
padding: 10px 28px;
46-
border-radius: 6px;
47-
font-size: 16px;
48-
font-weight: 600;
49-
cursor: pointer;
50-
margin-top: 16px;
51-
}
52-
.btn-rs-primary:hover { background: #357abd; color: white; }
53-
</style>
54-
{% endblock %}
55-
565
{% block content %}
57-
<div class="courses-container">
6+
<div class="auth-card auth-card--full courses-page">
587
<h1>Choose Your Course</h1>
598
<p class="text-muted">Select a course to enroll in, or type a course name directly if you already know it.</p>
609

@@ -119,37 +68,5 @@ <h1>Choose Your Course</h1>
11968
{% endblock %}
12069

12170
{% block js %}
122-
<script>
123-
function selectDirect(val) {
124-
// Clear all radio selections and use the typed value
125-
document.querySelectorAll('input[name="course_name"]').forEach(r => r.checked = false);
126-
// Store in a hidden field — swap the name on submit
127-
document.getElementById('direct_course').dataset.value = val;
128-
}
129-
130-
document.getElementById('coursesForm').addEventListener('submit', function(e) {
131-
const direct = document.getElementById('direct_course').value.trim();
132-
const selected = document.querySelector('input[name="course_name"]:checked');
133-
if (direct && !selected) {
134-
// inject a hidden input so the direct value is submitted
135-
const h = document.createElement('input');
136-
h.type = 'hidden';
137-
h.name = 'course_name';
138-
h.value = direct;
139-
this.appendChild(h);
140-
} else if (!selected && !direct) {
141-
e.preventDefault();
142-
alert('Please select a course or type a course name.');
143-
}
144-
});
145-
146-
document.getElementById('bookFilter').addEventListener('input', function() {
147-
const filter = this.value.trim().toLowerCase();
148-
document.querySelectorAll('#bookList .book-entry').forEach(function(entry) {
149-
const title = entry.dataset.title || '';
150-
const authors = entry.dataset.authors || '';
151-
entry.style.display = (title.includes(filter) || authors.includes(filter)) ? '' : 'none';
152-
});
153-
});
154-
</script>
71+
<script src="/staticAssets/js/auth/courses.js"></script>
15572
{% endblock %}

‎components/rsptx/templates/admin/auth/donate.html‎

Lines changed: 4 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,8 @@
22

33
{% block title %}Support Runestone Academy{% endblock %}
44

5-
{% block css %}
6-
<style>
7-
.donate-card { max-width: 640px; }
8-
.donate-card h1 { text-align: left; }
9-
.donate-intro { font-size: 1.05em; }
10-
.donate-intro img { vertical-align: middle; margin-right: 6px; }
11-
.amount-panel {
12-
border: 1px solid #c8dff5;
13-
border-radius: 8px;
14-
margin-top: 20px;
15-
}
16-
.amount-panel-heading {
17-
background: #4a90e2;
18-
color: #fff;
19-
font-weight: 600;
20-
padding: 10px 16px;
21-
border-radius: 8px 8px 0 0;
22-
}
23-
.amount-panel-body { padding: 16px; }
24-
.amount-option { margin-bottom: 8px; }
25-
.amount-option label { font-weight: 500; margin-left: 6px; }
26-
.donate-note {
27-
margin-left: 16px;
28-
padding: 6px 12px;
29-
border: 1px solid #4a90e2;
30-
border-radius: 10px;
31-
font-size: 0.9em;
32-
color: #357abd;
33-
}
34-
.other-amount input { width: 120px; display: inline-block; }
35-
.btn-rs-secondary {
36-
background: transparent;
37-
color: #4a90e2;
38-
border: 2px solid #4a90e2;
39-
padding: 8px 18px;
40-
border-radius: 6px;
41-
font-weight: 600;
42-
cursor: pointer;
43-
text-decoration: none;
44-
}
45-
.btn-rs-secondary:hover { background: #f0f7ff; color: #357abd; }
46-
#paypal-button-container { max-width: 640px; margin: 20px auto 0; }
47-
.payment-note { color: #666; font-style: italic; margin-top: 18px; }
48-
.venmo-qr { display: block; margin: 16px auto 0; max-width: 220px; }
49-
</style>
50-
{% endblock %}
51-
525
{% block content %}
53-
<div class="auth-card donate-card">
6+
<div class="auth-card auth-card--wide donate-card">
547
<h1>Support Runestone Academy</h1>
558

569
<p class="donate-intro">
@@ -89,9 +42,8 @@ <h1>Support Runestone Academy</h1>
8942
Other: <input type="text" class="form-control" name="donate" id="donateother" value=""/>
9043
Anything more than $1 is appreciated.
9144
</div>
92-
<div style="margin-top: 15px;">
93-
<a class="btn btn-rs-secondary" href="/ns/course/index" role="button"
94-
style="width:auto; display:inline-block;">Sorry, not Today</a>
45+
<div class="donate-actions">
46+
<a class="btn-rs-secondary" href="/ns/course/index" role="button">Sorry, not Today</a>
9547
</div>
9648
</div>
9749
</div>
@@ -106,92 +58,5 @@ <h1>Support Runestone Academy</h1>
10658

10759
<script src="https://www.paypal.com/sdk/js?client-id=ASkp77N-Kiw5GKOF_0I13P0GCW6lrnaukdVqeFykz7zBT9F-WXHRIisBsau5VEmC-vCKCzt--41kaOjb&currency=USD&intent=capture&enable-funding=venmo"></script>
10860

109-
<script>
110-
const fundingSources = [
111-
paypal.FUNDING.PAYPAL,
112-
paypal.FUNDING.VENMO,
113-
paypal.FUNDING.CARD
114-
];
115-
116-
for (const fundingSource of fundingSources) {
117-
const paypalButtonsComponent = paypal.Buttons({
118-
fundingSource: fundingSource,
119-
120-
// optional styling for buttons
121-
// https://developer.paypal.com/docs/checkout/standard/customize/buttons-style-guide/
122-
style: {
123-
shape: 'rect',
124-
height: 40,
125-
},
126-
127-
// set up the transaction
128-
createOrder: (data, actions) => {
129-
var amt_opts = document.getElementsByName("donate");
130-
var amt = "";
131-
for (let rb of amt_opts) {
132-
if (rb.type === "radio" && rb.checked) {
133-
amt = rb.value;
134-
}
135-
}
136-
if (amt === "") {
137-
amt = document.getElementById("donateother").value;
138-
let amtFloat = parseFloat(amt);
139-
// amounts under a dollar are not worth processing
140-
if (isNaN(amtFloat) || amtFloat < 1.0) {
141-
alert("Sorry we cannot accept donations under $1");
142-
return;
143-
}
144-
}
145-
const createOrderPayload = {
146-
purchase_units: [
147-
{
148-
amount: {
149-
value: amt,
150-
},
151-
},
152-
],
153-
};
154-
155-
return actions.order.create(createOrderPayload);
156-
},
157-
158-
// finalize the transaction
159-
onApprove: (data, actions) => {
160-
const captureOrderHandler = (details) => {
161-
fetch("/admin/auth/donate/mark", { method: "POST" });
162-
alert('Payment successful - Thank you! ');
163-
window.location.href = "/ns/course/index";
164-
console.log('Transaction completed!');
165-
};
166-
167-
return actions.order.capture().then(captureOrderHandler);
168-
},
169-
170-
// handle unrecoverable errors
171-
onError: (err) => {
172-
console.error('An error prevented the buyer from checking out with PayPal');
173-
},
174-
});
175-
176-
if (paypalButtonsComponent.isEligible()) {
177-
paypalButtonsComponent
178-
.render('#paypal-button-container')
179-
.catch((err) => {
180-
console.error('PayPal Buttons failed to render');
181-
});
182-
} else {
183-
console.log('The funding source is ineligible');
184-
}
185-
}
186-
187-
// Pre-select an amount if provided as ?amt=NN
188-
document.addEventListener("DOMContentLoaded", function () {
189-
const params = new URLSearchParams(window.location.search);
190-
const amt = params.get("amt");
191-
if (amt) {
192-
const btn = document.getElementById("donate" + amt);
193-
if (btn) { btn.checked = true; }
194-
}
195-
});
196-
</script>
61+
<script src="/staticAssets/js/auth/donate.js"></script>
19762
{% endblock %}

0 commit comments

Comments
 (0)