Continues work on searchresults design, small fixes/changes of the header design.

ckanext/odsh/fanstatic/odsh.js

 $(document).ready(function() {
-    $('.filter_checkbox').change(function() {
-	window.location = $(this).siblings().first().attr('href');
+    $('.mylabel').click(function() {
+	console.log($(this).siblings());
+	window.location = $(this).siblings('a').attr('href');
     });
 });
 

ckanext/odsh/plugin.py

@@ -6,8 +6,22 @@ from ckan.lib.plugins import DefaultDatasetForm
 from ckan.common import OrderedDict
 import ckan.lib.helpers as helpers
 
+import logging
+
+log = logging.getLogger(__name__)
+
 _ = toolkit._
 
+def odsh_get_facet_items_dict(name, limit=None):
+    ''' 
+    Gets all facets like 'get_facet_items_dict' but sorted alphabetically
+    instead by count.
+    '''
+    facets = helpers.get_facet_items_dict(name, limit)
+    facets.sort(key=lambda it: (it['display_name'].lower(), -it['count']))
+    log.info(facets)
+    return facets
+
 def odsh_main_groups():
     '''Return a list of the groups to be shown on the start page.'''
 
@@ -67,14 +81,18 @@ class OdshPlugin(plugins.SingletonPlugin, DefaultTranslation, DefaultDatasetForm
         # other extensions.
         return {'odsh_main_groups': odsh_main_groups,
                 'odsh_now': odsh_now,
-        'odsh_group_id_selected':odsh_group_id_selected}
+                'odsh_group_id_selected': odsh_group_id_selected,
+                'odsh_get_facet_items_dict': odsh_get_facet_items_dict,
+        }
 
     def before_map(self, map):
         map.connect('info_page', '/info_page', controller='ckanext.odsh.controller:OdshRouteController', action='info_page')
         return map
 
     def dataset_facets(self, facets_dict, package_type):
-        return OrderedDict({'groups': _('Groups')})
+        # TODO: Frage von Pascal 12.10.2018: warum ist die Ordnung hier genau umgekehrt (von hinten nach vorne?)
+        return OrderedDict({'res_format': _('Dateiformat'),
+                            'groups': _('Kategorie')})
 
     def organization_facets(self, facets_dict, organization_type, package_type):
         return facets_dict

ckanext/odsh/public/odsh.css

@@ -73,13 +73,17 @@ input, button, select, textarea {
     padding-top: 0px;
 }
 
+.module-content {
+    padding: 0;
+}
+
 input[type=radio], input[type=checkbox] {
     top: 0px;
 }
 
 .nav-simple>li {
     border-bottom: 0px;
-    padding: 14px 18px;
+    padding: 15px 0px 15px 8px;
 }
 
 @media (min-width: 768px){
@@ -98,7 +102,8 @@ input[type=radio], input[type=checkbox] {
 }
 
 .secondary.span3 {
-    width: 240px;
+    width: 210px;
+    padding: 20px 16px 0px;
 }
 
 .primary {
@@ -106,7 +111,7 @@ input[type=radio], input[type=checkbox] {
 }
 
 .primary.span9 {
-    width: 760px;
+    width: 780px;
 }
 
 .wrapper {
@@ -116,6 +121,41 @@ input[type=radio], input[type=checkbox] {
     border: none;
 }
 
+.karte_inner {
+    background-color: lightgrey;
+    height: 220px;
+    margin-bottom: 20px;
+}
+
+.filter-reset {
+    padding: 0px 0px 10px 0px;
+}
+
+.filter-reset-label {
+    float: left;
+}
+
+.filter-reset-box {
+    float: right;
+    background-color: white;
+    padding: 0px 10px 0px 10px;
+}
+
+.filter-reset-box a {
+    color: black;
+    font-size: 12px;
+}
+
+.filters section nav {
+    border-top: 2px solid #DBDBDB;
+}
+
+.filters section nav .nav-title {
+    padding: 15px 0px 0px 8px;
+    font-size: 12px;
+    color: black;
+}
+
 .nav-item .facet_label {
     display: block;
     float: left;
@@ -129,10 +169,52 @@ input[type=radio], input[type=checkbox] {
     display: block;
     float: right;
     background-color: white;
+    padding: 0px 2px 0px 2px;
+}
+
+.filter-checkbox {
+    
+}
+
+
+/* checkbox customize trick, see: https://stackoverflow.com/questions/24322599/css-why-cannot-change-checkbox-color-whatever-i-do */
+input[type=checkbox] {
+    display:none;
+}
+
+input[type=checkbox] + label.mylabel {
+    background: #fff;
+    border: 1px solid white;
+    height: 8px;
+    width: 8px;
+    display: inline-block;
+    padding: 0 0 0 0px;
 }
 
+input[type=checkbox]:checked + label.mylabel {
+    background: url(/base/images/checked.png);
+    background-color: #fff;
+    background-size: 8px 8px;
+    border: 1px solid black;
+    height: 8px;
+    width: 8px;
+    display:inline-block;
+    padding: 0 0px 0 0px;
 
+}
+
+label.mylabel  {
+    margin-right: 3px;
+    margin-bottom: 0px;
+    -webkit-user-select: none; /* Safari */        
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+/Edge */
+    user-select: none; /* Standard */
+}
 
+label.mylabel::after {
+    content: "";
+}
 
 /* following makes the secondary span (left side, facets etc.) the same height as the primary span */
 /* see: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height */

ckanext/odsh/public/odsh_header.css

@@ -96,10 +96,10 @@
 }
 
 #field-sitewide-search {
-    font-size: 87%
+    font-size: 87%;
     font-weight: 300;
     padding-left: .5em;
-    width: 97%;
+    width: 167px;
     line-height: 1.1;
     border-bottom: 2px solid #c2cbd6 !important;
     background: #f2f2f2;

ckanext/odsh/templates/package/search.html

@@ -11,7 +11,18 @@
 ##
 ## tools on left side, ie filter
 {% block secondary_content %}
+<div class="karte_outer">
+  <p>Karte:</p>
+  <div class="karte_inner">
+    
+  </div>
+</div>
 <div class="filters">
+  <div class="container-fluid filter-reset">
+    <div class="filter-reset-label"><span>Filter:</span></div>
+    <div class="filter-reset-box"><a href="#">zurücksetzen</a></button></div>
+  </div>
+
     <div>
         {% for facet in c.facet_titles %}
         {{ h.snippet('snippets/facet_list.html', title=c.facet_titles[facet], name=facet) }}

ckanext/odsh/templates/page.html

@@ -30,7 +30,7 @@
 	  {% endblock %}
 
 	  {% block primary %}
-	    <div class="primary span9 test">
+	    <div class="primary span9">
 	      {% block primary_content %}
                 {{ super() }}
 	      {% endblock %}

ckanext/odsh/templates/snippets/facet_list.html

 {% ckan_extends %}
+
+{% block facet_list_heading %}
+  {# {% set title = title or h.get_facet_title(name) %}
+  {{ title }} #}
+{% endblock %}
+
 {% block facet_list_items %}
-{% with items = items or h.get_facet_items_dict(name) %}
+{# {% with items = items or h.get_facet_items_dict(name,20) %} #}
+{% with items = items or h.odsh_get_facet_items_dict(name,20) %}
 {% if items %}
 <nav>
+  {% set title = title or h.get_facet_title(name) %}
+  <div class="nav-title">{{ title }}</div>
     <ul class="{{ nav_class or 'unstyled nav nav-simple nav-facet' }}">
         {% for item in items %}
         {% set href = h.remove_url_param(name, item.name, extras=extras, alternative_url=alternative_url) if
@@ -13,7 +22,9 @@
         {% set label_truncated = h.truncate(label, 26) if not label_function else label %}
         <li class="{{ nav_item_class or 'nav-item' }}">
 	  <div class="facet_label">
-	    <input type="checkbox" {% if item.active %} checked {% endif %} class="filter_checkbox"/>
+	    {# TODO: checkbox-id vereinheitlichen (code-duplikation) und sicher gegen Titel mit Leerzeichen machen! #}
+	    <input type="checkbox" {% if item.active %} checked {% endif %} class="filter-checkbox" id="check-{{ title.lower() }}-{{ loop.index }}"/>
+	    <label class="mylabel" for="check-{{ title.lower() }}-{{ loop.index }}"></label>
 	    <a href="{{ href }}" title="{{ label if label != label_truncated else '' }}">
                 <span>{{ label_truncated }}</span>
             </a>
@@ -26,7 +37,9 @@
     </ul>
 </nav>
 
-<p class="module-footer">
+{# TODO: when there are more than N facets ('with items...' above), how many should be
+displayed and how should these links look? Pascal R. 12.10.2018 #}
+{#<p class="module-footer">
     {% if h.get_param_int('_%s_limit' % name) %}
     {% if h.has_more_facets(name) %}
     <a href="{{ h.remove_url_param('_%s_limit' % name, replace=0, extras=extras, alternative_url=alternative_url) }}"
@@ -36,7 +49,8 @@
     <a href="{{ h.remove_url_param('_%s_limit' % name, extras=extras, alternative_url=alternative_url) }}" class="read-more">{{
         _('Show Only Popular {facet_type}').format(facet_type=title) }}</a>
     {% endif %}
-</p>
+</p>#}
+
 {% else %}
 <p class="module-content empty">{{ _('There are no {facet_type} that match this search').format(facet_type=title) }}</p>
 {% endif %}