Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Make bootblog4 look better (still not finished)
Signed-off-by: Chris Warrick <kwpolska@gmail.com>
  • Loading branch information
Kwpolska committed Mar 17, 2018
1 parent ce5defe commit bb28175
Show file tree
Hide file tree
Showing 25 changed files with 292 additions and 231 deletions.
6 changes: 6 additions & 0 deletions CHANGES.txt
Expand Up @@ -80,6 +80,12 @@ Removed features
(Issue #2785)
* Removed old 7-line metadata format (Issue #2839)

Other changes
-------------

* Rename ``crumbs.tmpl`` to ``ui_helper.tmpl`` and the breadcrumbs
function to ``breadcrumbs``

New in v7.8.8
=============

Expand Down
2 changes: 1 addition & 1 deletion docs/theming.txt
Expand Up @@ -241,7 +241,7 @@ These are the templates that come with the included themes:
It uses a bunch of helper templates, one for each supported comment system
(all of which start with ``comments_helper``)

``crumbs.tmpl``, ``pagination_helper.tmpl``
``ui_helper.tmpl``, ``pagination_helper.tmpl``
These templates help render specific UI items, and can be tweaked as needed.

``gallery.tmpl``
Expand Down
85 changes: 43 additions & 42 deletions nikola/data/themes/base-jinja/templates/gallery.tmpl
@@ -1,11 +1,11 @@
{# -*- coding: utf-8 -*- #}
{% extends 'base.tmpl' %}
{% import 'comments_helper.tmpl' as comments with context %}
{% import 'crumbs.tmpl' as ui with context %}
{% import 'ui_helper.tmpl' as ui with context %}
{% block sourcelink %}{% endblock %}

{% block content %}
{{ ui.bar(crumbs) }}
{{ ui.breadcrumbs(crumbs) }}
{% if title %}
<h1>{{ title|e }}</h1>
{% endif %}
Expand Down Expand Up @@ -43,13 +43,13 @@
{{ super() }}
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<style type="text/css">
.image-block {
display: inline-block;
#gallery_container {
position: relative;
}
.flowr_row {
width: 100%;
.image-block {
position: absolute;
}
</style>
</style>
{% if translations|length > 1 %}
{% for langname in translations.keys() %}
{% if langname != lang %}
Expand All @@ -61,45 +61,46 @@
{% endblock %}

{% block extra_js %}
<script src="/assets/js/flowr.js"></script>
<script src="/assets/js/justified-layout.min.js"></script>
<script>
jsonContent = {{ photo_array_json }};
flowr(document.querySelectorAll("#gallery_container")[0], {
data : jsonContent,
height : {{ thumbnail_size }}*.6,
padding: 5,
rows: -1,
render : function(params) {
// Just return a div, string or a dom object, anything works fine
var img = document.createElement("img");
img.setAttribute('src', params.itemData.url_thumb);
img.setAttribute('width', params.width);
img.setAttribute('height', params.height);
img.setAttribute('alt', params.itemData.title);
img.style.maxWidth = '100%';
link = document.createElement("a");
link.setAttribute('href', params.itemData.url);
link.setAttribute('class', 'image-reference');
div = document.createElement("div");
div.setAttribute('class', 'image-block');
div.setAttribute('title', params.itemData.title);
div.setAttribute('data-toggle', "tooltip")
link.append(img);
div.append(link);
//div.hover(div.tooltip());
return div;
},
itemWidth : function(data) { return data.size.w; },
itemHeight : function(data) { return data.size.h; },
complete : function(params) {
if( jsonContent.length > params.renderedItems ) {
nextRenderList = jsonContent.slice( params.renderedItems );
}
}
});
var jsonContent = {{ photo_array_json }};

function renderGallery() {
var container = document.getElementById("gallery_container");
container.innerHTML = '';
var layoutGeometry = require('justified-layout')(jsonContent, {
"containerWidth": container.offsetWidth,
"targetRowHeight": {{ thumbnail_size }}*.6,
"boxSpacing": 5});
container.style.height = layoutGeometry.containerHeight + 'px';
var boxes = layoutGeometry.boxes;
for (var i = 0; i < boxes.length; i++) {
var img = document.createElement("img");
img.setAttribute('src', jsonContent[i].url_thumb);
img.setAttribute('alt', jsonContent[i].title);
img.style.width = boxes[i].width + 'px';
img.style.height = boxes[i].height + 'px';
link = document.createElement("a");
link.setAttribute('href', jsonContent[i].url);
link.setAttribute('class', 'image-reference');
div = document.createElement("div");
div.setAttribute('class', 'image-block');
div.setAttribute('title', jsonContent[i].title);
div.setAttribute('data-toggle', "tooltip")
div.style.width = boxes[i].width + 'px';
div.style.height = boxes[i].height + 'px';
div.style.top = boxes[i].top + 'px';
div.style.left = boxes[i].left + 'px';
link.append(img);
div.append(link);
container.append(div);
}
baguetteBox.run('#gallery_container', {
captions: function(element) {
return element.getElementsByTagName('img')[0].alt;
}});
}
renderGallery();
window.addEventListener('resize', renderGallery);
</script>
{% endblock %}
4 changes: 2 additions & 2 deletions nikola/data/themes/base-jinja/templates/listing.tmpl
@@ -1,8 +1,8 @@
{# -*- coding: utf-8 -*- #}
{% extends 'base.tmpl' %}
{% import 'crumbs.tmpl' as ui with context %}
{% import 'ui_helper.tmpl' as ui with context %}
{% block content %}
{{ ui.bar(crumbs) }}
{{ ui.breadcrumbs(crumbs) }}
{% if folders or files %}
<ul>
{% for name in folders %}
Expand Down
18 changes: 18 additions & 0 deletions nikola/data/themes/base-jinja/templates/ui_helper.tmpl
@@ -0,0 +1,18 @@
{# -*- coding: utf-8 -*- #}
{% macro breadcrumbs(crumbs) %}
{% if crumbs %}
<nav class="breadcrumbs">
<ul class="breadcrumb">
{% for link, text in crumbs %}
{% if text != index_file %}
{% if link == '#' %}
<li>{{ text.rsplit('.html', 1)[0] }}</li>
{% else %}
<li><a href="{{ link }}">{{ text }}</a></li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</nav>
{% endif %}
{% endmacro %}
4 changes: 2 additions & 2 deletions nikola/data/themes/base/templates/gallery.tmpl
@@ -1,11 +1,11 @@
## -*- coding: utf-8 -*-
<%inherit file="base.tmpl"/>
<%namespace name="comments" file="comments_helper.tmpl"/>
<%namespace name="ui" file="crumbs.tmpl" import="bar"/>
<%namespace name="ui" file="ui_helper.tmpl"/>
<%block name="sourcelink"></%block>

<%block name="content">
${ui.bar(crumbs)}
${ui.breadcrumbs(crumbs)}
%if title:
<h1>${title|h}</h1>
%endif
Expand Down
4 changes: 2 additions & 2 deletions nikola/data/themes/base/templates/listing.tmpl
@@ -1,8 +1,8 @@
## -*- coding: utf-8 -*-
<%inherit file="base.tmpl"/>
<%namespace name="ui" file="crumbs.tmpl" import="bar"/>
<%namespace name="ui" file="ui_helper.tmpl"/>
<%block name="content">
${ui.bar(crumbs)}
${ui.breadcrumbs(crumbs)}
%if folders or files:
<ul>
% for name in folders:
Expand Down
@@ -1,6 +1,5 @@
## -*- coding: utf-8 -*-

<%def name="bar(crumbs)">
<%def name="breadcrumbs(crumbs)">
%if crumbs:
<nav class="breadcrumbs">
<ul class="breadcrumb">
Expand Down
26 changes: 23 additions & 3 deletions nikola/data/themes/bootblog4/assets/css/bootblog.css
Expand Up @@ -105,14 +105,17 @@ h1, h2, h3, h4, h5, h6 {
/*
* Blog posts
*/
.blog-post {
article {
margin-bottom: 4rem;
}
.blog-post-title {
article:last-child {
margin-bottom: 0;
}
.entry-title {
margin-bottom: .25rem;
font-size: 2.5rem;
}
.blog-post-meta {
article .metadata {
margin-bottom: 1.25rem;
color: #999;
}
Expand All @@ -130,3 +133,20 @@ h1, h2, h3, h4, h5, h6 {
.blog-footer p:last-child {
margin-bottom: 0;
}

@media (min-width: 576px) {
.nbb-navbar-toggler {
display: none;
}

.nbb-header {
-webkit-box-pack: justify!important;
-ms-flex-pack: justify!important;
justify-content: space-between!important;
}
}

.navbar-brand {
padding: 0;
white-space: initial;
}
36 changes: 19 additions & 17 deletions nikola/data/themes/bootblog4/templates/base.tmpl
Expand Up @@ -16,15 +16,14 @@ ${template_hooks['extra_head']()}

<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
%if search_form:
<div class="col-4">
<div class="row nbb-header align-items-center">
<div class="col-md-3 col-xs-2" style="padding: 0; width: auto;">
<button class="navbar-toggler navbar-light bg-light nbb-navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
${search_form}
</div>
<div class="col-4 text-center">
% else:
<div class="col-4 offset-4 text-center">
%endif
<div class="col-md-6 col-xs-10 text-center" style="width: auto;">
<a class="navbar-brand blog-header-logo text-dark" href="${abs_link(_link("root", None, lang))}">
%if logo_url:
<img src="${logo_url}" alt="${blog_title|h}" id="logo" class="d-inline-block align-top">
Expand All @@ -34,26 +33,29 @@ ${template_hooks['extra_head']()}
<span id="blog-title">${blog_title|h}</span>
% endif
</a>

</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<div class="col-md-3 d-flex justify-content-end align-items-center">
<%block name="belowtitle">
%if len(translations) > 1:
${base.html_translations()}
%endif
</%block>
<%block name="sourcelink"></%block>
<div class="d-none d-md-inline"><%block name="sourcelink"></%block></div>
${template_hooks['menu_alt']()}
</div>
</div>
</header>

<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
${base.html_navigation_links()}
${template_hooks['menu']()}
</nav>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-white static-top">
<div class="collapse navbar-collapse" id="bs-navbar">
<ul class="navbar-nav nav-fill d-flex w-100">
${base.html_navigation_links()}
${template_hooks['menu']()}
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</header>



<div class="container" id="content" role="main">
<div class="body-content">
Expand Down
5 changes: 3 additions & 2 deletions nikola/data/themes/bootblog4/templates/base_helper.tmpl
Expand Up @@ -156,9 +156,10 @@ lang="${lang}">
</div>
% else:
% if rel_link(permalink, url) == "#":
<a class="p-2 text-white bg-secondary active" href="${url}">${text} <span class="sr-only">${messages("(active)", lang)}</span></a>
##<a class="p-2 text-white bg-secondary active" href="${url}">${text} <span class="sr-only">${messages("(active)", lang)}</span></a>
<li class="nav-item active"><a href="${permalink}" class="nav-link">${text} <span class="sr-only">${messages("(active)", lang)}</span></a>
%else:
<a class="p-2 text-secondary" href="${url}">${text}</a>
<li class="nav-item"><a href="${url}" class="nav-link">${text}</a>
%endif
% endif
%endfor
Expand Down
60 changes: 60 additions & 0 deletions nikola/data/themes/bootblog4/templates/index.tmpl
@@ -0,0 +1,60 @@
## -*- coding: utf-8 -*-
<%namespace name="helper" file="index_helper.tmpl"/>
<%namespace name="math" file="math_helper.tmpl"/>
<%namespace name="comments" file="comments_helper.tmpl"/>
<%namespace name="pagination" file="pagination_helper.tmpl"/>
<%namespace name="feeds_translations" file="feeds_translations_helper.tmpl" import="*"/>
<%inherit file="base.tmpl"/>

<%block name="extra_head">
${parent.extra_head()}
% if posts and (permalink == '/' or permalink == '/' + index_file):
<link rel="prefetch" href="${posts[0].permalink()}" type="text/html">
% endif
${math.math_styles_ifposts(posts)}
</%block>

<%block name="content">
<%block name="content_header">
${feeds_translations.translation_link(kind)}
</%block>
% if 'main_index' in pagekind:
${front_index_header}
% endif
% if page_links:
${pagination.page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed)}
% endif
<div class="postindex">
% for post in posts:
<article class="h-entry post-${post.meta('type')}">
<header>
<h1 class="p-name entry-title"><a href="${post.permalink()}" class="u-url">${post.title()|h}</a></h1>
<div class="metadata">
<p class="byline author vcard"><span class="byline-name fn" itemprop="author">
% if author_pages_generated:
<a href="${_link('author', post.author())}">${post.author()|h}</a>
% else:
${post.author()|h}
% endif
</span></p>
<p class="dateline"><a href="${post.permalink()}" rel="bookmark"><time class="published dt-published" datetime="${post.formatted_date('webiso')}" title="${post.formatted_date(date_format)|h}">${post.formatted_date(date_format)|h}</time></a></p>
% if not post.meta('nocomments') and site_has_comments:
<p class="commentline">${comments.comment_link(post.permalink(), post._base_path)}
% endif
</div>
</header>
%if index_teasers:
<div class="p-summary entry-summary">
${post.text(teaser_only=True)}
%else:
<div class="e-content entry-content">
${post.text(teaser_only=False)}
%endif
</div>
</article>
% endfor
</div>
${helper.html_pager()}
${comments.comment_link_script()}
${math.math_scripts_ifposts(posts)}
</%block>

0 comments on commit bb28175

Please sign in to comment.