Merge lp:~widelands-dev/widelands-website/encyclopedia_beautification into lp:widelands-website

[kaputtnik]

Encyclopedia: Redesign of startpage and filter for buildings

Rework of encyclopedia startpage: https://bugs.launchpad.net/widelands-website/+bug/336021/+attachment/4832507/+files/encyclopedia.jpg

Encyclopedia Buildings:
1. Added links/anchors to/from enhanced buildings (red arrows in this image): https://bugs.launchpad.net/widelands-website/+bug/336021/+attachment/4834002/+files/encyclopedia_buildings.jpg
2. Added js filter to show only buildings of specific size and type: https://bugs.launchpad.net/widelands-website/+bug/336021/+attachment/4836278/+files/encyclopedia_buildings_filtered.jpg

[lp:~widelands-dev/widelands-website/encyclopedia_beautification]

460. By kaputtnik on 2017-03-13

possibility to search only for size/type; added comments

461. By kaputtnik on 2017-03-14

added smooth scrolling; played with js

[kaputtnik (franku)]

Addressed the nits from https://bugs.launchpad.net/widelands-website/+bug/336021/comments/24

Merged and deployed now.

=== modified file 'media/css/help.css'
--- media/css/help.css	2015-09-16 20:21:15 +0000
+++ media/css/help.css	2017-03-14 20:13:56 +0000
@@ -22,4 +22,12 @@
 
 img.icon {
 	margin: 0px 10px 10px 0px;
-}
\ No newline at end of file
+}
+
+/* Let Table headers look like h2 */
+caption{
+    font-size: 1.5em;
+    color: #181;
+    margin: 0.8em 0em 0.5em 0em;
+    white-space: nowrap;
+}

=== added file 'media/js/encyclopedia.js'
--- media/js/encyclopedia.js	1970-01-01 00:00:00 +0000
+++ media/js/encyclopedia.js	2017-03-14 20:13:56 +0000
@@ -0,0 +1,107 @@
+$(document).ready(function() {
+    var elem = document.getElementById('set_display');
+    elem.addEventListener('click', set_display);
+    // Find names of checkboxes:
+    checkb_names = get_input_names(); 
+    // Initialize after reload, e.g. pressing F5:
+    init_checkboxes();
+
+    // Smooth scrolling, taken from
+    // http://stackoverflow.com/a/18795112
+    $('a[href*=#]').click(function(event){
+        $('html, body').animate({
+            scrollTop: $( $.attr(this, 'href') ).offset().top
+        }, 500);
+        event.preventDefault();
+    });
+});
+
+function get_input_names(){
+    var inp = document.getElementById('size_select').getElementsByTagName('input');
+    var n = [];
+    for (var i=0; i<inp.length; i++){
+        if (! n.includes(inp[i].name)){
+            n.push(inp[i].name);
+            }
+    }
+    return n;
+}
+
+function set_display(){
+    // Hide/unhide tables and/or rows
+    // Tables get hidden when filtering by size
+    // Rows get hidden when filtering by type
+    for (var y=0; y<checkb_names.length; y++){
+        var option_boxes = document.getElementsByName(checkb_names[y]);
+        if ( check_checked(option_boxes) === false ){
+            // Mark all as checked if none is checked for one type of filter
+            // This makes it possible to search e.g. for all of type
+            // 'Production' (and no 'size' is checked), or all of size
+            // 'Big' (and no 'type' is checked)
+            for (var j=0; j<option_boxes.length; j++){
+                option_boxes[j].checked = true;
+            }
+        }
+        for (var i = 0; i < option_boxes.length; i++) {
+            var elements = document.getElementsByName(option_boxes[i].value);
+            hide_unhide_elements(elements, option_boxes[i].checked);
+        }
+    }
+    // Filtering by type may lead into empty tables resulting in showing just
+    // rows with <th> or caption
+    hide_empty_tables();
+}
+
+function hide_unhide_elements(elem_list, checked){
+    elem_list.forEach( function(elem){
+        if (checked){
+            elem.style.display = '';
+        }else{
+            elem.style.display = 'none';
+        }
+    });
+}
+
+function check_checked(chb_list){
+    // Check if none of the checkbox is checked in this list
+    var c=0;
+    chb_list.forEach( function(chb){
+        if (! chb.checked){
+            c++;
+        }
+    });
+    if (c == chb_list.length){
+        return false;
+    }
+    return true;
+}
+
+function hide_empty_tables(){
+    // Hide a table if no row is displayed in it
+    var tables = document.getElementsByTagName('table');
+    for (var i=0; i<tables.length; i++){
+        var table = tables[i];
+        var hidden_rows = 0;
+        for (var x=0, row; row = table.rows[x]; x++){
+            if (row.style.display == 'none'){
+                hidden_rows++;
+            }
+        }
+        // +1 here because we need to count also <th>
+        if (table.rows.length == hidden_rows+1){
+            table.style.display = 'none';
+        }else{
+            table.style.display = '';
+        }
+    }
+}
+
+function init_checkboxes(){
+    // Mark all checkboxes as checked
+    for (var x=0; x<checkb_names.length; x++){
+        var option_boxes = document.getElementsByName(checkb_names[x]);
+        for (i=0; i < option_boxes.length; i++){
+            option_boxes[i].checked = true;
+        }
+    }
+}

