Skip to content

Commit 22456a0

Browse files
hmillersarahhmillersarah
committed
add live course content
1 parent 0e7240c commit 22456a0

5 files changed

Lines changed: 95 additions & 25 deletions

File tree

‎ims-education.html‎

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -674,26 +674,53 @@ <h1>IMS courses</h1>
674674
<!-- =========================== Courses - Instructor-led =========================== -->
675675
<section id="live" class="white-bg card-section">
676676
<div><h2>Instructor-led</h2></div>
677-
<p>No instructor-led courses are currently available for enrollment. Please check back to see if new courses are available.</p>
677+
<!-- <p>No instructor-led courses are currently available for enrollment. Please check back to see if new courses are available.</p> -->
678+
<p>For more information about the live class format, see the upcoming events on the <a href="https://community.ibm.com/community/user/ibmz-and-linuxone/groups/public?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560">IMS community page.</a></p>
678679

679-
<!-- EX: IMS Fundamentals -->
680+
<!-- IMS Fundamentals, April Session -->
680681
<course-card
681-
id="ims-fundamentals"
682-
name="IMS Fundamentals"
683-
desc="Learn about the main components of IBM IMS: IMS Database Manager (IMS DB),
684-
IMS Transaction Manager (IMS TM), and common system services for IMS DB and
685-
IMS TM. Learn how these components work and interact with applications, how
686-
IMS databases differ from each other and differ from relational databases
687-
message types, security, maintenance, troubleshooting, and more."
688-
imgsrc="wp-content/icons/icon_education.svg"
689-
selfpaced="false"
690-
level="Beginner"
691-
cost="None"
692-
badge="Yes"
693-
time="32 hours"
694-
link="https://learn.ibm.com/course/view.php?id=8829"
695-
>
696-
</course-card>
682+
id="ims-fundamentals"
683+
name="IMS Fundamentals"
684+
session="April 2025 session"
685+
desc="Learn about the main components of IBM IMS: IMS Database Manager (IMS DB),
686+
IMS Transaction Manager (IMS TM), and common system services for IMS DB and
687+
IMS TM. Learn how these components work and interact with applications, how
688+
IMS databases differ from each other and differ from relational databases
689+
message types, security, maintenance, troubleshooting, and more."
690+
imgsrc="wp-content/icons/icon_education.svg"
691+
selfpaced="false"
692+
level="Beginner"
693+
cost="None"
694+
badge="Yes"
695+
time="32 hours"
696+
start="Apr 22, 2025 08:00 AM (CT)"
697+
end="Apr 30, 2025 01:00 PM (CT)"
698+
link="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html"
699+
>
700+
</course-card>
701+
702+
<!-- IMS Fundamentals, April Session -->
703+
<course-card
704+
id="ims-fundamentals"
705+
name="IMS Fundamentals"
706+
session="May 2025 session"
707+
desc="Learn about the main components of IBM IMS: IMS Database Manager (IMS DB),
708+
IMS Transaction Manager (IMS TM), and common system services for IMS DB and
709+
IMS TM. Learn how these components work and interact with applications, how
710+
IMS databases differ from each other and differ from relational databases
711+
message types, security, maintenance, troubleshooting, and more."
712+
imgsrc="wp-content/icons/icon_education.svg"
713+
selfpaced="false"
714+
level="Beginner"
715+
cost="None"
716+
badge="Yes"
717+
time="32 hours"
718+
start="May 6, 2025 09:00 PM (CT)"
719+
end="May 15, 2025 02:00 AM (CT)"
720+
link="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html"
721+
>
722+
</course-card>
723+
697724
</section>
698725

699726
<!-- =========================== FAQ =========================== -->

‎web-components/course-card/course-card.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ h2 {
55
margin: 0em;
66
}
77

8+
h3 {
9+
font-weight: 400;
10+
font-size: 1.375em;
11+
padding: 0em;
12+
margin: 0em;
13+
}
14+
815
p {
916
font-size: 1.125em;
1017
}

