Skip to content

Commit a26c9f3

Browse files
hmillersarahhmillersarah
committed
all roles video cards
1 parent 28560a5 commit a26c9f3

3 files changed

Lines changed: 69 additions & 108 deletions

File tree

‎ims-videos.html‎

Lines changed: 48 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,6 @@ <h5>IMS support</h5>
296296

297297
<template id="video-card">
298298
<link href="wp-includes/css/web-components/video-card.css" rel="stylesheet">
299-
<link href="wp-includes/css/page.css" rel="stylesheet">
300299
<div class="video-card">
301300
<div>
302301
<h2 class="video-name"></h2>
@@ -306,8 +305,8 @@ <h2 class="video-name"></h2>
306305
<p><b>Time: </b><span class="video-time"></span></p>
307306
</div>
308307
</div>
309-
<div>
310-
<a class="video-link">Watch now →</a>
308+
<div class="link-g">
309+
<a class="video-link" target="_blank" rel="noopener noreferrer">Watch now →</a>
311310
</div>
312311
</div>
313312
</template>
@@ -361,121 +360,62 @@ <h1>IMS videos</h1>
361360

362361
<h3 id="all" class="video-section-header-first">All roles</h3>
363362

364-
<div class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3">
365-
<video-card
366-
name="Introduction to IMS"
367-
desc="If you're new to IMS, watch these short, high-level videos on IMS,
368-
database, transaction management, and application development."
369-
level="Beginner"
370-
time="1 hour"
371-
link="https://mediacenter.ibm.com/channel/Intro+to+IMS+Series/139456202"
363+
<!-- IMS Community Calls -->
364+
<video-card
365+
name="IMS Community Calls"
366+
desc="These calls cover the latest in what's going on in the world of IMS."
367+
link="https://mediacenter.ibm.com/playlist/dedicated/122579632/1_lgy10u5e/"
368+
id="ims-comm"
369+
class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3"
372370
>
373371
</video-card>
374-
</div>
375-
376-
<!-- IMS Community Calls -->
377-
<div class="pure-u-1 pure-u-lg-1-3">
378-
<div style="position: absolute; margin-top:-60px;" id="ims-comm"></div>
379-
<div class="ims-c-card">
380-
<div class="pure-u-1 pure-u-md-1 ims-c-card-content">
381-
<h3 class="video-card-header">IMS Community Calls</h3>
382-
<p>These calls cover the latest in what's going on in the world of IMS.</p>
383-
<div class="pure-u-1 pure-u-md-1">
384-
<div>
385-
<a alt="IMS Community Calls"
386-
title="IMS Community Calls" target="_blank" rel="noopener noreferrer"
387-
href="https://mediacenter.ibm.com/playlist/dedicated/122579632/1_lgy10u5e/"
388-
class="video-card-link">Watch now →
389-
</a>
390-
</div>
391-
</div>
392-
</div>
393-
</div>
394-
</div>
395372

396373
<!-- IMS Intro -->
397-
<div class="pure-u-1 pure-u-lg-1-3">
398-
<div style="position: absolute; margin-top:-60px;" id="ims-intro"></div>
399-
<div class="ims-c-card">
400-
<div class="pure-u-1 pure-u-md-1 ims-c-card-content">
401-
<h3 class="video-card-header">Introduction to IMS</h3>
402-
<p></p>
403-
<p>If you're new to IMS, watch these short, high-level videos on IMS, database, transaction management, and application development.</p>
404-
<div class="pure-u-1 pure-u-md-1">
405-
<div>
406-
<p>
407-
<b>Level</b>: Beginner
408-
&ensp;
409-
<b>Time</b>: 1 hour
410-
</p>
411-
</div>
412-
<div>
413-
<a alt="Intro to IMS"
414-
title="Intro to IMS" target="_blank" rel="noopener noreferrer"
415-
href="https://mediacenter.ibm.com/channel/Intro+to+IMS+Series/139456202"
416-
class="video-card-link">Watch now →
417-
</a>
418-
</div>
419-
</div>
420-
</div>
421-
</div>
422-
</div>
374+
<video-card
375+
name="Introduction to IMS"
376+
desc="If you're new to IMS, watch these short, high-level videos on IMS,
377+
database, transaction management, and application development."
378+
level="Beginner"
379+
time="1 hour"
380+
link="https://mediacenter.ibm.com/channel/Intro+to+IMS+Series/139456202"
381+
id="ims-intro"
382+
class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3"
383+
>
384+
</video-card>
423385

