Skip to content

Commit 616cdce

Browse files
petelepetele
committed
Refreshed Udacity video page - navigates directly to course
1 parent e28c92b commit 616cdce

File tree

7 files changed

+115
-28
lines changed

7 files changed

+115
-28
lines changed

‎src/_data/localized_strings/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@
6666
"@updated_on": {"description": "Text - When the article was last updated"},
6767
"view_case_study": "View case study",
6868
"@view_case_study": {"description": "Link - to view a specific case study"},
69+
"take_course": "Take course",
70+
"@view_course": {"description": "Link - to take a specific online training course."},
6971
"view_course": "View course",
7072
"@view_course": {"description": "Link - to view a specific online training course."},
7173
"view_source": "View Source",

‎src/_langs/en/shows/udacity/courses/critical-rendering-path.markdown‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,13 @@ collection: udacity-courses
66
title: "Critical Rendering Path"
77
description: "Learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites."
88
published: true
9-
udacityID: ud884
10-
youtubeTrailerID: v5us0j3QmW4
9+
udacity:
10+
id: ud884
11+
level: Intermediate
12+
est_time: Approx 1 week
13+
instructor: ilyagrigorik
14+
preview:
15+
youtube: v5us0j3QmW4
1116
date: 2014-10-10 00:00:00
1217
article:
1318
written_on: 2014-10-10

‎src/_langs/en/shows/udacity/courses/responsive-images.markdown‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,13 @@ collection: udacity-courses
66
title: "Responsive Images"
77
description: "Learn how to work with images on the modern web, so that your images look great and load quickly on any device."
88
published: true
9-
udacityID: ud882
10-
youtubeTrailerID: 1Pxj9955I2c
9+
udacity:
10+
id: ud882
11+
level: Intermediate
12+
est_time: Approx 2 weeks
13+
instructor: samdutton
14+
preview:
15+
youtube: 1Pxj9955I2c
1116
date: 2015-03-12 00:00:00
1217
article:
1318
written_on: 2015-03-12

‎src/_langs/en/shows/udacity/courses/responsive-web-design.markdown‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,19 @@ collection: udacity-courses
66
title: "Responsive Web Design"
77
description: "Learn the fundamentals of responsive web design with and create your own responsive web page that works well on any device - phone, tablet, desktop."
88
published: true
9-
udacityID: ud893
10-
youtubeTrailerID: 7DJLa4owtIU
9+
udacity:
10+
id: ud893
11+
level: Intermediate
12+
est_time: Approx 2 weeks
13+
instructor: petelepage
14+
preview:
15+
youtube: 7DJLa4owtIU
1116
date: 2015-03-18 00:00:00
1217
article:
1318
written_on: 2015-03-18
1419
updated_on: 2015-03-18
1520
---
1621

17-
## Course Summary
18-
1922
In this course you'll learn the fundamentals of responsive web design with
2023
Google's Pete LePage! You'll create your own responsive web page that works
2124
well on any device - phone, tablet, desktop or anything in between.

‎src/_layouts/shows/series-index.liquid‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,10 @@
3939
{% if videoInSeries.showYoutubeID %}
4040
<img class="widevideo--image" src="https://img.youtube.com/vi/{{ videoInSeries.showYoutubeID }}/0.jpg" />
4141
{% endif %}
42-
{% if videoInSeries.youtubeTrailerID %}
43-
<img class="widevideo--image" src="https://img.youtube.com/vi/{{ videoInSeries.youtubeTrailerID }}/0.jpg" />
42+
{% if videoInSeries.udacity %}
43+
{% if videoInSeries.udacity.preview.youtube %}
44+
<img class="widevideo--image" src="https://img.youtube.com/vi/{{ videoInSeries.udacity.preview.youtube }}/0.jpg" />
45+
{% endif %}
4446
{% endif %}
4547
</a>
4648
</div>

‎src/_layouts/shows/udacity-course.liquid‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,27 +26,51 @@
2626
</div>
2727
<div class="clear"></div>
2828

