fix accordion

decidim-vocdoni · May 17, 2024 · 190118d · 190118d
1 parent 4e6d134
commit 190118d
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 28 deletions.
diff --git a/app/packs/src/decidim/vocdoni/admin/steps/results.js b/app/packs/src/decidim/vocdoni/admin/steps/results.js
@@ -26,6 +26,29 @@ const checkResultsElection = async (resultsSpan) => {
 };
 
 document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".vocdoni__accordion-trigger").forEach(trigger => {
+    const isOpen = trigger.getAttribute("data-open") === "true";
+    trigger.querySelector(".arrow-down").style.display = isOpen ? "none" : "inline";
+    trigger.querySelector(".arrow-up").style.display = isOpen ? "inline" : "none";
+  });
+
+  document.querySelectorAll(".vocdoni__accordion-trigger").forEach(trigger => {
+    trigger.addEventListener("click", function() {
+      const panelId = trigger.getAttribute("data-controls");
+      const panel = document.getElementById(panelId);
+      const isOpen = trigger.getAttribute("data-open") === "true";
+
+      trigger.setAttribute("data-open", !isOpen);
+      panel.setAttribute("aria-hidden", isOpen);
+
+      trigger.querySelector(".arrow-down").style.display = isOpen ? "inline" : "none";
+      trigger.querySelector(".arrow-up").style.display = isOpen ? "none" : "inline";
+
+      trigger.classList.toggle("is-open", !isOpen);
+      panel.classList.toggle("is-hidden", isOpen);
+    });
+  });
+
   const resultsSpan = document.querySelector(RESULTS_SPAN_SELECTOR);
 
   if (resultsSpan) {

diff --git a/app/packs/stylesheets/decidim/vocdoni/admin/vocdoni.scss b/app/packs/stylesheets/decidim/vocdoni/admin/vocdoni.scss
@@ -108,3 +108,16 @@ a.button__alert {
 button.copy-button {
   @apply rounded-none rounded-r-md;
 }
+
+.vocdoni__accordion-trigger {
+  @apply flex w-full items-center justify-between font-semibold text-secondary ;
+
+  &:hover {
+    @apply underline;
+  }
+
+    svg {
+        @apply w-8 h-8;
+        fill: currentColor;
+    }
+}
diff --git a/app/views/decidim/vocdoni/admin/steps/_vote_stats.html.erb b/app/views/decidim/vocdoni/admin/steps/_vote_stats.html.erb
@@ -5,35 +5,46 @@
     </h2>
   </div>
   <div class="card-section table-scroll">
-    <ul class="voc-accordion accordion mb-m evote__preview js-votes-count"
-        data-accordion
-        data-multi-expand="true"
-        data-allow-all-closed="true">
-        <% election.questions.each_with_index do |question, idx| %>
-          <li class="accordion-item evote__preview-question <%= " is-active" if idx == 0 %>" data-accordion-item>
-            <a href="#" class="accordion-title"><%= t(".question") %>: <%= translated_attribute(question.title) %></a>
-            <div class="accordion-content" data-tab-content>
-              <div>
-                <table class="table-list">
-                  <thead>
-                    <tr>
-                      <th><%= t(".answer") %></th>
-                      <th><%= t(".result") %></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <% question.answers.each do |answer| %>
-                      <tr>
-                        <td><%= translated_attribute(answer.title) %></td>
-                        <td data-question-idx="<%= idx %>" data-answer-value="<%= answer.value %>"><span class="loading-spinner"></span></td>
-                      </tr>
-                    <% end %>
-                  </tbody>
-                </table>
-              </div>
+    <ul class="space-y-8 js-votes-count"
+        data-component="accordion">
+      <% election.questions.each_with_index do |question, idx| %>
+        <li class="election__accordion accordion-item evote__preview-question">
+          <button id="accordion-trigger-result-<%= idx %>"
+                  data-controls="accordion-panel-result-<%= idx %>"
+                  class="vocdoni__accordion-trigger"
+                  data-open="<%= true if idx == 0 %>"
+                  <%= "data-open='true'" if election.questions.one? %>>
+            <%= t(".question") %>: <%= translated_attribute(question.title) %>
+            <%= icon "arrow-down-s-line", class: "arrow-down" %>
+            <%= icon "arrow-up-s-line", class: "arrow-up" %>
+          </button>
+          <div class="election__accordion-panel-result accordion-content"
+               data-tab-content
+               id="accordion-panel-result-<%= idx %>"
+               aria-hidden="<%= idx == 0 ? 'false' : 'true' %>">
+            <div>
+              <table class="table-list mt-2">
+                <thead>
+                <tr>
+                  <th><%= t(".answer") %></th>
+                  <th><%= t(".result") %></th>
+                </tr>
+                </thead>
+                <tbody>
+                <% question.answers.each do |answer| %>
+                  <tr>
+                    <td><%= translated_attribute(answer.title) %></td>
+                    <td data-question-idx="<%= idx %>" data-answer-value="<%= answer.value %>">
+                      <span class="loading-spinner"></span>
+                    </td>
+                  </tr>
+                <% end %>
+                </tbody>
+              </table>
             </div>
-          </li>
-        <% end %>
+          </div>
+        </li>
+      <% end %>
     </ul>
   </div>
 </div>