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 $ */
|
||||
|
||||
import './events.js';
|
||||
import './globals.js';
|
||||
|
||||
import 'whatwg-fetch';
|
||||
|
||||
|
@ -20,6 +21,6 @@ if ($('navbar').length > 0) {
|
|||
React.render(<NavBar />, $('navbar')[0]);
|
||||
}
|
||||
|
||||
if ($('#breadcrumbs') > 0) {
|
||||
if ($('#breadcrumbs').length > 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,18 +154,26 @@ footer {
|
|||
}
|
||||
h1 {
|
||||
margin: 15px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.breadcrumb-container {
|
||||
.container {
|
||||
position: relative;
|
||||
#breadcrumbs {
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 0;
|
||||
.breadcrumb {
|
||||
background: transparent;
|
||||
margin-bottom: 3px;
|
||||
font-size: 17px;
|
||||
padding: 0;
|
||||
li::before {
|
||||
content: "/";
|
||||
padding: 0 3px;
|
||||
}
|
||||
background: transparent;
|
||||
margin-bottom: 3px;
|
||||
font-size: 17px;
|
||||
a {
|
||||
.transition(color 0.4s);
|
||||
color: white;
|
||||
&:hover {
|
||||
color: #ff7f00;
|
||||
|
@ -173,6 +181,7 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
& + div {
|
||||
margin-top: 65px;
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
@font-family-serif: 'Roboto';
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@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-small: ceil((@font-size-base * 0.85));
|
||||
@font-size-h1: floor((@font-size-base * 2.6));
|
||||
|
|
|
@ -7,15 +7,9 @@
|
|||
{% block baseContent %}
|
||||
<div class="jumbotron header">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h1>{% block pageTitle %}{% endblock %}</h1>
|
||||
</div>
|
||||
<div class="col-sm-4 breadcrumb-container">
|
||||
<div id="breadcrumbs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<navbar></navbar>
|
||||
</div>
|
||||
{% block content %}{% endblock %}
|
||||
|
|
|
@ -8,6 +8,10 @@
|
|||
</div>
|
||||
|
||||
<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>
|
||||
{% endblock %}
|
||||
|
|
Reference in a new issue