Skip to content

Commit 30088df

Browse files
hmillersarahhmillersarah
authored
Merge pull request #76 from imsdev/75-responsive-videos-page
Responsive videos page
2 parents 5415442 + a2166cc commit 30088df

6 files changed

Lines changed: 136 additions & 81 deletions

File tree

‎ims-education.html‎

Lines changed: 12 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646
<!-- Custom CSS -->
4747
<link rel="stylesheet" href="wp-includes/css/dropnav.css">
4848
<link rel="stylesheet" href="wp-includes/css/page.css">
49-
<link rel="stylesheet" href="wp-includes/css/components/anchor-links.css">
5049

5150
<!-- Hotjar Tracking Code for ibm.com/demos & githhub -->
5251
<script>
@@ -72,6 +71,7 @@
7271
<!-- Web components -->
7372
<script src="web-components/nav-header/nav-header.js" type="module"></script>
7473
<script src="web-components/hero-section/hero-section.js" type="module"></script>
74+
<script src="web-components/jump-links/jump-links.js" type="module"></script>
7575
<script src="web-components/course-card/course-card.js" type="module"></script>
7676
<script src="web-components/footer/footer.js" type="module"></script>
7777
</head>
@@ -93,42 +93,13 @@
9393
highlightlink="#ims-security"
9494
></hero-section>
9595

96-
<!-- =========================== Anchor links =========================== -->
97-
<div class="anchor-links pure-g white-bg">
98-
<ul class="pure-u-1">
99-
<li>
100-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
101-
<a href="#all">All roles</a>
102-
</li>
103-
<li>
104-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
105-
<a href="#imsdb">IMS database</a>
106-
</li>
107-
<li>
108-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
109-
<a href="#sysprog">System programming</a>
110-
</li>
111-
<li>
112-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
113-
<a href="#appdev">Application development</a>
114-
</li>
115-
<li>
116-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
117-
<a href="#live">Instructor-led</a>
118-
</li>
119-
<li>
120-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
121-
<a href="#faq">FAQs</a>
122-
</li>
123-
<li>
124-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
125-
<a href="#support">Support</a>
126-
</li>
127-
</ul>
128-
</div>
96+
<!-- =========================== Jump links =========================== -->
97+
<jump-links
98+
links="All roles, IMS database, System programming, Application development, Instructor-led, FAQs, Support"
99+
></jump-links>
129100

130101
<!-- =========================== Courses - all roles =========================== -->
131-
<section id="all" class="white-bg card-section">
102+
<section id="all-roles" class="white-bg card-section">
132103
<div class="card-section-header"><h2>All roles</h2></div>
133104
<!-- IMS Fundamentals -->
134105
<course-card
@@ -168,7 +139,7 @@
168139
</section>
169140

170141
<!-- =========================== Courses - IMS database =========================== -->
171-
<section id="imsdb" class="white-bg card-section">
142+
<section id="ims-database" class="white-bg card-section">
172143
<div class="card-section-header"><h2>IMS database</h2></div>
173144
<!-- Logical Relationships -->
174145
<course-card
@@ -344,7 +315,7 @@
344315
</section>
345316

346317
<!-- =========================== Courses - System programming =========================== -->
347-
<section id="sysprog" class="white-bg card-section">
318+
<section id="system-programming" class="white-bg card-section">
348319
<div class="card-section-header"><h2>System programming</h2></div>
349320
<!-- IMS security -->
350321
<course-card
@@ -460,7 +431,7 @@
460431
</section>
461432

462433
<!-- =========================== Courses - Application development =========================== -->
463-
<section id="appdev" class="white-bg card-section">
434+
<section id="application-development" class="white-bg card-section">
464435
<div><h2>Application development</h2></div>
465436
<!-- TM Application Programming -->
466437
<course-card
@@ -502,14 +473,14 @@
502473
</section>
503474

504475
<!-- =========================== Courses - Instructor-led =========================== -->
505-
<section id="live" class="white-bg card-section">
476+
<section id="instructor-led" class="white-bg card-section">
506477
<div><h2>Instructor-led</h2></div>
507478
<!-- <p>No instructor-led classes are scheduled at this time. Please check back in the coming weeks for class offerings.</p> -->
508479
<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" target="_blank" rel="noopener noreferrer">IMS community page.</a></p>
509480

