Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improved resilience by outputting more data in the HTML #139

Closed
wants to merge 7 commits into from
Closed

Improved resilience by outputting more data in the HTML #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
46d31d6
Individual dataset pages viewable without JS.
dracos Mar 28, 2018
7b71d0f
Organization pages now show data without JS.
dracos Mar 28, 2018
e8e2358
Correct an if statement.
dracos Mar 28, 2018
1267c8b
Only show search filter if JS enabled.
dracos Mar 28, 2018
5372e81
Datasets page works better without JavaScript.
dracos Mar 28, 2018
5b4bf87
Merge branch 'gh-pages' into dracos-improved-resilience
timwis Jan 2, 2023
a5fc771
Use group_by filter to group organization filter on datasets page
timwis Jan 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 19 additions & 0 deletions _includes/filter-category.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{% assign sizes = '' | split: "" %}
{% for category in include.categories %}
{% assign c = site.datasets | where:"category", category | size %}
{% assign sizes = sizes | push: c %}
{% endfor %}
{% assign sorted_sizes = sizes | sort | reverse | uniq %}
{% for s in sorted_sizes %}
{% for category in include.categories %}
{% assign c = sizes[forloop.index0] %}
{% if c == s %}
<span class="list-group-item">
<li class="d-flex justify-content-between align-items-center">
{{ category }}
<span class="badge badge-primary badge-pill">{{ s }}</span>
</li>
</span>
{% endif %}
{% endfor %}
{% endfor %}
8 changes: 8 additions & 0 deletions _includes/filter-organization.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{% for org in include.organizations %}
<a href="{{ site.baseurl }}{{ org.url }}" class="list-group-item">
<li class="d-flex justify-content-between align-items-center">
{{ org.name }}
<span class="badge badge-primary badge-pill">{{ org.size }}</span>
</li>
</a>
{% endfor %}
2 changes: 2 additions & 0 deletions _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@
{% endif %}

<script>
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, 'js');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also use the Element.classList api via document.documentElement.classList.replace('no-js', 'js')

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know what your browser support level is, but replace() was only added in Chrome 61, and isn't in Edge or Safari. classList itself is IE10+, and speaking only for myself I still have to support older than that sometimes. Seems like given it's easy to do here and clear what's happening, not sure there's a benefit to using classList.


