Implement Library page

[amercader]

Overview

Based on the design in Figma (shown at the bottom as of 20180920, it can be bound to change):

Things to note:

• The facets displayed on the wireframe should not be used as we don't have fields for these. See #70 for the ones we'll use
• Do not mention Working Groups for now
• It looks like topics (groups) have small descriptions. Clarify if this is the same description shown on the Topic page. If it's a separate one, we need to add a new field to the group schema to store it.

Tasks

• [x] Replace the lorem ipsum under the Library heading
• [x] Connect library topics (use helper function)
• [x] Connect homepage topics (use helper function)
• [x] Connect search by topic (including description/remove icon changes)
• [x] Connect facets filters (filtered pill)
• [x] Connect number of results found
• [x] Connect ordering drop-down
• [x] Connect actual search results
• [x] Connect pagination
• [x] ---
• [x] Not sure that dataset heading font size is replicated correctly
• [x] Fix topics (default/descriptions/mobile/etc) - https://github.com/okfn/ckanext-lacounts/issues/69#issuecomment-429028324
• [x] Fix dataset resources visited links colour
• [x] Implement the limit number of results feature (blocked by ckan-core) (part moved to #107)

---

---

Library layout:

{% ckan_extends %}

{% block subtitle %}{{ _("Library") }}{% endblock %}

{% block breadcrumb_content %}
  <li class="active">{{ h.nav_link(_("Library"), named_route='%s_search' % dataset_type, highlight_actions = 'new index') }}</li>
{% endblock %}

{% block primary_content %}

  <h1>{{ _("Library") }}</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus odio sit amet turpis fermentum, in tempus mauris egestas. Vivamus ligula ligula, interdum at orci eget.
  </p>
  <ul class="featured-filters">
    <li class="education active">
      <a class="filter" href="dataset?topic=education">
        <span class="filter-icon">{% include 'icons/book.svg' %}</span>
        <span class="filter-label">Education</span>
      </a>
      <span class="filter-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus odio sit amet turpis fermentum, in tempus mauris egestas. Vivamus ligula ligula, interdum at orci eget, elementum ultricies risus.</span>
      <a class="remove-filter" href="dataset"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">{{ _("Remove filter") }}</span></a>
    </li>
    <li class="environment">
      <a class="filter" href="dataset?topic=environment">
        <span class="filter-icon">{% include 'icons/leaf.svg' %}</span>
        <span class="filter-label">Environment</span>
      </a>
      <span class="filter-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus odio sit amet turpis fermentum, in tempus mauris egestas. Vivamus ligula ligula, interdum at orci eget, elementum ultricies risus.</span>
      <a class="remove-filter" href="dataset"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">{{ _("Remove filter") }}</span></a>
    </li>
    <li class="housing">
      <a class="filter" href="dataset?topic=housing">
        <span class="filter-icon">{% include 'icons/keys.svg' %}</span>
        <span class="filter-label">Housing</span>
      </a>
      <span class="filter-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus odio sit amet turpis fermentum, in tempus mauris egestas. Vivamus ligula ligula, interdum at orci eget, elementum ultricies risus.</span>
      <a class="remove-filter" href="dataset"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">{{ _("Remove filter") }}</span></a>
    </li>
    <li class="immigration">
      <a class="filter" href="dataset?topic=immigration">
        <span class="filter-icon">{% include 'icons/passport.svg' %}</span>
        <span class="filter-label">Immigration</span>
      </a>
      <span class="filter-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus odio sit amet turpis fermentum, in tempus mauris egestas. Vivamus ligula ligula, interdum at orci eget, elementum ultricies risus.</span>
      <a class="remove-filter" href="dataset"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">{{ _("Remove filter") }}</span></a>
    </li>
    <li class="transportation">
      <a class="filter" href="dataset?topic=transportation">
        <span class="filter-icon">{% include 'icons/bus.svg' %}</span>
        <span class="filter-label">Transportation</span>
      </a>
      <span class="filter-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus odio sit amet turpis fermentum, in tempus mauris egestas. Vivamus ligula ligula, interdum at orci eget, elementum ultricies risus.</span>
      <a class="remove-filter" href="dataset"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">{{ _("Remove filter") }}</span></a>
    </li>
    <li class="wellbeing">
      <a class="filter" href="dataset?topic=well-being">
        <span class="filter-icon">{% include 'icons/heart.svg' %}</span>
        <span class="filter-label">Well-being</span>
        <span class="filter-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus odio sit amet turpis fermentum, in tempus mauris egestas. Vivamus ligula ligula, interdum at orci eget, elementum ultricies risus.</span>
        <a class="remove-filter" href="dataset"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">{{ _("Remove filter") }}</span></a>
    </li>
    <li class="filter-description">

      {# TO:DO
        Add some JS to move descriptions into here when using grid layout
        (when .featured-filters has display: grid)
      #}

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus odio sit amet turpis fermentum, in tempus mauris egestas. Vivamus ligula ligula, interdum at orci eget, elementum ultricies risus
    </li>
  </ul>

  <a class="show-filters btn btn-default">{{ _("Show all filters") }}</a>

  <span class="filtered pill">Sub-national
    <a href="dataset" class="remove-filter" title="Remove"><i class="fa fa-times"></i></a>
  </span>

  <form class="results-controls">
    <div class="number-of-results">
      <span class="sr-only">Showing 25</span>
      <span class="total">&nbsp;of <strong>5885</strong> results.</span>
      <span class="to-show">Show <a class="active">25</a> <em class="sr-only">or</em> <a>50</a> <em class="sr-only">or</em> <a>100</a></span>
    </div>

    <div class="form-select form-group control-order-by">
        <label for="field-order-by">Order by</label>
        <select id="field-order-by" name="sort" class="form-control">
          <option value="score desc, metadata_modified desc" selected="selected">Relevance</option>
          <option value="title_string asc">Name Ascending</option>
          <option value="title_string desc">Name Descending</option>
          <option value="metadata_modified desc">Last Modified</option>
        </select>
      </div>
  </form>

  <ul class="dataset-list list-unstyled">
    <li class="dataset-item">
      <article class="dataset-content">
        <h1 class="dataset-heading">
          <a href="">ReliefWeb Crisis App Data</a>
        </h1>
        <a class="publisher">
          OCHA ROSEA
        </a>
        <div>
          This dataset contains key figures (topline numbers) on the world's pressing humanitarian crisis as shown on ReliefWeb's Crises app. The data includes key figures such as the...
        </div>
        <ul class="dataset-resources list-unstyled">
          <li>
            <a href="/dataset/reliefweb-crisis-app-data" class="label label-default" data-format="csv">CSV</a>
          </li>
          <li>
            <a href="/dataset/reliefweb-crisis-app-data" class="label label-default" data-format="json">JSON</a>
          </li>
        </ul>
      </article>
    </li>

    <li class="story-item">
      <a class="image">
        <img src="/images/story-featured-img-example.jpg" alt="">
      </a>
      <article class="dataset-content">
        <h1 class="dataset-heading">
          <a href="">NDSC: Access to Parks and Greenspace</a>
        </h1>
        <div>
          Parks are a tangible reflection of the quality of life in a community. According to the National Recreation and Parks Association, parks bring economic value to a community by raising local property values. The presence of parks also provides environment and health...
        </div>
        <ul class="dataset-resources list-unstyled">
          <li>
            <a class="label label-story">Story</a>
          </li>
        </ul>
      </article>
    </li>
  </ul>

  <div class="pagination-wrapper">
    <ul class="pagination">
      <li class="active">
        <a href="/dataset?page=1">1</a>
      </li>
      <li>
        <a href="/dataset?page=2">2</a>
      </li>
      <li>
        <a href="/dataset?page=3">3</a>
      </li>
      <li class="disabled">
        <a href="#">...</a></li>
        <li>
          <a href="/dataset?page=43">43</a>
        </li>
        <li>
          <a href="/dataset?page=2">»</a>
        </li>
      </ul>
    </div>

{% endblock %}

{% block footer %}
  {% if h.check_access('package_create') %}
    <div class="admin-page-actions">
      {{ h.snippet ('snippets/add_dataset.html', dataset_type=dataset_type) }}
    </div>
  {% endif %}
  {{ super() }}
{% endblock %}

[roll]

@amercader I think we should hide blog posts from the search results on the library page.

[amercader]

The client ask for them to appear (if necessary we can hide them later with some before_index trickery)

[roll]

Also, wondering what's controls will be available (and where) to create dataset/story (at least for now, we don't have such thing for stories)

[smth]

I was thinking, because we have that floating button to edit content (on the home page at least), that we do something similar with create dataset / story. Will these be two separate links?

[roll]

Following this path (with the top left buttons) we can have edit (pen) button on the main page and add (plus) on the library/publishers/etc pages

[amercader]

I think that to make our lives easier we can stick to what CKAN does by default and use the buttons on the top of the content:

Otherwise we'll need to 1. Add the new floating buttons on all relevant pages and 2. Hide the ones that CKAN adds.

[smth]

I've already moved one of them:

All of that template is being / going to need to be replaced anyway.

[smth]

I've added my work here https://github.com/okfn/ckanext-lacounts/compare/library

Stuff to do:

moved to the first post

[smth]

@roll currently all the topic filters have the active class by default, they should only have that class when that filter is active.

The descriptions are missing (they should be displaying below each active filter on smaller screens, without the above JS item for large screens being implemented).

The layout is broken on medium screens, I'm guessing because some HTML has changed.

[roll]

@smth Thanks. I had run out of time yesterday and didn't test it on small screens. I'll fix it now

[roll]

Customizable datasets per page -> https://github.com/okfn/ckanext-lacounts/issues/107

Here I will fallback it to Found X results