HDX-9878 add HAPI table, create BEM table component, update texts, fi…

…x cards on mobile
OCHA-DAP · Jun 5, 2024 · eff92a9 · eff92a9
1 parent cf72761
commit eff92a9
Show file tree

Hide file tree

Showing 6 changed files with 232 additions and 52 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -1,28 +1,28 @@
 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 <a href="{0}" title="Contact us">[email protected]</a>.''',
+    '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 <a href="{0}" title="Contact us">[email protected]</a>.''',
 
     'DATA_COVERAGE_SECTION_TITLE': '''Data Coverage''',
-    'DATA_COVERAGE_SECTION_DESCRIPTION': '''Our initial coverage aligns with the data included in the <a href="{0}" target="_blank" data-module="hdx_click_stopper" data-module-link_type="hapi data coverage description" title="HDX Data Grids">HDX Data Grids</a>, 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 <a href="{1}" target="_blank" title="Humanitarian Response Plan" data-module="hdx_click_stopper" data-module-link_type="hapi data coverage description">Humanitarian Response Plan</a>.''',
-    'DATA_COVERAGE_SECTION_PARAGRAPH': '''Refer to the <a href="{0}" target="_blank" data-module="hdx_click_stopper" data-module-link_type="hapi data coverage description" title="HAPI - The Humanitarian API">documentation</a> for the latest coverage. <a href="{1}" data-module="hdx_click_stopper" data-module-link_type="hapi data coverage description" title="Contact us">Contact us</a> to request additional indicators in future versions of HAPI.''',
+    'DATA_COVERAGE_SECTION_DESCRIPTION': '''Our initial coverage aligns with the data included in the <a href="{0}" target="_blank" data-module="hdx_click_stopper" data-module-link_type="hapi data coverage description" title="HDX Data Grids">HDX Data Grids</a>, 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 <a href="{1}" target="_blank" title="Humanitarian Response Plan" data-module="hdx_click_stopper" data-module-link_type="hapi data coverage description">Humanitarian Response Plan</a>.''',
+    'DATA_COVERAGE_SECTION_PARAGRAPH': '''Refer to the <a href="{0}" target="_blank" data-module="hdx_click_stopper" data-module-link_type="hapi data coverage description" title="HAPI - The Humanitarian API">documentation</a> for the latest coverage. <a href="{1}" data-module="hdx_click_stopper" data-module-link_type="hapi data coverage description" title="Contact us">Contact us</a> 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''',
 
     '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.''',
     'BE_INSPIRED_CARD_BUTTON_API': '''Learn more''',
     '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
@@ -5,7 +5,7 @@
 {% block subtitle %}{{ _('HDX HAPI Beta') }}{% endblock %}
 
 {% block breadcrumb_content %}
-  <li class="breadcrumb-item active">{% link_for _('HAPI'), controller='hdx_landing_pages', action='hapi' %}</li>
+  <li class="breadcrumb-item active">{% link_for _('HDX HAPI'), controller='hdx_landing_pages', action='hapi' %}</li>
 {% 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"]) }}
         </div>
         <div class="row">
-          {% for card in data_coverage %}
-            <div class="col-6 col-sm-4 col-md-3 mb-3">
-              {{ 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"]) }}
+          <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>
+                </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>
-          {% endfor %}
-        </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 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>
       </div>
     </div>
@@ -39,16 +80,16 @@
           {{ h.snippet('bem.blocks/paragraph.html', text=CONST.BE_INSPIRED_SECTION_DESCRIPTION, paragraph_classes=["paragraph__text_font-size-big"]) }}
         </div>
         <div class="row mt-4">
-          <div class="col-12 col-md-6 col-lg-3 d-flex align-items-stretch">
+          <div class="col-12 col-md-6 col-lg-3 d-md-flex align-items-md-stretch">
             {{ 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") }}
           </div>
-          <div class="col-12 col-md-6 col-lg-3 d-flex align-items-stretch">
+          <div class="col-12 col-md-6 col-lg-3 d-md-flex align-items-md-stretch">
             {{ 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") }}
           </div>
-          <div class="col-12 col-md-6 col-lg-3 d-flex align-items-stretch">
+          <div class="col-12 col-md-6 col-lg-3 d-md-flex align-items-md-stretch">
             {{ 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") }}
           </div>
-          <div class="col-12 col-md-6 col-lg-3 d-flex align-items-stretch">
+          <div class="col-12 col-md-6 col-lg-3 d-md-flex align-items-md-stretch">
             {{ 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") }}
           </div>
         </div>