424386
<!-- IMS Ansible -->
425-
<div class="pure-u-1 pure-u-lg-1-3">
426-
<div style="position: absolute; margin-top:-60px;" id="ims-ansible"></div>
427-
<div class="ims-c-card">
428-
<div class="pure-u-1 pure-u-md-1 ims-c-card-content">
429-
<h3 class="video-card-header">Getting Started with Ansible for IBM Z</h3>
430-
<p>Get an overview of how to set up your Red Hat® Ansible® control node to get started automating processes for IBM Z® with Ansible.</p>
431-
<div class="pure-u-1 pure-u-md-1">
432-
<div>
433-
<p>
434-
<b>Level</b>: Beginner
435-
&ensp;
436-
<b>Time</b>: 6 minutes
437-
</p>
438-
</div>
439-
<div>
440-
<a alt="Ansible for IBM Z"
441-
title="Ansible for IBM Z" target="_blank" rel="noopener noreferrer"
442-
href="https://mediacenter.ibm.com/media/Set%20up%20your%20Ansible%20control%20node%20for%20getting%20started%20with%20Ansible%20for%20IBM%20Z/1_r9g0duq3"
443-
class="video-card-link">Watch now →
444-
</a>
445-
</div>
446-
</div>
447-
</div>
448-
</div>
449-
</div>
387+
<video-card
388+
name="Getting Started with Ansible for IBM Z"
389+
desc="Get an overview of how to set up your Red Hat® Ansible® control node to
390+
get started automating processes for IBM Z® with Ansible."
391+
level="Beginner"
392+
time="6 minutes"
393+
link="https://mediacenter.ibm.com/media/Set%20up%20your%20Ansible%20control%20node%20for%20getting%20started%20with%20Ansible%20for%20IBM%20Z/1_r9g0duq3"
394+
id="ims-ansible"
395+
class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3"
396+
>
397+
</video-card>
450398

451399
<!-- IMS Insights Series -->
452-
<div class="pure-u-1 pure-u-lg-1-3">
453-
<div style="position: absolute; margin-top:-60px;" id="ims-insights"></div>
454-
<div class="ims-c-card">
455-
<div class="pure-u-1 pure-u-md-1 ims-c-card-content">
456-
<h3 class="video-card-header">IMS Insights Series</h3>
457-
<p>These webinars cover timely topics such as new customer perspectives on IMS and managed ACBs.</p>
458-
<div class="pure-u-1 pure-u-md-1">
459-
<div>
460-
<p>
461-
<b>Level</b>: Varies
462-
&ensp;
463-
<b>Time</b>: Varies
464-
</p>
465-
</div>
466-
<div>
467-
<a alt="IMS Insights Series"
468-
title="IMS Insights Series" target="_blank" rel="noopener noreferrer"
469-
href="https://mediacenter.ibm.com/playlist/dedicated/122579632/1_05jsq9yl/"
470-
class="video-card-link">Watch now →
471-
</a>
472-
</div>
473-
</div>
474-
</div>
475-
</div>
476-
</div>
400+
<video-card
401+
name="IMS Insights Series"
402+
desc="These webinars cover timely topics such as new customer perspectives on IMS and managed ACBs."
403+
link="https://mediacenter.ibm.com/playlist/dedicated/122579632/1_05jsq9yl/1_ci4q5j5d"
404+
id="ims-insights"
405+
class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3"
406+
>
407+
</video-card>
477408

478409
<!-- IMS Tools -->
410+
<video-card
411+
name="IMS Tools"
412+
desc="Review the various videos on IMS Tools."
413+
link="https://mediacenter.ibm.com/playlist/dedicated/189147413/1_cvhwa8r2/1_5xtr9qnf"
414+
id="ims-tools"
415+
class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3"
416+
>
417+
</video-card>
418+
479419
<div class="pure-u-1 pure-u-lg-1-3">
480420
<div style="position: absolute; margin-top:-60px;" id="ims-tools"></div>
481421
<div class="ims-c-card">

‎wp-includes/css/web-components/video-card.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ a {
4444
color: var(--blue);
4545
}
4646

47+
.link-g {
48+
margin-top: 1em;
49+
}
50+
4751
.video-card {
4852
background-color: var(--bg-light-gray);
4953
margin: 1em;
@@ -60,6 +64,17 @@ a {
6064
flex-grow: 4;
6165
}
6266

67+
.inline-g {
68+
display: flex;
69+
flex-flow: row wrap;
70+
gap: 1em;
71+
}
72+
73+
.inline-g p {
74+
padding: 0em;
75+
margin: 0em;
76+
}
77+
6378
/* 1024px and above screen sizes */
6479
@media screen and (min-width: 64em) {
6580
.video-card {

‎wp-includes/js/web-components.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
// Web component
22
class VideoCard extends HTMLElement {
33

4+
constructor() {
5+
super();
6+
this.level = 'Varies';
7+
this.time = 'Varies';
8+
}
9+
410
static get observedAttributes() {
511
return ['name', 'desc', 'level', 'time', 'link'];
612
}

0 commit comments

Comments
 (0)