510481
<!-- IMS Fundamentals, April Session -->
511482
<course-card
512-
id="ims-fundamentals-april-2025"
483+
id="ims-dbrc-jun-2025"
513484
name="IMS Database Recovery Control (DBRC)"
514485
session="June 2025 session"
515486
desc="<p>This live course runs for 9 sessions, 4 hours each day. It describes the benefits of DBRC and the
@@ -532,7 +503,7 @@
532503
</section>
533504

534505
<!-- =========================== FAQs =========================== -->
535-
<section id="faq" class="light-gray-bg pure-g">
506+
<section id="faqs" class="light-gray-bg pure-g">
536507
<div class="pure-u-1 pure-u-md-1-4 section-header">
537508
<h2>Frequently asked questions</h2>
538509
</div>

‎ims-videos.html‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
<!-- Web components -->
8080
<script src="web-components/nav-header/nav-header.js" type="module"></script>
8181
<script src="web-components/hero-section/hero-section.js" type="module"></script>
82+
<script src="web-components/jump-links/jump-links.js" type="module"></script>
8283
<script src="web-components/video-card/video-card.js" type="module"></script>
8384
<script src="web-components/footer/footer.js" type="module"></script>
8485
</head>
@@ -95,29 +96,18 @@
9596
name="IMS videos"
9697
image="wp-content/icons/icon_video.svg"
9798
section="Learn"
98-
desc="<p>See the latest IMS educational videos here or click <b>Visit IBM MediaCenter</b> to search for more IMS video content.</p>"
99+
desc="<p>See the latest IMS educational videos here or visit <b>IBM MediaCenter</b> to search for more IMS video content.</p>"
99100
linktext="Visit IBM MediaCenter →"
100101
link="https://mediacenter.ibm.com/channel/IMS%2BEducational%2BVideos/122579632"
101102
></hero-section>
102103

103-
<!-- =========================== Filter =========================== -->
104-
<!-- remember, the behaviour is that clicking pulls you to the anchors -->
105-
<div class="zs-section filter-sec" id="anchor-link-menu">
106-
<div class="pure-g">
107-
<!-- Filter list -->
108-
<div class="ibm-sitenav-menu-list" id="anchor-link-menu-items">
109-
<ul class="menu">
110-
<li><a href="#all">All roles</a></li>
111-
<li><a href="#imsdb">IMS database</a></li>
112-
<li><a href="#sysprog">System programming</a></li>
113-
<li><a href="#appdev">Application development</a></li>
114-
</ul>
115-
</div>
116-
</div>
117-
</div>
104+
<!-- =========================== Jump links =========================== -->
105+
<jump-links
106+
links="All roles, IMS database, System programming, Application development"
107+
></jump-links>
118108

119109
<!-- =========================== Videos - all roles =========================== -->
120-
<section id="all" class="white-bg pure-g card-section">
110+
<section id="all-roles" class="white-bg pure-g card-section">
121111
<div class="pure-u-1 card-section-header"><h3>All roles</h3></div>
122112
<!-- IMS Community Calls -->
123113
<video-card
@@ -177,7 +167,7 @@
177167
</section>
178168

179169
<!-- =========================== Videos - database =========================== -->
180-
<section id="imsdb" class="white-bg pure-g card-section">
170+
<section id="ims-database" class="white-bg pure-g card-section">
181171
<div class="pure-u-1 card-section-header"><h3>IMS database</h3></div>
182172
<!-- IMS MACB -->
183173
<video-card
@@ -260,7 +250,7 @@
260250
</section>
261251

262252
<!-- =========================== Videos - system programming =========================== -->
263-
<section id="sysprog" class="white-bg pure-g card-section">
253+
<section id="system-programming" class="white-bg pure-g card-section">
264254
<div class="pure-u-1 card-section-header"><h3>System programming</h3></div>
265255
<!-- IMS DBDGEN and PSBGEN for Beginners -->
266256
<video-card
@@ -340,7 +330,7 @@
340330
</section>
341331

342332
<!-- =========================== Videos - system programming =========================== -->
343-
<section id="appdev" class="white-bg pure-g card-section">
333+
<section id="application-development" class="white-bg pure-g card-section">
344334
<div class="pure-u-1 card-section-header"><h3>Application development</h3></div>
345335
<!-- IMS Java Demos -->
346336
<video-card

