fix(style): update OCHA Services to be in footer

Refs: HID-2413
UN-OCHA · Apr 9, 2024 · 4470492 · 4470492
1 parent b1961ac
commit 4470492
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 63 deletions.
diff --git a/assets/js/vendor/cd-ocha-services.js b/assets/js/vendor/cd-ocha-services.js
diff --git a/templates/includes/cd-ocha.html b/templates/includes/cd-ocha.html
@@ -1,37 +1,48 @@
-<section id="cd-ocha-services" class="cd-ocha">
+<section id="cd-ocha-services" class="cd-ocha-services cd-footer__section cd-footer__section--ocha-services" aria-label="OCHA Services">
   <h2 id="cd-ocha-services-title">OCHA Services</h2>
 
-  <div class="cd-global-header__dropdown cd-ocha-dropdown cd-dropdown" id="cd-ocha-dropdown" aria-labelledby="cd-ocha-services-title" data-cd-toggable="OCHA Services" data-cd-icon="arrow-down" data-cd-logo="ocha-logo" data-cd-component="cd-ocha" data-cd-replace="cd-ocha-services-title">
-    <div class="cd-ocha-dropdown__inner">
-      <div class="cd-ocha-dropdown__section">
-        <p class="cd-ocha-dropdown__heading">Related Platforms</p>
-        <ul class="cd-ocha-dropdown__list">
-          <li class="cd-ocha-dropdown__link"><a href="https://about.humanitarian.id/faqs">HID FAQs</a></li>
-          <li class="cd-ocha-dropdown__link"><a href="https://gms.unocha.org/">Grant Management System</a></li>
-          <li class="cd-ocha-dropdown__link"><a href="https://humanitarianaction.info/">Humanitarian Action</a></li>
-          <li class="cd-ocha-dropdown__link" aria-hidden="true">&nbsp;</li>
+  <div class="cd-ocha-services__content">
+    <div class="cd-ocha-services__inner">
+      <div class="cd-ocha-services__section">
+        <p class="cd-ocha-services__heading">Related Platforms</p>
+        <ul class="cd-ocha-services__list">
+          <li class="cd-ocha-services__link"><a href="https://about.humanitarian.id/faqs">HID FAQs</a></li>
+          <li class="cd-ocha-services__link"><a href="https://gms.unocha.org/">Grant Management System</a></li>
+          <li class="cd-ocha-services__link"><a href="https://humanitarianaction.info/">Humanitarian Action</a></li>
+          <li class="cd-ocha-services__link" aria-hidden="true">&nbsp;</li>
         </ul>
       </div>
-      <div class="cd-ocha-dropdown__section">
-        <p class="cd-ocha-dropdown__heading">Other OCHA Services</p>
-        <ul class="cd-ocha-dropdown__list">
-          <li class="cd-ocha-dropdown__link"><a href="https://fts.unocha.org/">Financial Tracking Service</a></li>
-          <li class="cd-ocha-dropdown__link"><a href="https://data.humdata.org/">Humanitarian Data Exchange</a></li>
-          <li class="cd-ocha-dropdown__link"><a href="https://auth.humanitarian.id/">Humanitarian ID</a></li>
-          <li class="cd-ocha-dropdown__link"><a href="https://response.reliefweb.int/">ReliefWeb Response</a></li>
+      <div class="cd-ocha-services__section">
+        <p class="cd-ocha-services__heading">Other OCHA Services</p>
+        <ul class="cd-ocha-services__list">
+          <li class="cd-ocha-services__link"><a href="https://fts.unocha.org/">Financial Tracking Service</a></li>
+          <li class="cd-ocha-services__link"><a href="https://data.humdata.org/">Humanitarian Data Exchange</a></li>
+          <li class="cd-ocha-services__link"><a href="https://auth.humanitarian.id/">Humanitarian ID</a></li>
+          <li class="cd-ocha-services__link"><a href="https://response.reliefweb.int/">ReliefWeb Response</a></li>
         </ul>
       </div>
-      <div class="cd-ocha-dropdown__section">
-        <p class="cd-ocha-dropdown__heading" aria-hidden="true">&nbsp;</p>
-        <ul class="cd-ocha-dropdown__list">
-          <li class="cd-ocha-dropdown__link"><a href="https://interagencystandingcommittee.org/">Inter-Agency Standing Committee</a></li>
-          <li class="cd-ocha-dropdown__link"><a href="https://unocha.org/">OCHA website</a></li>
-          <li class="cd-ocha-dropdown__link"><a href="https://reliefweb.int/">ReliefWeb</a></li>
-          <li class="cd-ocha-dropdown__link"><a href="https://vosocc.unocha.org/">Virtual OSOCC</a></li>
+      <div class="cd-ocha-services__section">
+        <p class="cd-ocha-services__heading" aria-hidden="true">&nbsp;</p>
+        <ul class="cd-ocha-services__list">
+          <li class="cd-ocha-services__link"><a href="https://interagencystandingcommittee.org">Inter-Agency Standing Committee</a></li>
+          <li class="cd-ocha-services__link"><a href="https://unocha.org/">OCHA website</a></li>
+          <li class="cd-ocha-services__link"><a href="https://reliefweb.int/">ReliefWeb</a></li>
+          <li class="cd-ocha-services__link"><a href="https://vosocc.unocha.org/">Virtual OSOCC</a></li>
         </ul>
       </div>
-      <div class="cd-ocha-dropdown__section">
-        <a class="cd-button cd-button--light cd-button--bold cd-button--uppercase cd-ocha-dropdown__see-all" href="https://www.unocha.org/ocha-digital-services" target="_blank" rel="noopener">See all</a>
+      <div class="cd-ocha-services__section">
+        <p class="cd-ocha-services__heading" aria-hidden="true">&nbsp;</p>
+        <ul class="cd-ocha-services__list">
+          <li class="cd-ocha-services__link">
+            <a class="cd-ocha-services__see-all" href="https://www.unocha.org/ocha-digital-services" target="_blank" rel="noopener">
+              More OCHA Services
+              <span class="visually-hidden">Opens in a new window</span>
+              <svg class="cd-icon cd-icon--external-link" width="16" height="16" aria-hidden="true" focusable="false">
+                <use xlink:href="#cd-icon--external-link"></use>
+              </svg>
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
   </div>

diff --git a/templates/includes/footer.ejs b/templates/includes/footer.ejs
@@ -40,6 +40,8 @@
           </ul>
         </div>
 
+        <%- include('cd-ocha.html') %>
+
         <div class="cd-footer__section cd-footer__section--mandate">
           <div class="cd-mandate">
             <span class="cd-mandate__heading">Service provided by</span>
@@ -65,7 +67,6 @@
         </div>
       </div>
 
-      <%- include('cd-ocha.html') %>
     </footer>
 
     <span class="hidden">
@@ -76,6 +77,5 @@
   <script defer src="/assets/js/vendor/cd-core.js"></script>
   <script defer src="/assets/js/vendor/css-vars-ponyfill.js" nomodule></script>
   <script defer src="/assets/js/vendor/cd-dropdown.js"></script>
-  <script defer src="/assets/js/vendor/cd-ocha-services.js"></script>
 </body>
 </html>