=== modified file 'templates/wlhelp/base.html'
--- templates/wlhelp/base.html	2015-02-18 22:30:08 +0000
+++ templates/wlhelp/base.html	2017-03-14 20:13:56 +0000
@@ -5,6 +5,7 @@
 {% endblock %}
 
 {% block extra_head %}
-<link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/help.css" />
+	<link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/help.css" />
+	<script type="text/javascript" src="{{ MEDIA_URL }}js/encyclopedia.js"></script>
 {{ block.super}}
 {% endblock %}
\ No newline at end of file

=== modified file 'templates/wlhelp/buildings.html'
--- templates/wlhelp/buildings.html	2016-03-02 21:02:38 +0000
+++ templates/wlhelp/buildings.html	2017-03-14 20:13:56 +0000
@@ -10,86 +10,111 @@
 {% block content %}
 <h1>{{ tribe.displayname }}: Buildings</h1>
 <div class="blogEntry">
+	<div class="posRight">
+	<form id="size_select">
+		<fieldset style="display: inline; border: none">
+			{# Attribute 'name': Groups filters (sizes/types) #}
+			{# Attribute 'value': Corresponding names of html elements (tables/rows) #}
+			<legend>Show Buildings by Size and/or Type:</legend>
+			<input type="checkbox" id="small" name="sizes" value="size-S"  checked="checked" />
+			<label for="small">Small</label>
+			<input type="checkbox" id="medium" name="sizes" value="size-M"  checked="checked" />
+			<label for="medium">Medium</label>
+			<input type="checkbox" id="big" name="sizes" value="size-B" checked="checked" />
+			<label for="big">Big</label>
+			<input type="checkbox" id="mines" name="sizes" value="size-I"  checked="checked" />
+			<label for="mines">Mines</label><br />
+			<input type="checkbox" id="warehouse" name="types" value="type-W" checked="checked" />
+			<label for="warehouse">Warehouse</label>
+			<input type="checkbox" id="production" name="types" value="type-P"  checked="checked" />
+			<label for="production">Production</label>
+			<input type="checkbox" id="military" name="types" value="type-M"  checked="checked" />
+			<label for="military">Military</label>
+			<input type="checkbox" id="training" name="types" value="type-T" checked="checked" />
+			<label for="training">Trainingsites</label><br />
+			<button type="button" id="set_display" class="button">Update</button>
+		</fieldset>
+		</form>
+	</div>
 	<a href="{% url 'wlhelp_index' %}">Encyclopedia</a> &#187;
 	<a href="{% url 'wlhelp_tribe_details' tribe.name %}">{{ tribe.displayname }}</a> &#187;
 	Buildings
-	<br /><br />
-
-{# Headquarters #}
-	<h2>Headquarters</h2>
-	{% with buildings.headquarters as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-
-{# Small buildings #}
-{% if buildings.small.count %}
-	<h2>Small Buildings</h2>
-	{% with buildings.small as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-{% if buildings.small_enhanced.count %}
-	<h2>Small Enhanced Buildings</h2>
-	{% with buildings.small_enhanced as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-
-{# Medium buildings #}
-{% if buildings.medium.count %}
-	<h2>Medium Buildings</h2>
-	{% with buildings.medium as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-{% if buildings.medium_enhanced.count %}
-	<h2>Medium Enhanced Buildings</h2>
-	{% with buildings.medium_enhanced as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-
-{# Big buildings #}
-{% if buildings.big.count %}
-	<h2>Big Buildings</h2>
-	{% with buildings.big as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-{% if buildings.big_enhanced.count %}
-	<h2>Big Enhanced Buildings</h2>
-	{% with buildings.big_enhanced as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-
-{# Mines #}
-{% if buildings.mine.count %}
-	<h2>Mines</h2>
-	{% with buildings.mine as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-{% if buildings.mine_enhanced.count %}
-	<h2>Enhanced Mines</h2>
-	{% with buildings.mine_enhanced as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-
-{# Ports #}
-{% if buildings.port.count %}
-	<h2>Ports</h2>
-	{% with buildings.port as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-{% if buildings.port_enhanced.count %}
-	<h2>Enhanced Ports</h2>
-	{% with buildings.port_enhanced as buildings %}
-		{% include "wlhelp/inlines/display_buildings.html" %}
-	{% endwith %}
-{% endif %}
-
+	
+	{# Headquarters #}
+	<div name="size-B">
+		{% with buildings.headquarters as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html" with header="Headquarters" %}
+		{% endwith %}
+	</div>
+	
+	<div name="size-S">
+	{# Small buildings #}
+	{% if buildings.small.count %}
+		{% with buildings.small as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Small Buildings" %}
+		{% endwith %}
+	{% endif %}
+	{% if buildings.small_enhanced.count %}
+		{% with buildings.small_enhanced as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Small Enhanced Buildings" %}
+		{% endwith %}
+	{% endif %}
+	</div>
+	
+	<div name="size-M">
+	{# Medium buildings #}
+	{% if buildings.medium.count %}
+		{% with buildings.medium as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Medium Buildings" %}
+		{% endwith %}
+	{% endif %}
+	{% if buildings.medium_enhanced.count %}
+		{% with buildings.medium_enhanced as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Medium Enhanced Buildings" %}
+		{% endwith %}
+	{% endif %}
+	</div>
+	
+	<div name="size-B">
+	{# Big buildings #}
+	{% if buildings.big.count %}
+		{% with buildings.big as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Big Buildings" %}
+		{% endwith %}
+	{% endif %}
+	{% if buildings.big_enhanced.count %}
+		{% with buildings.big_enhanced as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Big Enhanced Buildings" %}
+		{% endwith %}
+	{% endif %}
+	</div>
+	
+	<div name="size-I">
+	{# Mines #}
+	{% if buildings.mine.count %}
+		{% with buildings.mine as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Mines" %}
+		{% endwith %}
+	{% endif %}
+	{% if buildings.mine_enhanced.count %}
+		{% with buildings.mine_enhanced as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Enhanced Mines" %}
+		{% endwith %}
+	{% endif %}
+	</div>
+
+	<div name="size-B">
+	{# Ports #}
+	{% if buildings.port.count %}
+		{% with buildings.port as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Ports" %}
+		{% endwith %}
+	{% endif %}
+	{% if buildings.port_enhanced.count %}
+		{% with buildings.port_enhanced as buildings %}
+			{% include "wlhelp/inlines/display_buildings.html"  with header="Enhanced Ports" %}
+		{% endwith %}
+	{% endif %}
+	</div>
 </div>
 {% endblock %}

=== modified file 'templates/wlhelp/index.html'
--- templates/wlhelp/index.html	2016-07-02 12:38:06 +0000
+++ templates/wlhelp/index.html	2017-03-14 20:13:56 +0000
@@ -11,12 +11,20 @@
 <h1>Encyclopedia</h1>
 <div class="blogEntry">
 Encyclopedia &#187; Index
-<br /><br />
-<p>This is a list of all tribes in Widelands:</p>
-<ul>
+<h2>All Tribes in Widelands:</h2>
 {% for tribe in tribes %}
-	<li><a href="{% url 'wlhelp_tribe_details' tribe.name %}">{{ tribe.displayname }}</a></li>
+<p><img class="posLeft icon" src="{{ tribe.icon_url }}" alt="">
+	<a href="{% url 'wlhelp_tribe_details' tribe.name %}"><b>{{ tribe.displayname }}</b></a><br />
+	{{ tribe.descr }}</p>
+	<ul style="list-style: circle; margin-left: 1em; margin-top: -0.2em;">
+		<li><a href="{% url 'wlhelp_buildings' tribe.name %}">Buildings</a></li>
+		<li><a href="{% url 'wlhelp_wares' tribe.name %}">Wares</a></li>
+		<li><a href="{% url 'wlhelp_workers' tribe.name %}">Workers</a></li>
+		<li><a href="{{ tribe.network_pdf_url }}" target="_blank">Economy Network as PDF</a></li>
+		<li><a href="{{ tribe.network_gif_url }}" target="_blank">Economy Network as GIF</a></li>
+	</ul>
+	</li>
+</ul>
 {% endfor %}
-</ul>
 </div>
 {% endblock %}

=== modified file 'templates/wlhelp/inlines/display_buildings.html'
--- templates/wlhelp/inlines/display_buildings.html	2016-07-02 12:38:06 +0000
+++ templates/wlhelp/inlines/display_buildings.html	2017-03-14 20:13:56 +0000
@@ -1,4 +1,5 @@
 <table class="help">
+	<caption class="posLeft">{{ header }}</caption>
 	<tr>
 		<th>Image</th>
 		<th>Description</th>
@@ -7,7 +8,7 @@
 		<th>Stores</th>
 	</tr>
 {% for b in buildings %}
-	<tr class="{% cycle "odd" "even" %}">
+	<tr class="{% cycle "odd" "even" %}" name="type-{{ b.type }}">
 		<td>
 			<a href="{% url 'wlhelp_building_details' b.tribe.name b.name %}" title="{{ b.displayname }}" id="{{ b.name }}">
 				{{ b.displayname }}
@@ -15,7 +16,19 @@
 				<img alt="{{b.displayname}}" src="{{ b.image_url }}" />
 			</a>
 		</td>
-		<td>{{ b.help }}</td>
+		<td>
+			{{ b.help }}
+			{% if b.enhanced_from or b.enhancement %}
+			<ul>
+				{% if b.enhanced_from %}
+					<li>Could be enhanced from: <a href="#{{ b.enhanced_from.name }}">{{ b.enhanced_from.displayname }}</a></li>
+				{% endif %}
+				{% if b.enhancement %}
+					<li>Could be enhanced to: <a href="#{{ b.enhancement.name }}">{{ b.enhancement.displayname}}</a></li>
+				{% endif %}
+			</ul>
+			{% endif %}
+		</td>
 		<td>
 			{% for costs in b.get_build_cost %}
 				{% for w in costs %}

=== removed file 'widelandslib/conf.py'
--- widelandslib/conf.py	2016-12-13 18:28:51 +0000
+++ widelandslib/conf.py	1970-01-01 00:00:00 +0000
@@ -1,74 +0,0 @@
-#!/usr/bin/env python -tt
-# encoding: utf-8
-
-from ConfigParser import *
-import cStringIO
-
-__all__ = [
-    'WidelandsConfigParser'
-]
-
-
-def clear_string(s):
-    idx = s.find('#')
-    if idx != -1:
-        s = s[:idx]
-
-    s = s.strip("'\" _")
-    return s
-
-
-class WidelandsConfigParser(SafeConfigParser):
-
-    def __init__(self, fn):
-        """
-        Basically we only add one option: getstring which removes
-        ticks and '_' (the translation marker)
-        """
-        SafeConfigParser.__init__(self)
-
-        string = ''
-        try:
-            string = fn.read()
-        except AttributeError:
-            string = open(fn, 'r').read()
-
-        string = string.replace('%', '%%')
-
-        try:
-            self.readfp(cStringIO.StringIO(string))
-        except MissingSectionHeaderError:
-            string = '[global]\n' + string
-            self.readfp(cStringIO.StringIO(string))
-
-    def items(self, *args, **kwargs):
-        return dict(
-            (k, clear_string(v)) for (k, v) in
-            SafeConfigParser.items(self, *args, **kwargs)
-        ).items()
-
-    def getstring(self, s, opt, default=None):
-        try:
-            return clear_string(self.get(s, opt))
-        except NoOptionError:
-            if default is not None:
-                return default
-            raise
-
-    def getint(self, s, opt, default=None):
-        try:
-            return SafeConfigParser.getint(self, s, opt)
-        except NoOptionError:
-            if default is not None:
-                return default
-            raise
-        except ValueError:
-            return int(clear_string(SafeConfigParser.get(self, s, opt)))
-
-    def getboolean(self, s, opt, default=None):
-        try:
-            return SafeConfigParser.getboolean(self, s, opt)
-        except NoOptionError:
-            if default is not None:
-                return default
-            raise