Fixed breadcrumbs, and generate page title and html title on markdown content
This commit is contained in:
parent
e28042c330
commit
8bf422407f
6 changed files with 36 additions and 25 deletions
|
@ -1,6 +1,7 @@
|
||||||
/* global $ */
|
/* global $ */
|
||||||
|
|
||||||
import './events.js';
|
import './events.js';
|
||||||
|
import './globals.js';
|
||||||
|
|
||||||
import 'whatwg-fetch';
|
import 'whatwg-fetch';
|
||||||
|
|
||||||
|
@ -20,6 +21,6 @@ if ($('navbar').length > 0) {
|
||||||
React.render(<NavBar />, $('navbar')[0]);
|
React.render(<NavBar />, $('navbar')[0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($('#breadcrumbs') > 0) {
|
if ($('#breadcrumbs').length > 0) {
|
||||||
React.render(<Breadcrumbs />, $('#breadcrumbs')[0]);
|
React.render(<Breadcrumbs />, $('#breadcrumbs')[0]);
|
||||||
}
|
}
|
||||||
|
|
3
static/src/js/globals.js
Normal file
3
static/src/js/globals.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
window.updateTitle = function (value) {
|
||||||
|
document.title = value + ' | TheOrangeOne';
|
||||||
|
};
|
|
@ -154,21 +154,30 @@ footer {
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.breadcrumb-container {
|
.container {
|
||||||
text-align: right;
|
position: relative;
|
||||||
.breadcrumb {
|
#breadcrumbs {
|
||||||
li::before {
|
text-align: right;
|
||||||
content: "/";
|
position: absolute;
|
||||||
padding: 0 3px;
|
bottom: 5px;
|
||||||
}
|
right: 0;
|
||||||
background: transparent;
|
.breadcrumb {
|
||||||
margin-bottom: 3px;
|
background: transparent;
|
||||||
font-size: 17px;
|
margin-bottom: 3px;
|
||||||
a {
|
font-size: 17px;
|
||||||
color: white;
|
padding: 0;
|
||||||
&:hover {
|
li::before {
|
||||||
color: #ff7f00;
|
content: "/";
|
||||||
|
padding: 0 3px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
.transition(color 0.4s);
|
||||||
|
color: white;
|
||||||
|
&:hover {
|
||||||
|
color: #ff7f00;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
@font-family-serif: 'Roboto';
|
@font-family-serif: 'Roboto';
|
||||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||||
@font-family-base: @font-family-sans-serif;
|
@font-family-base: @font-family-sans-serif;
|
||||||
@font-size-base: 15px;
|
@font-size-base: 17px;
|
||||||
@font-size-large: ceil((@font-size-base * 1.25));
|
@font-size-large: ceil((@font-size-base * 1.25));
|
||||||
@font-size-small: ceil((@font-size-base * 0.85));
|
@font-size-small: ceil((@font-size-base * 0.85));
|
||||||
@font-size-h1: floor((@font-size-base * 2.6));
|
@font-size-h1: floor((@font-size-base * 2.6));
|
||||||
|
|
|
@ -7,14 +7,8 @@
|
||||||
{% block baseContent %}
|
{% block baseContent %}
|
||||||
<div class="jumbotron header">
|
<div class="jumbotron header">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<h1>{% block pageTitle %}{% endblock %}</h1>
|
||||||
<div class="col-sm-8">
|
<div id="breadcrumbs"></div>
|
||||||
<h1>{% block pageTitle %}{% endblock %}</h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4 breadcrumb-container">
|
|
||||||
<div id="breadcrumbs"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<navbar></navbar>
|
<navbar></navbar>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,6 +8,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$('.header h1').text($('.markdown-content h1').text());
|
$(window).load(function () {
|
||||||
|
const TITLE = $('.markdown-content h1').text();
|
||||||
|
$('.header h1').text(TITLE);
|
||||||
|
window.updateTitle(TITLE);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Reference in a new issue