From eff92a95ee92921985742a4868e01dc01d9db434 Mon Sep 17 00:00:00 2001 From: Catalin Date: Wed, 5 Jun 2024 15:43:50 +0300 Subject: [PATCH] HDX-9878 add HAPI table, create BEM table component, update texts, fix cards on mobile --- .../hdx_theme/fanstatic/bem.blocks/table.css | 58 ++++++++++++++ .../ckanext/hdx_theme/fanstatic/webassets.yml | 1 + .../src/common/less/bem.blocks/table.less | 80 +++++++++++++++++++ .../ui_constants/landing_pages/hapi.py | 72 ++++++++--------- .../templates/landing_pages/hapi.html | 65 ++++++++++++--- .../templates/landing_pages/signals.html | 8 +- 6 files changed, 232 insertions(+), 52 deletions(-) create mode 100644 ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/bem.blocks/table.css create mode 100644 ckanext-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/bem.blocks/table.less diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/bem.blocks/table.css b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/bem.blocks/table.css new file mode 100644 index 0000000000..84daa213db --- /dev/null +++ b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/bem.blocks/table.css @@ -0,0 +1,58 @@ +.bem-table__thead { + font-weight: 600; + font-size: 18px; + line-height: 24px; + color: #000; +} +.bem-table__tbody { + font-size: 18px; + line-height: 24px; + color: #000; +} +.bem-table__cell a { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-weight: 600; + color: #007CE1; +} +.bem-table_state_bordered { + border: 1px solid #E1E4ED; + border-radius: 8px; + box-shadow: 0 1px 4px 0 #D1D5DB; +} +@media (max-width: 768px) { + .bem-table_state_bordered { + border: 0; + border-radius: 0; + box-shadow: unset; + } +} +.bem-table_state_bordered .bem-table__thead .bem-table__row .row > *, +.bem-table_state_bordered .bem-table__tbody .bem-table__row .row > * { + border-bottom: 1px solid #E1E4ED; + border-right: 1px solid #E1E4ED; +} +.bem-table_state_bordered .bem-table__thead .bem-table__row .row > *:last-child, +.bem-table_state_bordered .bem-table__tbody .bem-table__row .row > *:last-child { + border-right: 0; +} +@media (max-width: 768px) { + .bem-table_state_bordered .bem-table__thead .bem-table__row .row > *, + .bem-table_state_bordered .bem-table__tbody .bem-table__row .row > * { + border-bottom: 0; + border-right: 0; + } +} +@media (max-width: 768px) { + .bem-table_state_bordered .bem-table__thead .bem-table__row, + .bem-table_state_bordered .bem-table__tbody .bem-table__row { + border: 1px solid #E1E4ED; + border-radius: 8px; + box-shadow: 0 1px 4px 0 #D1D5DB; + padding: 28px 32px; + } +} +.bem-table_state_bordered .bem-table__thead.bem-table__tbody .bem-table__row:last-child .row > *, +.bem-table_state_bordered .bem-table__tbody.bem-table__tbody .bem-table__row:last-child .row > * { + border-bottom: 0; +} diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml index 6a9234a277..6ee047ece2 100644 --- a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml +++ b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml @@ -142,6 +142,7 @@ bem-blocks-styles: - bem.blocks/form_button.css - bem.blocks/account_options.css - bem.blocks/info_box.css + - bem.blocks/table.css - bem.blocks/select2_field.css - bem.blocks/textarea_field.css diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/bem.blocks/table.less b/ckanext-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/bem.blocks/table.less new file mode 100644 index 0000000000..3c69a151e4 --- /dev/null +++ b/ckanext-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/bem.blocks/table.less @@ -0,0 +1,80 @@ +@import "bem_variables"; + +.bem-table { + + &__thead { + font-weight: 600; + font-size: 18px; + line-height: 24px; + color: @black-color; + } + + &__tbody { + font-size: 18px; + line-height: 24px; + color: @black-color; + } + + &__cell { + + a { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-weight: 600; + color: @blue-light-color; + } + } + + &_state_bordered { + border: 1px solid @grey-extra-light-color; + border-radius: 8px; + box-shadow: 0 1px 4px 0 @grey-light-color; + + @media (max-width: @breakpoint-md) { + border: 0; + border-radius: 0; + box-shadow: unset; + } + + .bem-table__thead, + .bem-table__tbody { + .bem-table__row { + .row { + > * { + border-bottom: 1px solid @grey-extra-light-color; + border-right: 1px solid @grey-extra-light-color; + + &:last-child { + border-right: 0; + } + + @media (max-width: @breakpoint-md) { + border-bottom: 0; + border-right: 0; + } + + } + } + + @media (max-width: @breakpoint-md) { + border: 1px solid @grey-extra-light-color; + border-radius: 8px; + box-shadow: 0 1px 4px 0 @grey-light-color; + padding: 28px 32px; + } + } + + &.bem-table__tbody { + .bem-table__row { + &:last-child { + .row { + > * { + border-bottom: 0; + } + } + } + } + } + } + } +} diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/helpers/ui_constants/landing_pages/hapi.py b/ckanext-hdx_theme/ckanext/hdx_theme/helpers/ui_constants/landing_pages/hapi.py index b25da79da7..e1662dd7a6 100644 --- a/ckanext-hdx_theme/ckanext/hdx_theme/helpers/ui_constants/landing_pages/hapi.py +++ b/ckanext-hdx_theme/ckanext/hdx_theme/helpers/ui_constants/landing_pages/hapi.py @@ -1,10 +1,10 @@ CONSTANTS = { 'HERO_SECTION_TITLE': '''The HDX Humanitarian API (HAPI) is a way to access standardised indicators from multiple sources to automate workflows and visualisations''', - 'HERO_SECTION_DESCRIPTION': '''HAPI is in beta phase, and we are seeking feedback. To share your thoughts or join our Slack channel, send an email to hdx@un.org.''', + 'HERO_SECTION_DESCRIPTION': '''HDX HAPI is in beta phase, and we are seeking feedback. To share your thoughts or join our slack channel, send an email to hdx@un.org.''', 'DATA_COVERAGE_SECTION_TITLE': '''Data Coverage''', - 'DATA_COVERAGE_SECTION_DESCRIPTION': '''Our initial coverage aligns with the data included in the HDX Data Grids, which places the most important crisis data into six categories and 20 sub-categories. Our beta version of HAPI covers 57 indicators across 22 countries with a Humanitarian Response Plan.''', - 'DATA_COVERAGE_SECTION_PARAGRAPH': '''Refer to the documentation for the latest coverage. Contact us to request additional indicators in future versions of HAPI.''', + 'DATA_COVERAGE_SECTION_DESCRIPTION': '''Our initial coverage aligns with the data included in the HDX Data Grids, which places the most important crisis data into six categories and 20 sub-categories. Our beta version of HDX HAPI covers 57 indicators across 25 locations that have a Humanitarian Response Plan.''', + 'DATA_COVERAGE_SECTION_PARAGRAPH': '''Refer to the documentation for the latest coverage. Contact us to request additional indicators in future versions of HDX HAPI.''', 'BE_INSPIRED_SECTION_TITLE': '''Be Inspired''', 'BE_INSPIRED_SECTION_DESCRIPTION': '''Take a look at visualisations and code examples''', @@ -12,7 +12,7 @@ 'BE_INSPIRED_CARD_TITLE_POWER_BI': '''Power BI workflow''', 'BE_INSPIRED_CARD_TEXT_POWER_BI': '''A tutorial to demonstrate how easy it is to bring in data.''', 'BE_INSPIRED_CARD_BUTTON_POWER_BI': '''Learn more''', - 'BE_INSPIRED_CARD_BUTTON_LINK_POWER_BI': '''#''', + 'BE_INSPIRED_CARD_BUTTON_LINK_POWER_BI': '''https://docs.google.com/presentation/d/19HfMI9gnKXAMhe0SFZdbbUFesNnTnfeUI9rnshN2kkk/edit#slide=id.g2ddc745d4a3_0_81''', 'BE_INSPIRED_CARD_TITLE_API': '''API Sandbox''', 'BE_INSPIRED_CARD_TEXT_API': '''A sandbox environment to help construct queries and get a data response.''', @@ -20,9 +20,9 @@ 'BE_INSPIRED_CARD_BUTTON_LINK_API': '''https://stage.hapi-humdata-org.ahconu.org/docs#/Locations%20and%20Administrative%20Divisions/get_locations_api_v1_metadata_location_get''', 'BE_INSPIRED_CARD_TITLE_VISUALIZATION': '''Visualisation''', - 'BE_INSPIRED_CARD_TEXT_VISUALIZATION': '''A dashboard with a selection of key figures, charts and a map for all countries in HAPI.''', + 'BE_INSPIRED_CARD_TEXT_VISUALIZATION': '''A dashboard with a selection of key figures, charts and a map for all countries in HDX HAPI.''', 'BE_INSPIRED_CARD_BUTTON_VISUALIZATION': '''Learn more''', - 'BE_INSPIRED_CARD_BUTTON_LINK_VISUALIZATION': '''#''', + 'BE_INSPIRED_CARD_BUTTON_LINK_VISUALIZATION': '''https://baripembo.github.io/viz-datagrid-dashboard/#''', 'BE_INSPIRED_CARD_TITLE_CHATBOT': '''Chatbot''', 'BE_INSPIRED_CARD_TEXT_CHATBOT': '''An early stage AI chatbot developed with DataKind to ask questions about the data.''', @@ -37,63 +37,63 @@ DATA_COVERAGE_CONSTANTS = [ { "category": "Affected People", - "title": "Humanitarian Needs Overview", - "organization": "OCHA offices", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Humanitarian Needs Overview", + "contributor": "OCHA offices", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-humanitarian-needs" }, { "category": "Affected People", - "title": "Refugees and Persons of Concern", - "organization": "UNHCR", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Refugees and Persons of Concern", + "contributor": "UN Refugee Agency (UNHCR)", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-refugees-persons-of-concern" }, { "category": "Coordination & Context", - "title": "3W", - "organization": "OCHA offices", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Conflict Events", + "contributor": "The Armed Conflict Location & Event Data Project (ACLED)", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-conflict-events" }, { "category": "Coordination & Context", - "title": "Conflict Events", - "organization": "The Armed Conflict Location & Event Data Project (ACLED)", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Funding", + "contributor": "OCHA Financial Tracking System (FTS)", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-funding" }, { "category": "Coordination & Context", - "title": "Funding", - "organization": "OCHA Financial Tracking System (FTS)", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "National Risk", + "contributor": "INFORM", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-national-risk" }, { "category": "Coordination & Context", - "title": "National Risk", - "organization": "INFORM", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Operational Presence (Who-is-doing-what-where)", + "contributor": "OCHA offices", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-operation-presence-3w-who-is-doing-what-where" }, { "category": "Food Security & Nutrition", - "title": "Food Security", - "organization": "IPC", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Food Prices", + "contributor": "World Food Programme (WFP)", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-food-prices" }, { "category": "Food Security & Nutrition", - "title": "Food Prices", - "organization": "WFP", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Food Security", + "contributor": "The Integrated Food Security Phase Classification (IPC)", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-food-security" }, { "category": "Population & Socio-economy", - "title": "Population", - "organization": "United Nations Population Fund (UNFPA) and OCHA offices", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Population", + "contributor": "United Nations Population Fund (UNFPA) and OCHA offices", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-baseline-population" }, { "category": "Population & Socio-economy", - "title": "Poverty Rate", - "organization": "OPHI", - "link": "https://docs.google.com/document/d/1phLaYU905R9oKqO5C4e5tQ8LTb1fv-MKkbGgONhCVGI/edit?usp=sharing" + "subcategory": "Poverty Rate", + "contributor": "The Oxford Poverty and Human Development Initiative (OPHI)", + "link": "https://hdx-hapi.readthedocs.io/en/latest/subcategory_details/#sub-category-poverty-rate" } ] diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/hapi.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/hapi.html index 9305c68b83..c8a7aeec62 100644 --- a/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/hapi.html +++ b/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/hapi.html @@ -5,7 +5,7 @@ {% block subtitle %}{{ _('HDX HAPI Beta') }}{% endblock %} {% block breadcrumb_content %} -
  • {% link_for _('HAPI'), controller='hdx_landing_pages', action='hapi' %}
    • +
  • {% link_for _('HDX HAPI'), controller='hdx_landing_pages', action='hapi' %}
    • {% endblock %} {% block content %} @@ -20,14 +20,55 @@ {{ 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"]) }}
    - {% for card in data_coverage %} -
    - {{ h.snippet('bem.blocks/card.html', title=card.title, text=card.organization, badge=card.category, button='Learn more', link=card.link, click_stopper_link_type='hapi data coverage', click_stopper_link_label=card.title, card_classes=["bem-card_type-slim"]) }} +
    +
    +
    +
    +
    +
    +
    Category
    +
    +
    +
    Sub-category
    +
    +
    +
    Contributor
    +
    +
    +
    +
    +
    +
    +
    +
    + {% for entry in data_coverage %} +
    +
    +
    +
    {{ entry.category }}
    +
    +
    +
    {{ entry.subcategory }}
    +
    +
    +
    {{ entry.contributor }}
    +
    +
    +
    + Learn + more +
    +
    +
    +
    + {% endfor %} +
    - {% endfor %} -
    -
    - {{ h.snippet('bem.blocks/paragraph.html', text=CONST.DATA_COVERAGE_SECTION_PARAGRAPH.format('https://hdx-hapi.readthedocs.io/en/latest/', 'mailto:hdx@un.org'), paragraph_classes=["paragraph__text_font-size-medium"]) }} +
    + {{ h.snippet('bem.blocks/paragraph.html', text=CONST.DATA_COVERAGE_SECTION_PARAGRAPH.format('https://hdx-hapi.readthedocs.io/en/latest/', 'mailto:hdx@un.org'), paragraph_classes=["paragraph__text_font-size-medium"]) }} +
    +
    @@ -39,16 +80,16 @@ {{ h.snippet('bem.blocks/paragraph.html', text=CONST.BE_INSPIRED_SECTION_DESCRIPTION, paragraph_classes=["paragraph__text_font-size-big"]) }}
    -
    +
    {{ h.snippet('bem.blocks/card.html', title=CONST.BE_INSPIRED_CARD_TITLE_POWER_BI, text=CONST.BE_INSPIRED_CARD_TEXT_POWER_BI, button=CONST.BE_INSPIRED_CARD_BUTTON_POWER_BI, link=CONST.BE_INSPIRED_CARD_BUTTON_LINK_POWER_BI, click_stopper_link_type='hapi tools', click_stopper_link_label=CONST.BE_INSPIRED_CARD_TITLE_POWER_BI, spacing_class="my-3") }}
    -
    +
    {{ h.snippet('bem.blocks/card.html', title=CONST.BE_INSPIRED_CARD_TITLE_API, text=CONST.BE_INSPIRED_CARD_TEXT_API, button=CONST.BE_INSPIRED_CARD_BUTTON_API, link=CONST.BE_INSPIRED_CARD_BUTTON_LINK_API, click_stopper_link_type='hapi tools', click_stopper_link_label=CONST.BE_INSPIRED_CARD_TITLE_API, spacing_class="my-3") }}
    -
    +
    {{ h.snippet('bem.blocks/card.html', title=CONST.BE_INSPIRED_CARD_TITLE_VISUALIZATION, text=CONST.BE_INSPIRED_CARD_TEXT_VISUALIZATION, button=CONST.BE_INSPIRED_CARD_BUTTON_VISUALIZATION, link=CONST.BE_INSPIRED_CARD_BUTTON_LINK_VISUALIZATION, click_stopper_link_type='hapi tools', click_stopper_link_label=CONST.BE_INSPIRED_CARD_TITLE_VISUALIZATION, spacing_class="my-3") }}
    -
    +
    {{ h.snippet('bem.blocks/card.html', title=CONST.BE_INSPIRED_CARD_TITLE_CHATBOT, text=CONST.BE_INSPIRED_CARD_TEXT_CHATBOT, button=CONST.BE_INSPIRED_CARD_BUTTON_CHATBOT, link=CONST.BE_INSPIRED_CARD_BUTTON_LINK_CHATBOT, click_stopper_link_type='hapi tools', click_stopper_link_label=CONST.BE_INSPIRED_CARD_TITLE_CHATBOT, spacing_class="my-3") }}
    diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html index 617a31ebba..8c9b58122d 100644 --- a/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html +++ b/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html @@ -371,16 +371,16 @@ {{ h.snippet('bem.blocks/paragraph.html', text=CONST.RESOURCES_SECTION_DESCRIPTION, paragraph_classes=["paragraph__text_font-size-big"]) }}
    -
    +
    {{ h.snippet('bem.blocks/card.html', title=CONST.RESOURCES_CARD_TITLE_MAP, text=CONST.RESOURCES_CARD_TEXT_MAP, button=CONST.RESOURCES_CARD_BUTTON_MAP, link=CONST.RESOURCES_CARD_BUTTON_LINK_MAP, click_stopper_link_type='signals resources', click_stopper_link_label=CONST.RESOURCES_CARD_TITLE_MAP, spacing_class="my-3") }}
    -
    +
    {{ h.snippet('bem.blocks/card.html', title=CONST.RESOURCES_CARD_TITLE_DATASET, text=CONST.RESOURCES_CARD_TEXT_DATASET, button=CONST.RESOURCES_CARD_BUTTON_DATASET, link=CONST.RESOURCES_CARD_BUTTON_LINK_DATASET, click_stopper_link_type='signals resources', click_stopper_link_label=CONST.RESOURCES_CARD_TITLE_DATASET, spacing_class="my-3") }}
    -
    +
    {{ h.snippet('bem.blocks/card.html', title=CONST.RESOURCES_CARD_TITLE_METHODOLOGY, text=CONST.RESOURCES_CARD_TEXT_METHODOLOGY, button=CONST.RESOURCES_CARD_BUTTON_METHODOLOGY, link=CONST.RESOURCES_CARD_BUTTON_LINK_METHODOLOGY, click_stopper_link_type='signals resources', click_stopper_link_label=CONST.RESOURCES_CARD_TITLE_METHODOLOGY, spacing_class="my-3") }}
    -
    +
    {{ h.snippet('bem.blocks/card.html', title=CONST.RESOURCES_CARD_TITLE_REPOSITORY, text=CONST.RESOURCES_CARD_TEXT_REPOSITORY, button=CONST.RESOURCES_CARD_BUTTON_REPOSITORY, link=CONST.RESOURCES_CARD_BUTTON_LINK_REPOSITORY, click_stopper_link_type='signals resources', click_stopper_link_label=CONST.RESOURCES_CARD_TITLE_REPOSITORY, spacing_class="my-3") }}