Skip to content

Commit

Permalink
HDX-9975 add new coverage table
Browse files Browse the repository at this point in the history
  • Loading branch information
ccataalin committed Oct 16, 2024
1 parent 60c3c32 commit da8da76
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 44 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
$(document).ready(function () {
var IFRAME_ID = 'hapi-availability-iframe';
var IFRAME_MIN_HEIGHT = 866;
var $iframe = $('#' + IFRAME_ID);

$iframe.on('load', function () {
delayExecution(3000).then(function () {
adjustIframeHeight($iframe);
});
});

function delayExecution(milliseconds) {
return $.Deferred(function (defer) {
setTimeout(function () {
defer.resolve();
}, milliseconds);
}).promise();
}

function adjustIframeHeight($iframe) {
var frameDocument = $iframe[0].contentWindow.document;
var bodyHeight = $(frameDocument).find('body').outerHeight() + 50 || 0;
if (bodyHeight >= IFRAME_MIN_HEIGHT) {
$iframe.attr('height', bodyHeight);
}
$iframe.removeClass('placeholder').removeClass('bg-light');
}
});
6 changes: 6 additions & 0 deletions ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,12 @@ hdx-signals-scripts:
- bs_tooltip.js
- landing_pages/hdx_signals.js

hdx-hapi-scripts:
<<: *common-js
output: ckanext-hdx_theme/%(version)s_hdx-hapi-scripts.js
contents:
- landing_pages/hdx_hapi.js

hdx-signals-styles:
output: ckanext-hdx_theme/%(version)s_hdx-signals-styles.css
<<: *common-css
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
{% extends "landing_pages/page.html" %}

{% block scripts %}
{{ super() }}
{% asset 'hdx_theme/hdx-hapi-scripts' %}
{% endblock %}

{% set CONST = h.HDX_CONST('UI_CONSTANTS')['LANDING_PAGES']['HAPI_LANDING_PAGE'] %}

{% block subtitle %}{{ _('HDX HAPI Beta') }}{% endblock %}
Expand All @@ -20,53 +25,20 @@
{{ h.snippet('bem.blocks/paragraph.html', text=CONST.DATA_COVERAGE_SECTION_DESCRIPTION.format('https://data.humdata.org/dashboards/overview-of-data-grids', 'https://humanitarianaction.info/document/global-humanitarian-overview-2024/article/response-plans-overview-2024'), paragraph_classes=["paragraph__text_font-size-medium", "mt-4"]) }}
</div>
<div class="row">
<div class="col-12 col-lg-10 mx-auto">
<div class="bem-table bem-table_state_bordered">
<div class="bem-table__thead d-none d-md-block">
<div class="bem-table__row mb-3 mb-md-0">
<div class="row g-0">
<div class="col-12 col-md-3">
<div class="bem-table__cell p-0 p-md-3">Category</div>
</div>
<div class="col-12 col-md-3">
<div class="bem-table__cell p-0 p-md-3">Sub-category</div>
</div>
<div class="col-12 col-md-3">
<div class="bem-table__cell p-0 p-md-3">Contributor</div>
</div>
<div class="col-12 col-md-3">
<div class="bem-table__cell p-0 p-md-3"></div>
</div>
<div class="col-12">
<div class="bem-card card my-3" id="hapi-availability-card">
<div class="card-body bem-card__body">
<div class="row">
<div class="placeholder-glow">
<iframe
class="placeholder col-12 bg-light"
height="866"
id="hapi-availability-iframe"
src="/visualization/hapi-availability/"
></iframe>
</div>
</div>
</div>
<div class="bem-table__tbody">
{% for entry in data_coverage %}
<div class="bem-table__row mb-3 mb-md-0">
<div class="row g-0">
<div class="col-12 col-md-3">
<div class="bem-table__cell p-0 p-md-3">{{ entry.category }}</div>
</div>
<div class="col-12 col-md-3">
<div class="bem-table__cell p-0 p-md-3">{{ entry.subcategory }}</div>
</div>
<div class="col-12 col-md-3">
<div class="bem-table__cell p-0 p-md-3">{{ entry.contributor }}</div>
</div>
<div class="col-12 col-md-3">
<div class="bem-table__cell p-0 p-md-3">
<a href="{{ entry.link }}" target="_blank" data-module="hdx_click_stopper"
data-module-link_type="hapi data coverage" data-module-label="{{ entry.subcategory }}">Learn
more <i class="fa-solid fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="mt-4">
{{ h.snippet('bem.blocks/paragraph.html', text=CONST.DATA_COVERAGE_SECTION_PARAGRAPH.format('https://hdx-hapi.readthedocs.io/en/latest/', 'mailto:[email protected]'), paragraph_classes=["paragraph__text_font-size-medium"]) }}
</div>
</div>
</div>
Expand Down

0 comments on commit da8da76

Please sign in to comment.