29+
<div class="container">
30+
<div class="content">
31+
32+
<div class="clear" id="preview-block">
33+
<div class="g--half">
34+
{% if page.udacity.preview.youtube %}
35+
<div class="media media--video">
36+
<iframe src="https://www.youtube.com/embed/{{ page.udacity.preview.youtube }}?controls=2&modestbranding=1&showinfo=0&utm-source=crdev-wf" frameborder="0" allowfullscreen></iframe>
37+
</div>
38+
{% endif %}
39+
</div>
40+
<div class="g--half g--last">
41+
<p>
42+
{% if page.udacity.level %}
43+
<strong>Level</strong> {{ page.udacity.level }}<br>
44+
{% endif %}
45+
{% if page.udacity.est_time %}
46+
<strong>Est. Time</strong> {{page.udacity.est_time}}<br>
47+
{% endif %}
48+
<strong>Cost</strong> FREE<br>
49+
{% assign contributor = site.data["contributors"][page.udacity.instructor] %}
50+
{% if contributor %}
51+
<strong>Instructor</strong>
52+
<a href="{{site.url}}/fundamentals/resources/contributors/index.html#{{page.udacity.instructor}}">
53+
{{contributor.name.given}} {{contributor.name.family}}</a><br>
54+
{% endif %}
55+
<strong>What you get</strong>
56+
<ul style="padding-top:0">
57+
<li>Instructor lead videos</li>
58+
<li>Learn by doing exercises and view project instructions</li>
59+
</ul>
60+
</p>
61+
</div>
62+
</div>
63+
<a href="https://www.udacity.com/course/viewer#!/c-{{ page.udacity.id }}?utm_source=webfundamentals&utm_medium=d.g.com&utm_content=promo&utm_campaign=index" class="cta--primary">{{"take_course" | localize_string}}</a>
64+
65+
{{ content }}
66+
67+
<p>
68+
<a href="https://www.udacity.com/course/{{page.udacity.id}}?utm_source=webfundamentals&utm_medium=d.g.com&utm_content=promo&utm_campaign=index">Learn more at <strong>Udacity.com</strong></a>
69+
</p>
2970

30-
31-
32-
{% wrap content %}
33-
34-
35-
{% if page.youtubeTrailerID %}
36-
<!-- YouTube embed -->
37-
{% include modules/video.liquid id=page.youtubeTrailerID %}
38-
{% endif %}
39-
<div>
40-
<a href="https://www.udacity.com/course/{{ page.udacityID }}?utm_source=webfundamentals&utm_medium=d.g.com&utm_content=promo&utm_campaign=index" class="cta--primary">
41-
{{"view_course" | localize_string}}
42-
</a>
4371
</div>
72+
</div>
4473

4574

46-
{{ content }}
47-
48-
49-
{% endwrap %}
50-
5175
{% include cc.liquid %}
5276
{% include footer.liquid %}

‎src/_sass/_pages/shows/_udacity.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
$udacityColor: #607D8B;
2+
3+
.showtitle--title-container-udacity {
4+
background-color: $udacityColor;
5+
color: white;
6+
margin-bottom: 2em;
7+
}
8+
9+
.showtitle--title-udacity {
10+
font-weight: 500;
11+
}
12+
13+
.showtitle--subtitle-udacity {
14+
@include type--medium;
15+
16+
padding-top: 0;
17+
color: inherit;
18+
}
19+
20+
@include wide {
21+
.showtitle--subtitle-udacity {
22+
padding-top: 0;
23+
24+
color: inherit;
25+
}
26+
}
27+
28+
.showhome--series-title-udacity, .showhome--series-title-udacity a {
29+
30+
}
31+
32+
.smallvideo--title-container-udacity, .smallvideo-udacity {
33+
background-color: $udacityColor;
34+
}
35+
36+
a.cta--primary {
37+
display: block;
38+
width: 100%;
39+
padding: 1em;
40+
background-color: $udacityColor;
41+
color:white;
42+
}
43+
44+
a.cta--primary:hover {
45+
color: white;
46+
}

0 commit comments

Comments
 (0)