1
Fork 0

Fixed breadcrumbs, and generate page title and html title on markdown content

This commit is contained in:
Jake Howard 2016-01-25 22:06:10 +00:00
parent e28042c330
commit 8bf422407f
6 changed files with 36 additions and 25 deletions

View file

@ -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
View file

@ -0,0 +1,3 @@
window.updateTitle = function (value) {
document.title = value + ' | TheOrangeOne';
};

View file

@ -154,18 +154,26 @@ footer {
} }
h1 { h1 {
margin: 15px 0; margin: 15px 0;
display: inline-block;
} }
.breadcrumb-container { .container {
position: relative;
#breadcrumbs {
text-align: right; text-align: right;
position: absolute;
bottom: 5px;
right: 0;
.breadcrumb { .breadcrumb {
background: transparent;
margin-bottom: 3px;
font-size: 17px;
padding: 0;
li::before { li::before {
content: "/"; content: "/";
padding: 0 3px; padding: 0 3px;
} }
background: transparent;
margin-bottom: 3px;
font-size: 17px;
a { a {
.transition(color 0.4s);
color: white; color: white;
&:hover { &:hover {
color: #ff7f00; color: #ff7f00;
@ -173,6 +181,7 @@ footer {
} }
} }
} }
}
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
& + div { & + div {
margin-top: 65px; margin-top: 65px;

View file

@ -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));

View file

@ -7,15 +7,9 @@
{% block baseContent %} {% block baseContent %}
<div class="jumbotron header"> <div class="jumbotron header">
<div class="container"> <div class="container">
<div class="row">
<div class="col-sm-8">
<h1>{% block pageTitle %}{% endblock %}</h1> <h1>{% block pageTitle %}{% endblock %}</h1>
</div>
<div class="col-sm-4 breadcrumb-container">
<div id="breadcrumbs"></div> <div id="breadcrumbs"></div>
</div> </div>
</div>
</div>
<navbar></navbar> <navbar></navbar>
</div> </div>
{% block content %}{% endblock %} {% block content %}{% endblock %}

View file

@ -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 %}