Skip to content

Commit 28f8607

Browse files
Privat33r-devPrivat33r-dev
authored
Move navbar and footer to the left panel (#255)
1 parent 200f658 commit 28f8607

File tree

2 files changed

+88
-74
lines changed

2 files changed

+88
-74
lines changed

‎_layouts/post.html

Lines changed: 85 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -6,86 +6,99 @@
66
<div class="panel-container">
77
{% if terms > 0 %}
88
<div class="panel-left content">
9-
{% else %}
10-
<div class="content panel-singular">
11-
{% endif %}
12-
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
9+
{% else %}
10+
<div class="content panel-singular">
11+
{% endif %}
12+
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
1313

14-
<header class="post-header">
15-
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
16-
<p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}"
17-
itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} •
18-
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{
19-
page.author }}</span></span>{% endif %}
20-
</p>
14+
<header class="post-header">
15+
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
16+
<p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}"
17+
itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} •
18+
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{
19+
page.author }}</span></span>{% endif %}
20+
</p>
2121

22-
</header>
22+
</header>
2323

24-
<div class="post-content" itemprop="articleBody">
25-
{{ content }}
26-
</div>
27-
</article>
28-
{% include social-share.html %}
29-
</div>
30-
31-
{% if terms > 0 %}
32-
<div class="splitter">
33-
</div>
24+
<div class="post-content" itemprop="articleBody">
25+
{{ content }}
26+
</div>
27+
</article>
28+
{% include social-share.html %}
29+
</div>
3430

35-
<div class="panel-right">
36-
<span class="resize-warning">If the commandline doesn't appear in the terminal, make sure popups are enabled
37-
or try resizing the browser window.</span>
38-
{% for i in (1..terms) %}
39-
<div class="term{{i}}"></div>
40-
{% endfor %}
41-
</div>
42-
{% endif %}
31+
{% if terms > 0 %}
32+
<div class="splitter">
33+
</div>
4334

35+
<div class="panel-right">
36+
<span class="resize-warning">If the commandline doesn't appear in the terminal, make sure popups are enabled
37+
or try resizing the browser window.</span>
38+
{% for i in (1..terms) %}
39+
<div class="term{{i}}"></div>
40+
{% endfor %}
4441
</div>
42+
{% endif %}
43+
</div>
4544

46-
<script>
47-
(function () {
48-
var font3 = document.createElement('link');
49-
font3.type = 'text/css';
50-
font3.rel = 'stylesheet';
51-
font3.href = '{{site.baseurl}}/css/syntax-highlighting.css';
52-
var q = document.getElementsByTagName('link')[0];
53-
q.parentNode.insertBefore(font3, q);
54-
})();
55-
</script>
56-
<script
57-
src="https://cdn.rawgit.com/play-with-docker/sdk/74a853bbc404ce08c091a4b2c6f1de52df0da933/dist/pwd.js"></script>
58-
<script src="{{site.baseurl}}/js/quiz.js"></script>
59-
<script>
60-
addEventListener("load", (event) => {
61-
var siteUrl = "{{ site.url }}"
62-
{% if site.url == 'https://training.play-with-docker.com' %}
63-
if ((window.location.protocol + '//' + window.location.hostname) == siteUrl) {
64-
pwd.on('init', function () {
65-
pwd.getUserInfo(function (pwduser) {
66-
user = pwduser;
67-
if (user !== undefined) {
68-
analytics.identify(user.provider_user_id, { "email": user.email });
69-
} else {
70-
analytics.identify();
71-
}
72-
});
45+
<script>
46+
(function () {
47+
var font3 = document.createElement('link');
48+
font3.type = 'text/css';
49+
font3.rel = 'stylesheet';
50+
font3.href = '{{site.baseurl}}/css/syntax-highlighting.css';
51+
var q = document.getElementsByTagName('link')[0];
52+
q.parentNode.insertBefore(font3, q);
53+
})();
54+
</script>
55+
<script
56+
src="https://cdn.rawgit.com/play-with-docker/sdk/74a853bbc404ce08c091a4b2c6f1de52df0da933/dist/pwd.js"></script>
57+
<script src="{{site.baseurl}}/js/quiz.js"></script>
58+
<script>
59+
addEventListener("load", (event) => {
60+
{% if site.url == 'https://training.play-with-docker.com' %}
61+
var siteUrl = "{{ site.url }}"
62+
if ((window.location.protocol + '//' + window.location.hostname) == siteUrl) {
63+
pwd.on('init', function () {
64+
pwd.getUserInfo(function (pwduser) {
65+
user = pwduser;
66+
if (user !== undefined) {
67+
analytics.identify(user.provider_user_id, { "email": user.email });
68+
} else {
69+
analytics.identify();
70+
}
7371
});
74-
} else {
75-
console.log('In _config.yml, the site url does not match the url you are serving from, so no analytics were pushed.')
76-
}
77-
{% endif %}
78-
pwd.newSession([{ selector: '.term1' }, { selector: '.term2' }, { selector: '.term3' }], { baseUrl: '{{site.pwdurl}}', ImageName: '{{page.image}}' });
79-
$(".panel-left").resizable({
80-
handleSelector: ".splitter",
81-
resizeHeight: false,
82-
onDragEnd: pwd.resize.bind(pwd)
8372
});
84-
window.onbeforeunload = function (e) {
85-
navigator.sendBeacon("{{site.pwdurl}}/sessions/" + pwd.sessionId + "/close");
86-
e.preventDefault();
87-
e.returnValue = 'Hi';
88-
}
73+
} else {
74+
console.log('In _config.yml, the site url does not match the url you are serving from, so no analytics were pushed.')
75+
}
76+
{% endif %}
77+
78+
pwd.newSession([{ selector: '.term1' }, { selector: '.term2' }, { selector: '.term3' }], { baseUrl: '{{site.pwdurl}}', ImageName: '{{page.image}}' });
79+
80+
$(".panel-left").resizable({
81+
handleSelector: ".splitter",
82+
resizeHeight: false,
83+
onDragEnd: pwd.resize.bind(pwd)
8984
});
9085

91-
</script>
86+
window.onbeforeunload = function (e) {
87+
navigator.sendBeacon("{{site.pwdurl}}/sessions/" + pwd.sessionId + "/close");
88+
e.preventDefault();
89+
e.returnValue = 'Hi';
90+
}
91+
92+
{% if terms > 0 %}
93+
// Move nav bar and footer to the left panel
94+
let panelLeft = document.querySelector(".panel-left");
95+
let header = document.querySelector("header");
96+
panelLeft.insertBefore(header, panelLeft.firstChild);
97+
98+
let footer = document.querySelector("footer");
99+
panelLeft.appendChild(footer);
100+
{% endif %}
101+
102+
});
103+
104+
</script>

‎_sass/_custom.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
2-
1+
.panel-left .container {
2+
width: 100% !important;
3+
}

0 commit comments

Comments
 (0)