‎jekyll-tipue-search/assets/tipuesearch/tipuesearch_content.js‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -265,14 +265,9 @@ var tipuesearch = {"pages": [{
265265
"tags": "learn courses badges ims_fast_path system_admin dbctl cics expedited_message_handler emh ifp_region psbs input_edit routing_exit dbfhagu0 dedb data_entry_database partitioning sequential_dependents sdep_segment ci_format msdb main_storage_databases msdb_pcbs msdb_locking msdb_utilities virtual_storage_option vso multiple_area_data_sets mads dedb_secondary_index dedb_alter_utility automatic_sdep_buffer_management buffer_management locking deadlock_detection logical_logging physical_logging commit_processing output_thread_processing high_speed_reorganization sequential_processing sysplex_data_sharing cache_structures private_buffer_pools shared_vso shared_emh dbds psbs dedb_randomizer dedb_utilities system_generation emergency_restart irlm_reconnection field_calls fld setr hssp bmp_checkpoint",
266266
"url": "ims-education.html#ims-fpimpl"
267267
},{
268-
"title": "<p>IMS Fundamentals April 2025 Session</p> <img class=\"search-icon\" aria-label=\"Course\" src=\"wp-content/search_education.svg\"></img>",
269-
"text": "Take this instructor-led class to learn about IMS DB, TM, and core IMS functions.",
270-
"tags": "learn courses badges live instructor class ims_fast_path system_admin dbctl cics expedited_message_handler emh ifp_region psbs input_edit routing_exit dbfhagu0 dedb data_entry_database partitioning sequential_dependents sdep_segment ci_format msdb main_storage_databases msdb_pcbs msdb_locking msdb_utilities virtual_storage_option vso multiple_area_data_sets mads dedb_secondary_index dedb_alter_utility automatic_sdep_buffer_management buffer_management locking deadlock_detection logical_logging physical_logging commit_processing output_thread_processing high_speed_reorganization sequential_processing sysplex_data_sharing cache_structures private_buffer_pools shared_vso shared_emh dbds psbs dedb_randomizer dedb_utilities system_generation emergency_restart irlm_reconnection field_calls fld setr hssp bmp_checkpoint",
271-
"url": "ims-education.html#ims-fundamentals-april-2025"
272-
},{
273-
"title": "<p>IMS Fundamentals May 2025 Session</p> <img class=\"search-icon\" aria-label=\"Course\" src=\"wp-content/search_education.svg\"></img>",
274-
"text": "Take this instructor-led class to learn about IMS DB, TM, and core IMS functions.",
275-
"tags": "learn courses badges live instructor class ims_fast_path system_admin dbctl cics expedited_message_handler emh ifp_region psbs input_edit routing_exit dbfhagu0 dedb data_entry_database partitioning sequential_dependents sdep_segment ci_format msdb main_storage_databases msdb_pcbs msdb_locking msdb_utilities virtual_storage_option vso multiple_area_data_sets mads dedb_secondary_index dedb_alter_utility automatic_sdep_buffer_management buffer_management locking deadlock_detection logical_logging physical_logging commit_processing output_thread_processing high_speed_reorganization sequential_processing sysplex_data_sharing cache_structures private_buffer_pools shared_vso shared_emh dbds psbs dedb_randomizer dedb_utilities system_generation emergency_restart irlm_reconnection field_calls fld setr hssp bmp_checkpoint",
276-
"url": "ims-education.html#ims-fundamentals-may-2025"
268+
"title": "<p>IMS Database Recovery Control (DBRC) June 2025 Session</p> <img class=\"search-icon\" aria-label=\"Course\" src=\"wp-content/search_education.svg\"></img>",
269+
"text": "Take this instructor-led class to learn how to configure, implement, and manage Database Recovery Control (DBRC).",
270+
"tags": "learn courses badges live instructor class recovery db database data_sharing genjcl skeletal_jcl utilities recon database_registration db_registration full-function_registration fast_path_registration haldb_registration batch_logs online_logging",
271+
"url": "ims-education.html#ims-dbrc-jun-2025"
277272
}
278273
]};