var settings = {
BASE_URL: {{ site.baseurl | jsonify }},
PAGE_URL: {{ page.url | jsonify }},
Expand Down
2 changes: 1 addition & 1 deletion _layouts/dataset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{% capture organization_url %}{{ site.baseurl }}/datasets/?organization={{ organization.title | slugify }}{% endcapture %}
<div class="container">
<div data-component="view-switcher">
<div data-component="dataset-display" data-hook="view" data-view="display" typeof="dcat:Dataset" resource="{{ page.url }}">
<div data-component="dataset-display" data-hook="view" data-view="display" typeof="dcat:Dataset" resource="{{ page.url }}" style="display:block">
<div class="row">
{% if organization %}
<div class="col-md-3" property="dct:publisher" resource="{{ organization_url }}">
Expand Down
2 changes: 1 addition & 1 deletion _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html prefix="dct: http://purl.org/dc/terms/
<html class="no-js" prefix="dct: http://purl.org/dc/terms/
rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns#
dcat: http://www.w3.org/ns/dcat#
foaf: http://xmlns.com/foaf/0.1/">
Expand Down
17 changes: 14 additions & 3 deletions _layouts/organization.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@
layout: default
---
{% include breadcrumbs.html parent="Organizations" %}
{% assign datasets = site.datasets | where:"organization", page.title %}
{% assign datasets_count = datasets | size %}

<div class="container">
<div data-component="view-switcher">
<div data-hook="view" data-view="display">
<div data-hook="view" data-view="display" style="display:block">
<div class="row">
{% if page.logo and page.logo != empty %}
<div class="col-sm-3" style = "float: left;">
Expand All @@ -20,9 +23,17 @@ <h1>
</h1>
<p>{{ page.description }}</p>
<div data-component="datasets-list" data-organization="{{ page.title | slugify }}">
<h3 class="datasets-count" data-hook="datasets-count"></h3>
<h3 class="datasets-count" data-hook="datasets-count">{{ datasets_count }}
{% if datasets_count == 1 %}dataset{% else %}datasets{% endif %}</h3>
<input type="text" data-hook="search-query" placeholder="Search..." class="form-control mb-3">
<div data-hook="datasets-items"></div>
<div data-hook="datasets-items">
{% for dataset in datasets %}
<dataset>
<h3><a href="{{ site.baseurl }}{{ dataset.url }}">{{ dataset.title }}</a></h3>
{{ dataset.notes }}
</dataset>
{% endfor %}
</div>
</div>
</div>
<div class="view-code-link">
Expand Down
12 changes: 12 additions & 0 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
input[data-hook=search-query] {
display: none;
}

.js input[data-hook=search-query] {
display: block;
}

.js .js-hidden { display: none; }
.js-shown { display: none; }
.js .js-shown { display: block; }

.organization-thumbnail img {
width: 64px;
}
Expand Down
45 changes: 41 additions & 4 deletions datasets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,57 @@
permalink: /datasets/
---
{% include breadcrumbs.html %}
{% assign datasets_count = site.datasets | size %}

<div class="row">
<div class="col-sm-4">

<h3>Categories</h3>
<div class="list-group" data-component="categories-filter" data-show="5"></div>
<div class="list-group" data-component="categories-filter" data-show="5">
{% assign categories = site.datasets | map: 'category' | uniq %}
{% assign first_set = categories | slice: 0, 5 %}
{% assign other_categories = categories | slice: 5 %}
{% include filter-category.html categories=first_set %}

<div class="js-hidden">
{% include filter-category.html categories=other_categories %}
</div>
{% if other_categories.size > 0 %}
<div class="js-shown">
<a href="#" class="list-group-item">Show {{ other_categories.size }} more...</a>
</div>
{% endif %}
</div>

<h3>Organizations</h3>
<div class="list-group" data-component="organizations-filter" data-show="15"></div>
<div class="list-group" data-component="organizations-filter" data-show="15">
{% assign datasets_by_org = site.datasets | group_by: "organization" | sort: "size" | reverse %}
{% assign first_set = datasets_by_org | slice: 0, 15 %}
{% assign other_orgs = datasets_by_org | slice: 15 %}
{% include filter-organization.html organizations=first_set %}

<div class="js-hidden">
{% include filter-organization.html organizations=other_orgs %}
</div>
{% if other_orgs.size > 0 %}
<div class="js-shown">
<a href="#" class="list-group-item">Show {{ other_orgs.size }} more...</a>
</div>
{% endif %}
</div>
</div>
<div class="col-sm-8" data-component="datasets-list">
<h3 class="datasets-count" data-hook="datasets-count"></h3>
<h3 class="datasets-count" data-hook="datasets-count">{{ datasets_count }}
{% if datasets_count == 1 %}dataset{% else %}datasets{% endif %}</h3>
<a href="{{ site.baseurl }}/add-dataset/" class="btn btn-outline-secondary float-right admin-only" data-hook="add-dataset-btn"><i class="fa fa-plus"></i> Add Dataset</a>
<input type="text" data-hook="search-query" placeholder="Search..." class="form-control mb-3">
<div data-hook="datasets-items"></div>
<div data-hook="datasets-items">
{% for dataset in site.datasets %}
<dataset>
<h3><a href="{{ site.baseurl }}{{ dataset.url }}">{{ dataset.title }}</a></h3>
{{ dataset.notes }}
</dataset>
{% endfor %}
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion datasets.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{
"title": {{ dataset.title | jsonify }},
"organization": {{ dataset.organization | jsonify }}{% if dataset.notes != "" %},
"notes": {{ dataset.notes | jsonify }}{% endif %}{% if dataset.notes != "" %},
"notes": {{ dataset.notes | jsonify }}{% endif %}{% if dataset.category != "" %},
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

"category": {{ dataset.category | jsonify }}{% endif %},
"url": "{{ site.baseurl }}{{ dataset.url }}"
}{% unless forloop.last %},{% endunless %}{% endfor %}
Expand Down