Skip to content

Commit f4c4bd2

Browse files
hmillersarahhmillersarah
authored
Merge pull request #30 from imsdev/29-responsive-videos-page
Reusable component: video card
2 parents 4aac061 + dc04f58 commit f4c4bd2

7 files changed

Lines changed: 637 additions & 721 deletions

File tree

‎ims-advocacy.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<meta name="twitter:image" content="https://developer.ibm.com/zsystems/wp-content/uploads/sites/75/2018/03/IMS-GOLD-Trophy.png" />
3838

3939
<!-- Sheets -->
40-
<!-- Imported styling -->
40+
<!-- Imported styling -->
4141
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
4242
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
4343
<!-- Migrated stylesheets -->

‎ims-videos.html‎

Lines changed: 413 additions & 717 deletions
Large diffs are not rendered by default.

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
:root {
2+
/* Color */
3+
--blue: #0f62fe;
4+
/* Background Color */
5+
--bg-light-gray: #f4f4f4;
6+
7+
/* Sizing */
8+
--plex-18: 1.125em;
9+
--plex-24: 1.5em;
10+
}
11+
12+
h2 {
13+
font-weight: 400;
14+
font-size: var(--plex-24);
15+
padding: 0em;
16+
margin: 0em;
17+
}
18+
19+
p {
20+
font-size: var(--plex-18);
21+
}
22+
23+
a {
24+
text-decoration: none;
25+
color: var(--blue);
26+
}
27+
28+
/* Styling for a group of links */
29+
.link-g {
30+
margin-top: 1em;
31+
display: flex;
32+
flex-flow: column nowrap;
33+
}
34+
35+
.link-g a {
36+
margin: 0.2em 0em;
37+
}
38+
39+
/* Styling for video card */
40+
.video-card {
41+
background-color: var(--bg-light-gray);
42+
margin: 1em;
43+
padding: 2em;
44+
display: flex;
45+
flex-flow: column nowrap;
46+
}
47+
48+
.video-card div:nth-child(0) {
49+
flex-grow: 1;
50+
}
51+
52+
/* Places 'watch now' at the bottom of the video card */
53+
.video-card div:nth-child(1) {
54+
flex-grow: 4;
55+
}
56+
57+
/* Styling for inline group (level, time) */
58+
.inline-g {
59+
display: flex;
60+
flex-flow: row wrap;
61+
gap: 1em;
62+
}
63+
64+
.inline-g p {
65+
padding: 0em;
66+
margin: 0em;
67+
}
68+
69+
/* 1024px and above screen sizes */
70+
@media screen and (min-width: 64em) {
71+
/* Set consistent height for video card */
72+
.video-card {
73+
height: 18.75em;
74+
}
75+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!-- HTML template -->
2+
<link href="web-components/video-card/video-card.css" rel="stylesheet">
3+
<div class="video-card">
4+
<div>
5+
<h2 class="video-name"></h2>
6+
<p class="video-desc"></p>
7+
<div class="inline-g">
8+
<p><b>Level: </b><span class="video-level"></span></p>
9+
<p><b>Time: </b><span class="video-time"></span></p>
10+
</div>
11+
</div>
12+
<div class="link-g">
13+
<a class="video-link" target="_blank" rel="noopener noreferrer"></a>
14+
<a class="video-link-2" target="_blank" rel="noopener noreferrer"></a>
15+
<a class="video-link-3" target="_blank" rel="noopener noreferrer"></a>
16+
</div>
17+
</div>

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Fetch HTML template
2+
fetch("web-components/video-card/video-card.html")
3+
.then(stream => stream.text())
4+
.then(text => createComponent(text))
5+
6+
// Create web component
7+
function createComponent(html) {
8+
// Web component class
9+
class VideoCard extends HTMLElement {
10+
11+
// Creates element with default values
12+
constructor() {
13+
super();
14+
this.level = 'Varies';
15+
this.time = 'Varies';
16+
this.linktext = 'now';
17+
}
18+
19+
// Return array of properties to observe
20+
static get observedAttributes() {
21+
return ['name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3'];
22+
}
23+
24+
// Called when an attribute is defined or changed
25+
attributeChangedCallback(property, oldValue, newValue) {
26+
if (oldValue === newValue) return;
27+
this[property] = newValue;
28+
}
29+
30+
// Invoked when element is added to document
31+
connectedCallback() {
32+
// Create shadow root for element
33+
const shadow = this.attachShadow({mode: 'closed'});
34+
shadow.innerHTML = html;
35+
// shadow.append(
36+
// // document.getElementById('video-card').content.cloneNode(true) // Use this line to test template in ims-videos.html
37+
// template.content.cloneNode(true)
38+
// );
39+
40+
// Set video name
41+
const videoName = shadow.querySelector('.video-name');
42+
videoName.textContent = `${this.name}`;
43+
44+
// Set video desc
45+
const videoDesc = shadow.querySelector('.video-desc');
46+
videoDesc.textContent = `${this.desc}`;
47+
48+
// Set video level
49+
const videoLevel = shadow.querySelector('.video-level');
50+
videoLevel.textContent = `${this.level}`;
51+
52+
// Set video time
53+
const videoTime = shadow.querySelector('.video-time');
54+
videoTime.textContent = `${this.time}`;
55+
56+
// Set video links
57+
const videoLink = shadow.querySelector('.video-link');
58+
const videoLink2 = shadow.querySelector('.video-link-2');
59+
const videoLink3 = shadow.querySelector('.video-link-3');
60+
const links = [
61+
[this.link, this.linktext, videoLink],
62+
[this.link2, this.linktext2, videoLink2],
63+
[this.link3, this.linktext3, videoLink3]
64+
]
65+
66+
links.forEach(link => {
67+
const url = link[0];
68+
const linkText = link[1];
69+
const linkObj = link[2];
70+
71+
// Check if urls have been defined
72+
if (url != undefined) {
73+
linkObj.href = url;
74+
const altText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
75+
linkObj.setAttribute('alt', altText);
76+
linkObj.textContent = `Watch ${linkText} →`;
77+
}
78+
})
79+
}
80+
}
81+
82+
customElements.define('video-card', VideoCard);
83+
}
84+
85+
// Register component
86+
// customElements.define('video-card', VideoCard);

‎wp-includes/css/nav.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -716,7 +716,7 @@ body .pn-listing .pn-list__item .entry-content p {
716716
}
717717

718718
/* link */
719-
a, a:visited {
719+
a {
720720
display: inline-block;
721721
color: #0F62FE;
722722
text-decoration: none;

‎wp-includes/css/page.css‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
background-repeat: no-repeat;
4141
background-size: cover;
4242
background-position: center;
43+
color: var(--white);
4344
}
4445

4546
.blur-bg {
@@ -50,6 +51,15 @@
5051
background-image: url(../../wp-content/backgrounds/Engage_HomepageBG.png);
5152
background-repeat: no-repeat;
5253
background-size: cover;
54+
color: var(--white);
55+
}
56+
57+
.learn-bg {
58+
background-image: url(../../wp-content/backgrounds/Learn_HomepageBG.png);
59+
background-repeat: no-repeat;
60+
background-size: cover;
61+
background-position: right;
62+
color: var(--black);
5363
}
5464

5565
.white-bg {
@@ -103,7 +113,12 @@
103113
.icon-md {
104114
max-height: var(--plex-72);
105115
max-width: var(--plex-72);
106-
116+
}
117+
118+
.icon-lg {
119+
height: var(--plex-28);
120+
max-height: var(--plex-72);
121+
max-width: var(--plex-72);
107122
}
108123

109124
.icon {
@@ -194,10 +209,13 @@
194209
padding: 3em;
195210
}
196211

212+
.hero div:nth-child(2) {
213+
padding-left: 1em;
214+
}
215+
197216
.main-content section:first-child {
198217
width: 100%;
199218
background-color:var(--bg-dark-gray-01);
200-
color: white;
201219
}
202220

203221
.main-content section:first-child p {
@@ -228,6 +246,16 @@
228246
padding-right: 2em;
229247
}
230248

249+
/* Targets all section containing card grid (ex. videos, course, etc.) */
250+
.card-section {
251+
padding: 2em 4em !important;
252+
}
253+
254+
.card-section-header {
255+
margin-left: 1em;
256+
padding-right: 2em;
257+
}
258+
231259
/* For pure grid units requiring paddings */
232260
.pure-g-pad > div {
233261
padding: 1.2em;
@@ -331,21 +359,35 @@
331359
padding: 2em;
332360
}
333361

362+
/* Decrease card section padding for smaller screens */
363+
.card-section {
364+
padding: 1em !important;
365+
}
366+
367+
/* Decrease padding for smaller screens */
334368
.pure-g-pad > div {
335369
padding: 0.4em;
336370
}
337371

372+
/* Decrease highlight link padding for smaller screens */
338373
.highlight-link {
339374
padding-bottom: 1rem;
340375
}
341376

377+
/* Decrease font size for smaller screens */
342378
.dark-gray-bg h4 {
343379
font-size: var(--plex-20) !important;
344380
}
381+
382+
/* Remove padding from hero content for smaller screens */
383+
.hero div:nth-child(2) {
384+
padding-left: 0em;
385+
}
345386
}
346387

347388
/* 1024px and above screen sizes */
348389
@media screen and (min-width: 64em) {
390+
/* Resize quote block to full height for larger screens */
349391
.quote-blk {
350392
height: 100%;
351393
}

0 commit comments

Comments
 (0)