Skip to content

Commit

Permalink
Merge pull request #46 from pygame/wiki-readability
Browse files Browse the repository at this point in the history 
Wiki readability
  • Loading branch information
@illume
illume committed Mar 1, 2018
2 parents 31a5d77 + 89187f3 commit 729a5ae
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 81 deletions.
109 changes: 37 additions & 72 deletions pygameweb/templates/wiki/view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,121 +9,86 @@
{% cache 60*5, 'wiki_content', link %}
{% set wiki = wiki_for(link) %}
{% set content_rendered, toc_rendered = wiki.content_toc %}
{% if toc_rendered %}

<div class="row">
<div class="col-sm-3 wiki-toc-nav">
{{ toc_rendered | safe }}
<div id="toc-sidebar">
{% if toc_rendered %}
{{ toc_rendered | safe }}
{% endif %}

<nav class="wiki-nav">
<p>Wiki tools</p>
<a class="btn btn-default" href="{{ url_for('wiki.edit', link=link) }}" role="button">Edit</a>
<a class="btn btn-default" href="{{ url_for('wiki.source', link=link) }}" role="button">Source</a>
<a class="btn btn-default" href="{{ url_for('wiki.history', link=link) }}" role="button">History</a>
{#- <a class="btn btn-default" href="#" role="button">Links</a> -#}
{#- <a class="btn btn-default" href="#" role="button">Wiki Map</a> -#}
<a class="btn btn-default" href="{{ url_for('wiki.recent') }}" role="button">Recent Changes</a>
</nav>
</div>
</div>
<div class="col-sm-9">
{% endif %}

<h1>{{ wiki.title }} &mdash; <a href="/wiki">wiki</a></h1>

<nav>
<a class="btn btn-default" href="{{ url_for('wiki.edit', link=link) }}" role="button">Edit</a>
<a class="btn btn-default" href="{{ url_for('wiki.source', link=link) }}" role="button">Source</a>
<a class="btn btn-default" href="{{ url_for('wiki.history', link=link) }}" role="button">History</a>
{#- <a class="btn btn-default" href="#" role="button">Links</a> -#}
{#- <a class="btn btn-default" href="#" role="button">Wiki Map</a> -#}
<a class="btn btn-default" href="{{ url_for('wiki.recent') }}" role="button">Recent Changes</a>
</nav>

<div class="wiki-content">
{{ content_rendered | safe }}
</div>

{% if toc_rendered %}
</div>
</div>
{% endif %}

{% endcache %}
{% endblock %}


{#
Use a nicer side bar table of contents navigation component.
https://afeld.github.io/bootstrap-toc/
#}



{% block body_attribs %}{{ super() }}{% endblock body_attribs %}

{%- block styles %}
{{ super() }}
<style>
.wiki-toc-nav .nav {
max-width: 170px;
}
#toc-sidebar {max-width: 170px;}
.header_link {visibility:hidden; padding-left:5px;}
.wiki-heading:hover .header_link {visibility: visible;}
@media(max-width:768px){
.wiki-toc-nav .nav {
#toc-sidebar {
max-width: inherit;
}
}
@media(min-width:1200px){
.wiki-toc-nav .nav {
max-width: 250px;
@media(min-width:780px){
#toc-sidebar {
position: fixed;
left: 20px;
}
}
.wiki-nav {
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 20px;
padding: 10px 15px;
}

.wiki-toc-nav .nav>li>a{
display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676
display:block;padding:4px 4px;font-size:13px;font-weight:500;color:#767676
}
.wiki-toc-nav .nav>li>a:focus,.wiki-toc-nav .nav>li>a:hover{
padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c
padding-left:3px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c
}
.wiki-toc-nav .nav>.active:focus>a,.wiki-toc-nav .nav>.active:hover>a,.wiki-toc-nav .nav>.active>a{
padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c
padding-left:2px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c
}
.wiki-toc-nav .nav .nav{
padding-bottom:10px
}
.wiki-toc-nav .nav .nav>li>a{
padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400
padding-top:1px;padding-bottom:1px;padding-left:14px;font-size:12px;font-weight:400
}
.wiki-toc-nav .nav .nav>li>a:focus,.wiki-toc-nav .nav .nav>li>a:hover{
padding-left:29px
padding-left:13px
}
.wiki-toc-nav .nav .nav>.active:focus>a,.wiki-toc-nav .nav .nav>.active:hover>a,.wiki-toc-nav .nav .nav>.active>a{
padding-left:28px;font-weight:500
padding-left:12px;font-weight:500
}
.wiki-toc-nav .nav>.active>ul{
display:block
}
</style>

{% endblock %}
{%- block scripts %}
{{ super() }}
<script>
/*
* jQuery throttle / debounce - v1.1 - 3/7/2010
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

$(function() {
var $toc = $('#toc'),
tooThin = $(window).width() < 769,
limit = $toc.offset().top,
$window = $(window),
shouldAffix = function () {
var scrollTop = $window.scrollTop();
if (!tooThin && scrollTop >= limit) {
$toc.addClass('affix');
} else {
$toc.removeClass('affix');
}
};
$(window).scroll($.throttle(150, shouldAffix));
$(window).resize($.throttle(150, function() {
tooThin = $window.width() < 769;
shouldAffix();
}));
});
</script>
{% endblock %}
18 changes: 13 additions & 5 deletions pygameweb/wiki/wiki.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,12 +169,20 @@ def table_of_contents(pq_content):
# for i, heading in enumerate(pq_content.find('h1,h2,h3,h4')):
for i, heading in enumerate(pq_content.find('h1,h2,h3,h4')):
title = pq(heading).text()
pq(heading).attr('id', title)
header_link = (pq('<a title="Permalink to this definition">¶</a>')
.addClass('header_link')
.attr('href', '#' + title)
)
(pq(heading)
.attr('id', title)
.addClass('wiki-heading')
.append(header_link))

link = (pq('<a></a>')
.text(title)
.attr('href', '#' + title)
.addClass('li' + heading.tag)
.wrap('<li>'))
.text(title)
.attr('href', '#' + title)
.addClass('li' + heading.tag)
.wrap('<li>'))

if heading.tag in ['h1', 'h2']:
previous_heading = heading
Expand Down
8 changes: 4 additions & 4 deletions tests/unit/pygameweb/wiki/test_wiki.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@ def test_wiki_section():
"""
res = _wiki_section(content).outerHtml()
assert '<h1 id="Hello there matey">' in res, 'because headers should have an id'
assert '<h2 id="Another section, another day">' in res
assert '<h1 id="Hello there matey"' in res, 'because headers should have an id'
assert '<h2 id="Another section, another day"' in res


def test_wiki_section_h3():
Expand All @@ -131,5 +131,5 @@ def test_wiki_section_h3():
<h3>And finally the last one</h3>
"""
res = _wiki_section(content).outerHtml()
assert '<h3 id="Hello there matey">' in res, 'because headers should have an id'
assert '<h3 id="Another section, another day">' in res
assert '<h3 id="Hello there matey"' in res, 'because headers should have an id'
assert '<h3 id="Another section, another day"' in res

0 comments on commit 729a5ae

Please sign in to comment.