Skip to content
Permalink
Browse files
avoid JQuery duplication
  • Loading branch information
ralsina committed Sep 12, 2015
1 parent 90e2e87 commit 86ad680790ad14c4d909b6731a07f3e5bc11913d
Showing with 36 additions and 9 deletions.
  1. +4 −2 listings/book.tmpl
  2. +4 −2 listings/book2.tmpl
  3. +20 −1 stories/creating-a-custom-page.rst
  4. +4 −2 templates/book.tmpl
  5. +4 −2 templates/book2.tmpl
@@ -6,8 +6,6 @@

<%block name="extra_head">
${parent.extra_head()}
<script src="/assets/js/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
<style>
.smallcaps {
@@ -81,6 +79,10 @@
</div>
</div>
</article>
</%block>

<%block name="extra_js">
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<script>
$('#scrolling-cont').flowtype({
minimum: 500,
@@ -6,8 +6,6 @@

<%block name="extra_head">
${parent.extra_head()}
<script src="/assets/js/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
<style>
.smallcaps {
@@ -81,6 +79,10 @@
</div>
</div>
</article>
</%block>

<%block name="extra_js">
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<script>
$('#scrolling-cont').flowtype({
minimum: 500,
@@ -114,7 +114,26 @@ per line. We *could* tweak that using CSS font sizes, but let's go crazy and use

Why FlowType.JS? It dynamically adjust the font size so that columns always have the right font size for
their width. That's just nice. To do that, we need to add JQuery and run a little JS in a ``<script>``
tag at the end of the template.
tag at the end of the page.

For that, the template offers the ``extra_js`` block. Since the bootstrap3 theme we are using already
loads JQuery, there is no need to do that, so it's just a matter of loading FlowType.JS and
initializing it:

.. code:: javascript+mako

<%block name="extra_js">
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<script>
$('#scrolling-cont').flowtype({
minimum: 500,
maximum: 1200,
minFont: 20,
maxFont: 40,
fontRatio: 50
});
</script>
</%block>

Figures: figures and multicolumn layout don't go along very well, they may even get split between columns!
The easiest solution is to make them fit in a "page", so, some more CSS for that.
@@ -6,8 +6,6 @@

<%block name="extra_head">
${parent.extra_head()}
<script src="/assets/js/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
<style>
.smallcaps {
@@ -81,6 +79,10 @@
</div>
</div>
</article>
</%block>

<%block name="extra_js">
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<script>
$('#scrolling-cont').flowtype({
minimum: 500,
@@ -6,8 +6,6 @@

<%block name="extra_head">
${parent.extra_head()}
<script src="/assets/js/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
<style>
.smallcaps {
@@ -81,6 +79,10 @@
</div>
</div>
</article>
</%block>

<%block name="extra_js">
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
<script>
$('#scrolling-cont').flowtype({
minimum: 500,

0 comments on commit 86ad680

Please sign in to comment.