‎web-components/course-card/course-card.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,22 @@
77
<div>
88
<div>
99
<h2 class="course-name"></h2>
10+
<h3 class="live-session"></h3>
1011
<p class="course-desc"></p>
1112
<div class="column-g">
1213
<div class="inline-g">
1314
<p><b><span class="course-type"></span></b> Yes</p>
1415
<p><b>Level: </b><span class="course-level"></span></p>
1516
<p><b>Cost: </b><span class="course-cost"></span></p>
1617
<p><b>Badge: </b><span class="course-badge"></span></p>
17-
<p><b>Time: </b><span class="course-time"></span></p>
18+
<p class="course-time-g"><b>Time: </b><span class="course-time"></span></p>
19+
<p class="course-start-g"><b>Starts: </b><span class="course-start"></span></p>
20+
<p class="course-end-g"><b>Ends: </b><span class="course-end"></span></p>
1821
</div>
1922
</div>
2023
</div>
2124
<div class="link-g">
22-
<a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
25+
<a class="course-link" target="_blank" rel="noopener noreferrer"></a>
2326
</div>
2427
</div>
2528
</div>

‎web-components/course-card/course-card.js‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,16 @@ function createComponent(html) {
1111
selector.textContent = content;
1212
}
1313

14-
function setLink(cssSelector, url, name, shadow) {
14+
function setLink(cssSelector, url, name, linkText, shadow) {
1515
const link = shadow.querySelector(cssSelector);
1616
link.href = url;
1717
link.setAttribute('aria-label', `Learn more about ${name}`);
18+
link.textContent = linkText;
19+
}
20+
21+
function hideContent(cssSelector, shadow) {
22+
const selector = shadow.querySelector(cssSelector);
23+
selector.style.display = 'none';
1824
}
1925

2026
// Web component class
@@ -28,7 +34,7 @@ function createComponent(html) {
2834

2935
// Return array of properties to observe
3036
static get observedAttributes() {
31-
return ['name', 'desc', 'imgsrc', 'selfpaced', 'level', 'cost', 'badge', 'time', 'link'];
37+
return ['name', 'session', 'desc', 'imgsrc', 'selfpaced', 'level', 'cost', 'badge', 'time', 'start', 'end', 'link'];
3238
}
3339

3440
// Called when an attribute is defined or changed
@@ -54,6 +60,8 @@ function createComponent(html) {
5460

5561
// Set course name
5662
setContent('.course-name', this.name, shadow);
63+
// Set session for live course
64+
setContent('.live-session', this.session, shadow);
5765
// Set course desc
5866
setContent('.course-desc', this.desc, shadow);
5967
// Set course level
@@ -65,10 +73,30 @@ function createComponent(html) {
6573
setContent('.course-cost', this.cost, shadow);
6674
// Set course badge
6775
setContent('.course-badge', this.badge, shadow);
68-
// Set course time
69-
setContent('.course-time', this.time, shadow);
76+
77+
var linkText;
78+
// Change card content based on self-paced vs live course
79+
if (this.selfpaced == 'true') {
80+
// Set course time
81+
setContent('.course-time', this.time, shadow);
82+
// Hide course duration
83+
hideContent('.course-start-g', shadow);
84+
hideContent('.course-end-g', shadow);
85+
// Update link text
86+
linkText = 'Learn more →'
87+
} else {
88+
// Set course duration
89+
setContent('.course-start', this.start, shadow);
90+
setContent('.course-end', this.end, shadow);
91+
// Hide course time
92+
hideContent('.course-time-g', shadow);
93+
// Update link text
94+
linkText = 'Register →'
95+
}
96+
7097
// Set course link
71-
setLink('.course-link', this.link, this.name, shadow);
98+
setLink('.course-link', this.link, this.name, linkText, shadow);
99+
72100
}
73101
}
74102

‎wp-includes/css/page.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@
6565

6666
.white-bg {
6767
background-color: var(--white);
68+
color: var(black);
69+
}
70+
71+
.white-bg a {
72+
color: var(--blue);
6873
}
6974

7075
.white-bg h3, .white-bg h4 {

0 commit comments

Comments
 (0)