fix: display voting rules in project index (#970)

* fix: update css to display voting rules on mobile

* fix: override view to display voting rules when scrolling page

* test: add system test to check voting rules displayed

* feat: update css rules to show voting rules

* feat: update js to display voting rules on mobile

* style: update test with rubocop

* fix: add keys to ignore missing

* test: try fixing orders system test

* fix: update js to still display rules after adding a project

* test: update orders system test

Author: Stef-Rousset

app/packs/src/decidim/global_adjustments.js

@@ -87,6 +87,27 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 });
 
+// dropdown for voting rules on mobile is open
+document.addEventListener("DOMContentLoaded", function () {
+  const dropdown = document.querySelector('div#progress-summary-dropdown-menu')
+  const addButtons = document.querySelectorAll('button.budget-list__action')
+  const voteButton = document.querySelector('button[data-dialog-open="budget-confirm"]')
+
+  if (window.innerWidth <= 768 && dropdown){
+    dropdown.setAttribute('aria-hidden', false);
+    // when adding a project without achieving the minimum required
+    if (voteButton.disabled === true && addButtons){
+      addButtons.forEach((button) => {
+        button.addEventListener('click', function () {
+          setTimeout(() => {
+            dropdown.setAttribute('aria-hidden', false)
+          }, 1000);
+        })
+      })
+    }
+  }
+});
+
 // --- Fixes regarding the surveys --- //
 document.addEventListener("DOMContentLoaded", () => {
   document.addEventListener("click", (e) => {
@@ -121,4 +142,4 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
-// ------ //
+// ------ //

app/packs/stylesheets/decidim/global_adjustments.scss

@@ -22,3 +22,13 @@
 .main-bar__links-desktop__item-wrapper div:has(a[aria-label="Activité"]) {
   display: none;
 }
+/* show the rules to vote on budgets */
+@media (min-width: 769px) and (max-width: 1023px) {
+  .budget-summary__progressbox--checked_out {
+    display: block !important;
+  }
+  .budget-summary__progressbar {
+    margin-top: 1rem !important;
+  }
+}
+

app/views/decidim/budgets/projects/order_progress_summary/_content.html.erb

@@ -0,0 +1,40 @@
+<div data-order-progress-responsive="false" class="budget-summary__content">
+  <%= render partial: "decidim/budgets/projects/order_progress_summary/progress_box" %>
+  <%= render partial: "decidim/budgets/projects/order_progress_summary/progress_box_buttons" %>
+
+  <% if cell("decidim/budgets/budget_information_modal", budget).more_information.present? %>
+    <div class="budget-summary__button-modal">
+      <button type="button" data-dialog-open="budget-modal-info" aria-haspopup="dialog" tabindex="0" class="button button__text button__xs underline font-bold">
+        <%= t("more_information", scope: "decidim.budgets.budget_information_modal") %>
+      </button>
+    </div>
+  <% end %>
+
+  <div class="w-screen max-w-screen progressbox-fixed-wrapper" data-progressbox-fixed>
+    <!-- added rules to vote on budgets -->
+    <% if !current_order_checked_out? %>
+      <div class="flex justify-center w-1/2 m-auto mt-4">
+        <p class="budget-summary__progressbox--checked_out">
+          <%= current_rule_description %>
+        </p>
+      </div>
+    <% end %>
+    <div class="gap-0 layout-item py-4 items-center budget-summary__progressbar">
+      <%= render partial: "decidim/budgets/projects/order_progress_summary/progress_box_sticky" %>
+
+      <div class="layout-item__aside budget-summary__progressbox-buttons hidden lg:block">
+        <% if !current_order_checked_out? && voting_open? %>
+          <button class="button button__secondary button__lg mt-2 md:mt-0 w-full" data-dialog-open="budget-confirm" <%= budget_confirm_disabled_attr %>>
+            <%= t("vote", scope: "decidim.budgets.projects.budget_summary") %>
+          </button>
+        <% end %>
+        <% if current_order_checked_out? %>
+          <%= link_to budget_order_path(return_to: "budget"), method: :delete, class: "button button__lg button__secondary cancel-order w-full mt-2 md:mt-0", data: { confirm: t("are_you_sure", scope: "decidim.budgets.projects.budget_confirm") } do %>
+            <span><%= t("cancel_order", scope: "decidim.budgets.projects.budget_summary") %></span>
+            <%= icon "delete-bin-line" %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

config/i18n-tasks.yml

@@ -108,6 +108,11 @@ ignore_missing:
   - decidim.accessibility.logo
   - decidim.errors.not_found.back_home
   - layouts.decidim.announcements.*
+  - decidim.budgets.budget_information_modal.more_information
+  - decidim.budgets.projects.budget_summary.vote
+  - decidim.budgets.projects.budget_summary.cancel_order
+  - decidim.budgets.projects.budget_confirm.are_you_sure
+
 
 # Consider these keys used:
 ignore_unused: