Skip to content

Commit 8da8e15

Browse files
luanmeiniubiluanmeiniubi
committed
change spa setting
1 parent 87929a1 commit 8da8e15

4 files changed

Lines changed: 54 additions & 41 deletions

File tree

‎main.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,15 @@ console.log('main.js loaded');
88
const $all = (sel, root = document) => Array.from(root.querySelectorAll(sel));
99
const $ = (sel, root = document) => root.querySelector(sel);
1010

11-
// =============================================================
11+
1212
// Load welcome page by default on first visit
13-
// =============================================================
1413
window.addEventListener("DOMContentLoaded", () => {
1514
const content = document.querySelector(".content");
1615
if (content) {
1716
fetch("pages/introduction/welcome.html")
1817
.then(r => r.text())
1918
.then(html => {
2019
content.innerHTML = html;
21-
// Optionally highlight the matching menu item
2220
const li = document.querySelector('.submenu li[data-page="pages/welcome.html"]');
2321
if (li) {
2422
document.querySelectorAll(".submenu li.selected").forEach(el => el.classList.remove("selected"));
@@ -30,7 +28,6 @@ window.addEventListener("DOMContentLoaded", () => {
3028
});
3129

3230

33-
3431
// clean up badges in the sidebar so text isn’t duplicated in labels
3532
document.querySelectorAll('.submenu .badge').forEach(badge => {
3633
if (!badge.hasAttribute('data-label')) {
@@ -49,14 +46,18 @@ window.addEventListener("DOMContentLoaded", () => {
4946
document.addEventListener('click', function (event) {
5047
const target = event.target.closest('[data-page]');
5148
if (!target) return;
49+
if (target.querySelector('a[href]')) return;
5250
setActiveMenuItem(target);
5351

5452
// Prevent full page reload
5553
event.preventDefault();
5654

5755
const page = target.getAttribute('data-page');
5856
if (!page) return;
59-
57+
58+
history.pushState({ page }, '', `?page=${encodeURIComponent(page)}`);
59+
60+
6061
// Load the HTML into the main content area
6162
fetch(page)
6263
.then(response => response.text())
@@ -191,6 +192,7 @@ document.addEventListener('click', function (event) {
191192
const homeBtn = document.querySelector('.home-btn');
192193
if (homeBtn) {
193194
homeBtn.addEventListener('click', () => {
195+
selectMenuItem(homeBtn);
194196
const li = document.querySelector(`.submenu li[data-page="${HOME_TARGET_PAGE}"]`);
195197
if (!li) return console.warn('Home target not found:', HOME_TARGET_PAGE);
196198

‎pages/set-up-your-course/create-a-new-project.html‎

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,26 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
6+
7+
<!-- Existing site styles (includes .video-container, .title-bar, .page-content) -->
78
<link rel="stylesheet" href="./style.css" />
8-
<link rel="icon" href="data:,">
99

10-
<style>
11-
.enhanced-video {
12-
padding: 24px 0 32px;
13-
margin-bottom: 32px;
14-
border-radius: 12px;
15-
}
16-
17-
.title-bar {
18-
font-size: 1.3rem;
19-
font-weight: 600;
20-
padding: 12px 20px;
21-
margin-bottom: 16px;
22-
}
23-
</style>
10+
<!-- Optional: silence favicon 404 in dev -->
11+
<link rel="icon" href="data:,">
2412
</head>
25-
2613
<body>
2714

28-
<div class="video-container enhanced-video">
29-
30-
<div class="title-bar">
31-
Create a New Project
32-
</div>
33-
15+
<div class="video-container">
3416
<video
3517
controls
3618
preload="metadata"
3719
playsinline
38-
style="
39-
width:100%;
40-
height:auto;
41-
display:block;
42-
background:#000;
43-
border-radius:12px;
44-
border:1px solid var(--border);
45-
box-shadow:var(--shadow);
46-
"
47-
>
20+
style="width:100%;height:auto;display:block;background:#000;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);"
21+
>
22+
<!-- UPDATE THIS: video file -->
4823
<source src="./assets/videos/set-up-your-course/create-a-new-project.mp4" type="video/mp4" />
4924

25+
<!-- UPDATE THIS: captions file -->
5026
<track
5127
src="./assets/captions/set-up-your-course/create-a-new-project.vtt"
5228
kind="subtitles"
@@ -58,6 +34,11 @@
5834
Your browser does not support the video tag.
5935
</video>
6036

37+
<!-- UPDATE THIS: video title -->
38+
<div class="title-bar">
39+
Create a New Project
40+
</div>
41+
6142
</div>
6243

6344
</body>

‎style.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@
1414
--hover: #f3f4f6;
1515
--radius: 12px;
1616
--shadow: 0 8px 24px rgba(17,24,39,.06);
17+
--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
1718
}
1819

1920
/* Base */
2021
* { box-sizing: border-box; }
21-
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 "Inter","Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
22+
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 "Inter","Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
2223

2324
/* Header */
2425
.header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--border); }
@@ -161,6 +162,15 @@ html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text);
161162
padding-left: 10px;
162163
}
163164

165+
166+
.submenu li .title {
167+
font: inherit;
168+
color: inherit;
169+
font-weight: inherit;
170+
text-decoration: none;
171+
}
172+
173+
164174
.submenu.collapsed { display: none; }
165175
.submenu li {
166176
display: flex;
@@ -182,7 +192,7 @@ html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text);
182192
.submenu li.selected {
183193
background: var(--lilac);
184194
border-color: var(--lilac-border);
185-
color: #3b2c58;
195+
color: #2e175b;
186196
}
187197
.submenu li .badge::after { content: attr(data-label); }
188198
.submenu li .badge { margin-left: 12px; white-space: nowrap; }

‎tutorial-transcript.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
// tutorial-transcript.js
22

3-
window.TUTORIAL_INDEX = [
43

4+
// !!!README:
5+
// This file contains the video transcipt for each tutorial in the tutorial index.
6+
// Each object in the TUTORIAL_INDEX array has a title and a transcript property.
7+
// The title is used to identify the tutorial, and the transcript contains the text to be searched.
8+
9+
10+
window.TUTORIAL_INDEX = [
11+
// ============================
12+
// === Set Up Your Course =====
13+
// ============================
514
{
615
title: "Course Author Page Overview",
716
transcript: "Course Author Page Overview: This is the course author landing page. On the left side, you will see the workspace menu, which confirms that you are logged in as an author. If you ever need to switch roles, you can do so by selecting a different role from this menu. On a course author page, you will find a list of all your projects, also known as courses. From here you can easily access each project. Now, let's get started by creating a new project."
@@ -47,6 +56,11 @@ window.TUTORIAL_INDEX = [
4756
transcript: "Transformation Payment Code: ..."
4857
},
4958

59+
60+
// ============================
61+
// === Develop Your Course ====
62+
// ============================
63+
5064
{
5165
title: "Learning Objectives",
5266
transcript: "Learning Objectives: Objectives will take you to the Learning Objectives page. Learning objectives are the basis of educational data analysis and engineering student success. Refer to the linked CMU Eberly Center guide on learning objectives to understand the importance of attaching objectives to pages and activities. To create a learning objective, click ‘Create New Objective’ here. Enter your text in the dialogue box, then click ‘Create’. Now, you’ll see a list of all your learning objectives displayed here. On the right side, you can track how many pages and activities in your course are using each objective."
@@ -92,4 +106,10 @@ window.TUTORIAL_INDEX = [
92106
transcript: "Add Paragraph: Torus allows you to add multiple kinds of content to a page. When you first enter a new page, you will see the entry box where you will be able to author your content. At the bottom, you will see Insert Content, which is the small plus icon with a line indicating its position. You will always see this button while you edit a page. Above that, you will see the instructions “Type here or use + to begin…” The new page has pre-created a paragraph block to help you begin adding content. In a paragraph block, you can add rich content such as text, images, tables, YouTube, etc. First, of course, you can add text by typing directly. For more options, you can use the menu that appears when you click inside the paragraph block. You can bold and italicize, format your text as code, and add hyperlinks."
93107
}
94108

109+
110+
111+
// ============================
112+
// === Publish Your Course ====
113+
// ============================
114+
95115
];

0 commit comments

Comments
 (0)