wp-includes/css/components/anchor-links.css renamed to web-components/jump-links/jump-links.css

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
1-
.anchor-links {
1+
a, ul, li {
2+
font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
3+
color: black;
4+
font-size: var(--plex-18);
5+
}
6+
7+
a, ul, li {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
.jump-links {
213
padding: 1em 5em 0em 5em;
314
position: sticky;
415
top: 3em;
516
border-bottom: solid lightgray;
17+
background-color: white;
18+
color: black;
619
}
720

8-
.anchor-links ul {
21+
.jump-links ul {
922
display: flex;
1023
flex-flow: row wrap;
1124
column-gap: 3em;
@@ -14,7 +27,7 @@
1427
line-height: 3em;
1528
}
1629

17-
.anchor-links li {
30+
.jump-links li {
1831
font-weight: 500;
1932
font-size: 0.9em;
2033
padding: 0;
@@ -25,45 +38,45 @@
2538
gap: 0.5em;
2639
}
2740

28-
.anchor-links li img {
41+
.jump-links li img {
2942
padding: 0;
3043
margin: 0;
3144
max-height: 2em;
3245
display: none;
3346
}
3447

35-
.anchor-links li:hover {
48+
.jump-links li:hover {
3649
border-color: #0f62fe;
3750
}
3851

39-
.anchor-links li a {
52+
.jump-links li a {
4053
text-decoration: none;
4154
}
4255

4356
@media screen and (max-width: 48em) {
44-
.anchor-links {
57+
.jump-links {
4558
padding: 2em;
4659
position: relative;
4760
top: 0;
4861
}
4962

50-
.anchor-links ul {
63+
.jump-links ul {
5164
display: grid;
5265
grid-template-columns: repeat(2, 1fr);
5366
gap: 1em;
5467
}
5568

56-
.anchor-links li img {
69+
.jump-links li img {
5770
display: block;
5871
}
5972

60-
.anchor-links li:hover {
73+
.jump-links li:hover {
6174
border-color: white;
6275
}
6376
}
6477

6578
@media screen and (max-width: 27em) {
66-
.anchor-links ul {
79+
.jump-links ul {
6780
display: flex;
6881
flex-flow: column wrap;
6982
gap: 0.2em;

‎web-components/jump-links/jump-links.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<link href="web-components/jump-links/jump-links.css" rel="stylesheet">
2+
<link rel="stylesheet" href="wp-includes/css/pure.css">
3+
4+
<div class="jump-links pure-g">
5+
<ul class="list pure-u-1">
6+
</ul>
7+
</div>

‎web-components/jump-links/jump-links.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// Fetch HTML template
2+
fetch("web-components/jump-links/jump-links.html")
3+
.then(stream => stream.text())
4+
.then(text => createComponent(text))
5+
6+
/**
7+
* Creates a web component using a given HTML template.
8+
* @param {string} html - The HTML template.
9+
* @returns {void}
10+
*/
11+
function createComponent(html) {
12+
13+
/**
14+
* Create list item with jump link and add to list
15+
* @param {string} link - The jump link
16+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element
17+
* @returns {void}
18+
*/
19+
function createLink(link, shadow) {
20+
const newListItem = document.createElement('li');
21+
22+
// Add jump link icon
23+
const newImage = document.createElement('img');
24+
newImage.src = "wp-content/icons/icon_jump-link.svg";
25+
newImage.alt = "jump link";
26+
newListItem.appendChild(newImage);
27+
28+
// Add jump link
29+
const newLink = document.createElement('a');
30+
newLink.textContent = link;
31+
const linkSrc = "#" + (link.toLowerCase().replaceAll(' ', '-'));
32+
newLink.href = linkSrc;
33+
newListItem.appendChild(newLink);
34+
35+
// Add new list item to list
36+
const list = shadow.querySelector('.list');
37+
list.appendChild(newListItem);
38+
}
39+
40+
// Web component class
41+
class JumpLinks extends HTMLElement {
42+
43+
/**
44+
* Returns an array of properties to observe.
45+
* @returns {Array} An array of property names.
46+
*/
47+
static get observedAttributes() {
48+
return ['links'];
49+
}
50+
51+
/**
52+
* Called when an attribute is defined or changed.
53+
* @param {string} property - The name of the attribute.
54+
* @param {string} oldValue - The old value of the attribute.
55+
* @param {string} newValue - The new value of the attribute.
56+
*/
57+
attributeChangedCallback(property, oldValue, newValue) {
58+
if (oldValue === newValue) return;
59+
this[property] = newValue;
60+
}
61+
62+
// Invoked when element is added to document
63+
connectedCallback() {
64+
// Create shadow root for element
65+
const shadow = this.attachShadow({mode: 'open'});
66+
shadow.innerHTML = html;
67+
68+
// Create array from link list
69+
const linksArr = (this.links).split(', ');
70+
// Add link to jump link list
71+
linksArr.forEach(link => {
72+
createLink(link, shadow);
73+
});
74+
}
75+
}
76+
77+
// Define new JumpLink element
78+
customElements.define('jump-links', JumpLinks);
79+
}

0 commit comments

Comments
 (0)