decidim-budgets 0.27.4 → 0.28.0.rc5

data/app/views/decidim/budgets/projects/_budget_summary.html.erb

@@ -1,76 +1,3 @@
-<div class="row column voting-rules">
-  <div class="callout warning">
-    <div class="row">
-      <div class="columns medium-8 large-9">
-        <h2 class="heading3">
-          <%= t(".rules.title") %>
-        </h2>
-        <ul>
-          <%= raw current_rule_explanation %>
-        </ul>
-      </div>
-    </div>
-  </div>
+<div id="order-progress<%= "-responsive" if responsive %>" class="budget-summary <%= responsive ? "block md:hidden" : "hidden md:block" %>" data-progress-reference data-safe-url="<%= budget_url(budget) %>">
+  <%= render partial: "order_progress_summary_content", locals: { responsive: , include_heading: } %>
 </div>
-<div class="card budget-summary" data-progress-reference data-safe-url="<%= budget_url(budget) %>">
-  <div class="card__content">
-    <% if include_heading %>
-      <% if current_order_checked_out? %>
-        <h2 class="heading3">
-          <%= t(".checked_out.title") %>
-          <% unless current_workflow.single? %>
-            <small><%= translated_attribute(budget.title) %></small>
-          <% end %>
-        </h2>
-        <p>
-          <%= raw t(".checked_out.description", cancel_link: link_to(t(".cancel_order"), budget_order_path(return_to: "budget"), method: :delete, class: "cancel-order", data: { confirm: t(".are_you_sure") })) %>
-        </p>
-      <% else %>
-        <h2 class="heading3">
-          <% if current_workflow.single? %>
-            <%= t(".title") %>
-          <% else %>
-            <%= translated_attribute(budget.title) %>
-          <% end %>
-        </h2>
-        <p>
-          <%= raw current_rule_description %>
-        </p>
-      <% end %>
-    <% end %>
-
-    <% if current_order.projects_rule? %>
-      <div class="budget-summary__total" data-total-allocation="<%= current_order.available_allocation %>">
-        <span class="mini-title"><%= t(".total_projects") %>
-          <strong class="mini-title__strong mini-title__strong--highlight">
-            <%= current_order.maximum_projects %>
-          </strong>
-        </span>
-      </div>
-    <% else %>
-      <div class="budget-summary__total" data-total-allocation="<%= current_order.available_allocation %>" data-total-budget="<%= budget.total_budget %>">
-        <span class="mini-title"><%= t(".total_budget") %>
-          <strong class="mini-title__strong mini-title__strong--highlight">
-            <%= budget_to_currency(budget.total_budget) %>
-          </strong>
-        </span>
-      </div>
-    <% end %>
-
-    <%= render partial: "order_progress" %>
-
-    <div>
-      <span class="mini-title">
-        <%= t(".assigned") %>
-        <%= render partial: "order_total_budget" %>
-      </span>
-    </div>
-
-    <%= cell("decidim/budgets/budget_information_modal", budget) %>
-  </div>
-
-  <%= render partial: "order_selected_projects" %>
-</div>
-
-<%= render partial: "budget_excess" %>
-<%= render partial: "budget_confirm" %>

data/app/views/decidim/budgets/projects/_exit_modal.html.erb

@@ -1,22 +1,19 @@
 <% if current_user && current_component.current_settings.votes == "enabled" && !current_workflow.voted?(budget) %>
-  <div class="reveal" data-reveal id="exit-notification" role="dialog" aria-modal="true" aria-labelledby="exit-notification-label" aria-live="polite">
-    <div class="reveal__header">
-      <h3 id="exit-notification-label" class="reveal__title"><%= t(".title") %></h3>
-      <button class="close-button" data-close aria-label="<%= t(".close_modal") %>" type="button">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-    <div class="static__content text-center">
-      <p><%= t(".message") %></p>
+  <%= decidim_modal id: "exit-notification" do %>
+    <div data-dialog-container>
+      <%= icon "information-line" %>
+      <h3 class="h3" id="dialog-title-exit-notification" tabindex="-1" data-dialog-title>
+        <%= t("title", scope: "decidim.budgets.projects.exit_modal") %>
+      </h3>
+      <p id="dialog-desc-budget-modal">
+        <%= t("message", scope: "decidim.budgets.projects.exit_modal") %>
+      </p>
     </div>
-
-    <div class="row">
-      <div class="columns medium-8 medium-offset-2">
-        <button class="button primary expanded" data-close type="button">
-          <%= t(".cancel") %>
-        </button>
-        <%= link_to t(".exit"), budget_projects_path, id: "exit-notification-link", class: "button primary hollow expanded" %>
-      </div>
+    <div data-dialog-actions>
+      <button data-dialog-close="exit-notification" class="button button__sm md:button__lg button__secondary">
+        <p><%= t("cancel", scope: "decidim.budgets.projects.exit_modal") %></p>
+      </button>
+      <%= link_to t("exit", scope: "decidim.budgets.projects.exit_modal"), budget_projects_path, id: "exit-notification-link", class: "button button__sm md:button__lg button__secondary" %>
     </div>
-  </div>
+  <% end %>
 <% end %>

data/app/views/decidim/budgets/projects/_linked_projects.html.erb

@@ -1,12 +1,3 @@
-<div class="card card--action card--list">
-  <% resources.each do |project| %>
-    <div class="card--list__item">
-      <%= icon "actions", class: "card--list__icon", role: "img", "aria-hidden": true, remove_icon_class: true %>
-      <%= link_to resource_locator([project.budget, project]).path, class: "card--list__text card__link card__link--block" do %>
-        <h5 class="card--list__heading">
-          <%= translated_attribute(project.title) %>
-        </h5>
-      <% end %>
-    </div>
-  <% end %>
-</div>
+<% resources.each do |project| %>
+  <%= cell "decidim/budgets/project_l", project, url_extra_params: { included_in: resource.to_gid } %>
+<% end %>

data/app/views/decidim/budgets/projects/_order.html.erb

@@ -0,0 +1 @@
+<%= order_selector available_orders, i18n_scope: "decidim.budgets.projects.orders" %>

data/app/views/decidim/budgets/projects/_order_progress_progressbar_marks_right.html.erb

@@ -0,0 +1,10 @@
+<span class="budget-summary__progressbar-legend budget-summary__progressbar-marks_right" data-total-allocation="<%= current_order.available_allocation %>">
+  <%= t("budget", scope: "decidim.budgets.projects.order_progress") %>
+  <strong class="budget-summary__progressbar-legend-strong">
+    <% if current_order.projects_rule? %>
+      <%= current_order.maximum_projects %>
+    <% else %>
+      <%= budget_to_currency(budget.total_budget) %>
+    <% end %>
+  </strong>
+</span>

data/app/views/decidim/budgets/projects/_order_progress_summary_content.html.erb

@@ -0,0 +1,113 @@
+<div data-order-progress-responsive="<%= responsive.inspect %>" class="budget-summary__content">
+  <div class="budget-summary__progressbox" data-current-allocation="<%= current_order ? current_order.total : 0 %>">
+    <% if include_heading %>
+      <% if current_order_checked_out? %>
+        <%= t("title", scope: "decidim.budgets.projects.budget_summary.checked_out") %>
+        <div class="budget-summary__content__header">
+          <span class="budget-summary__content__header--title">
+            <%= t("name", scope: "decidim.components.budgets") %>
+          </span>
+          /
+          <%= translated_attribute(budget.title) %>
+          <p class="budget-summary__content__header--description">
+            <%= t("description", scope: "decidim.budgets.projects.budget_summary.checked_out") %>
+          </p>
+        </div>
+      <% else %>
+        <p class="budget-summary__progressbox--checked_out">
+          <%= current_rule_description %>
+        </p>
+      <% end %>
+    <% end %>
+    <div class="budget-summary__progressbar">
+      <div class="progress budget-progress" role="progressbar" aria-label="<%= t("budget", scope: "decidim.budgets.projects.order_progress") %>" aria-valuenow="<%= current_order_budget_percent %>" aria-valuetext="<%= current_order_budget_percent %> %" aria-valuemin="0" aria-valuemax="100">
+        <div class="progress-meter budget-summary__progressbar--minimum" style="width: <%= current_order_budget_percent_minimum %>%">
+          <span class="progress-meter--minimum-mark"></span>
+        </div>
+        <div class="progress-meter budget-summary__progressbar--meter" style="width: <%= current_order_budget_percent %>%"> </div>
+      </div>
+      <div class="budget-summary__progressbar-marks">
+        <span class="budget-summary__progressbar-legend" style="width: <%= current_order_budget_percent_minimum %>%;">
+          <%= t("assigned", scope: "decidim.budgets.projects.order_progress") %>
+          <strong id="order-total-budget<%= "-responsive" if responsive %>" class="budget-summary__progressbar-legend-strong">
+            <%= render partial: "decidim/budgets/projects/order_total_budget" %>
+          </strong>
+        </span>
+        <% if current_order.minimum_budget > 0 %>
+          <span class="budget-summary__progressbar-legend budget-summary__progressbar-marks_center">
+            <%= t("minimum", scope: "decidim.budgets.projects.order_progress") %>
+            <strong class="budget-summary__progressbar-legend-strong">
+              <%= budget_to_currency(current_order.minimum_budget) %>
+            </strong>
+          </span>
+        <% end %>
+        <%= render partial: "decidim/budgets/projects/order_progress_progressbar_marks_right" %>
+      </div>
+    </div>
+  </div>
+  <div class="budget-summary__progressbox-buttons">
+    <% if !current_order_checked_out? && voting_open? %>
+      <button class="button button__secondary button__lg w-full" data-dialog-open="budget-confirm" <%= budget_confirm_disabled_attr %>>
+        <%= t("vote", scope: "decidim.budgets.projects.budget_summary") %>
+        <%= icon "check-line" %>
+      </button>
+    <% end %>
+    <% if include_heading && current_order_checked_out? %>
+      <%= link_to budget_order_path(return_to: "budget"), method: :delete, class: "button button__lg button__secondary cancel-order w-full", 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 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">
+      <%= t("more_information", scope: "decidim.budgets.budget_information_modal") %>
+    </button>
+  </div>
+  <div class="w-screen max-w-screen progressbox-fixed-wrapper" data-progressbox-fixed>
+    <div class="gap-0 layout-item py-4 items-center budget-summary__progressbar">
+      <div class="budget-summary__progressbox layout-item__main">
+        <div class="progress budget-progress relative" role="progressbar" aria-valuenow="<%= current_order_budget_percent %>" aria-valuetext="<%= current_order_budget_percent %>%" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-meter budget-summary__progressbar--minimum" style="width: <%= current_order_budget_percent_minimum %>%">
+            <span class="progress-meter--minimum-mark"></span>
+          </div>
+          <div class="progress-meter budget-summary__progressbar--meter" style="width: <%= current_order_budget_percent %>%">
+          </div>
+        </div>
+        <div class="budget-summary__progressbar-marks">
+          <span class="budget-summary__progressbar-legend" style="width: <%= current_order_budget_percent_minimum %>%;">
+            <%= t("assigned", scope: "decidim.budgets.projects.order_progress") %>
+            <strong id="order-total-budget-sticky<%= "-responsive" if responsive %>" class="budget-summary__progressbar-legend-strong">
+              <%= render partial: "decidim/budgets/projects/order_total_budget" %>
+            </strong>
+          </span>
+          <% if current_order.minimum_budget > 0 %>
+          <span class="budget-summary__progressbar-legend budget-summary__progressbar-marks_center">
+            <%= t("minimum", scope: "decidim.budgets.projects.order_progress") %>
+            <strong class="budget-summary__progressbar-legend-strong">
+              <%= budget_to_currency(current_order.minimum_budget) %>
+            </strong>
+          </span>
+          <% end %>
+          <%= render partial: "decidim/budgets/projects/order_progress_progressbar_marks_right" %>
+        </div>
+      </div>
+      <div class="layout-item__aside budget-summary__progressbox-buttons">
+        <% 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 %>>
+            <span>
+              <%= t("vote", scope: "decidim.budgets.projects.budget_summary") %>
+            </span>
+            <%= icon "check-line" %>
+          </button>
+        <% end %>
+        <% if include_heading && 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>

data/app/views/decidim/budgets/projects/_order_total_budget.html.erb

@@ -1,7 +1,6 @@
-<strong id="order-total-budget" class="mini-title__strong">
-  <% if current_order.projects_rule? %>
-    <%= current_order.projects.count %> / <%= current_order.maximum_projects %>
-  <% else %>
-    <%= budget_to_currency current_order&.total_budget.to_f %>
-  <% end %>
-</strong>
+<% if current_order.projects_rule? %>
+  <%= current_order.projects.count %> /
+  <%= current_order.maximum_projects %>
+<% else %>
+  <%= budget_to_currency current_order&.total_budget.to_f %>
+<% end %>

data/app/views/decidim/budgets/projects/_project.html.erb

@@ -1 +1,2 @@
-<%= cell "decidim/budgets/project_list_item", project %>
+<% show_only_added ||= params.dig(:filter, :addition_type) == "added" %>
+<%= card_for project, render_extra_data: true, link_whole_card: false, wrapper_class: "project-item", show_only_added: %>

data/app/views/decidim/budgets/projects/_project_budget_button.html.erb

@@ -1,19 +1,11 @@
-<% if current_user.blank? %>
-  <div id="project-<%= project.id %>-budget-button">
-    <button class="button expanded primary button--sc"
-            data-toggle="loginModal"
-            aria-label="<%= t(".added_descriptive", resource_name: translated_attribute(project.title)) %>">
-      <%= t(".add") %>
-    </button>
-  </div>
-<% else %>
-  <div id="project-<%= project.id %>-budget-button"
-       class="<%= "added" if voted_for?(project) %> button expanded primary button--sc budget-vote-button budget-list__data"
-       aria-label="<%= t(".#{voted_for?(project) ? ".added" : ".add"}_descriptive", resource_name: translated_attribute(project.title)) %>">
-    <span>
-      <%= t(voted_for?(project) ? ".added" : ".add") %>
-    </span>
-
-    <%= cell("decidim/budgets/project_vote_button", project) %>
-  </div>
-<% end %>
+<div id="project-<%= project.id %>-budget-button">
+  <% if current_user.blank? %>
+      <button class="button button__lg w-full button__secondary"
+        data-dialog-open="loginModal"
+        aria-label="<%= t(".added_descriptive", resource_name: translated_attribute(project.title)) %>">
+        <%= t("add", scope: "decidim.budgets.projects.project_budget_button") %>
+      </button>
+  <% else %>
+    <%= cell("decidim/budgets/project_vote_button", project, project_item: true) %>
+  <% end %>
+</div>

data/app/views/decidim/budgets/projects/_projects.html.erb

@@ -1,13 +1,15 @@
-<div class="collection-sort-controls row small-up-1 medium-up-3 card-grid">
-  <div class="column">
-    <%= order_selector available_orders, i18n_scope: "decidim.budgets.projects.orders" %>
+<div class="budget__list--header">
+  <div>
+    <%= render partial: "addition_selector" %>
+  </div>
+
+  <div class="collection-sort-controls">
+    <%= render partial: "order" %>
   </div>
 </div>
 
 <div class="budget-list">
-  <% projects.each do |project| %>
-    <%= render partial: "project", locals: { project: project } %>
-  <% end %>
+  <%= render partial: "projects_list", locals: { project: } %>
 </div>
 
 <%= decidim_paginate projects %>

data/app/views/decidim/budgets/projects/_projects_count.html.erb

@@ -0,0 +1,5 @@
+<% if count.present? %>
+  <span class="button__pill--count" id="order-selected-projects-count">
+    <%= count %>
+  </span>
+<% end %>

data/app/views/decidim/budgets/projects/_projects_list.html.erb

@@ -0,0 +1,3 @@
+<% projects.each do |project| %>
+  <%= render partial: "project", locals: { project: } %>
+<% end %>

data/app/views/decidim/budgets/projects/index.html.erb

@@ -1,63 +1,66 @@
-<%= render partial: "decidim/shared/component_announcement" %>
-<%= render partial: "exit_modal" %>
-
-<%= cell("decidim/budgets/limit_announcement", budget) %>
-
-<div class="voting-wrapper">
-  <div class="row columns">
-    <% if component_settings.geocoding_enabled? %>
-      <%= dynamic_map_for projects_data_for_map(all_geocoded_projects) do %>
-        <template id="marker-popup">
-          <div class="map-info__content">
-            <h3>${title}</h3>
-            <div id="bodyContent">
-              <p>{{html body}}</p>
-              <div class="map__date-address">
-                <div class="address card__extra">
-                  <div class="address__icon">{{html icon}}</div>
-                  <div class="address__details">
-                    <span>${address}</span><br>
+<% add_decidim_page_title t("decidim.budgets.projects.projects_for", name: translated_attribute(budget.title)) %>
+<%= append_javascript_pack_tag "decidim_budgets" %>
+<%= append_stylesheet_pack_tag "decidim_budgets" %>
+
+<%= render partial: "budget_summary", locals: { include_heading: true, project_item: false, responsive: true } %>
+<%= cell("decidim/budgets/budget_information_modal", budget) %>
+
+<% content_for :aside do %>
+  <h1 class="h3 decorator"><%= t("decidim.budgets.projects.projects_for", name: translated_attribute(budget.title)) %></h1>
+
+  <%= render layout: "decidim/shared/filters", locals: { filter_sections: , search_variable: :search_text_cont, skip_to_id: "projects" } do %>
+    <%= hidden_field_tag :order, order, id: nil, class: "order_filter" %>
+  <% end %>
+<% end %>
+
+<%= render layout: "layouts/decidim/shared/layout_two_col" do %>
+  <% if projects.any? %>
+    <%= render partial: "exit_modal" %>
+    <%= render partial: "budget_excess" %>
+    <%= render partial: "budget_confirm" %>
+
+    <% unless voting_finished? %>
+      <div class="budget-summary__container">
+        <%= render partial: "budget_summary", locals: { include_heading: true, project_item: false, responsive: false } %>
+      </div>
+    <% end %>
+
+    <% if Decidim::Map.available?(:geocoding, :dynamic) && component_settings.geocoding_enabled? %>
+      <div class="budget-list__map">
+        <%= dynamic_map_for projects_data_for_map(all_geocoded_projects) do %>
+          <template id="marker-popup">
+            <div class="space-y-6">
+              <a href="${link}" class="card__list">
+                <div class="card__list-content">
+                  <h3 class="h4 card__list-title">${title}</h3>
+                  <div class="card__list-metadata">
+                    {{each JSON.parse(items)}}
+                      <span>{{html icon}}{{html text}}</span>
+                    {{/each}}
                   </div>
                 </div>
-              </div>
-              <div class="map-info__button">
-                <a href="${link}" class="button button--sc">
-                  <%= t(".view_project") %>
-                </a>
-              </div>
+              </a>
             </div>
-          </div>
-        </template>
-      <% end %>
+          </template>
+        <% end %>
+      </div>
     <% end %>
-    <% if voting_finished? %>
-      <h2 class="heading2">
-        <%= t("decidim.budgets.projects.projects_for", name: translated_attribute(budget.title)) %>
-      </h2>
-    <% else %>
-      <%= render partial: "budget_summary", locals: { include_heading: true } %>
+
+    <%= cell("decidim/budgets/limit_announcement", budget) %>
+
+    <% unless voting_finished? %>
+      <section class="layout-main__section">
+        <span class="text-xl font-semibold">
+          <%= t("select_projects", scope: "decidim.budgets.projects") %>
+        </span>
+      </section>
     <% end %>
-  </div>
-
-  <div class="row columns">
-    <h2 class="section-heading">
-      <%= render partial: "count" %>
-    </h2>
-  </div>
-
-  <div class="row">
-    <div class="columns mediumlarge-4 large-3">
-      <%= render partial: "filters_small_view" %>
-      <div class="card card--secondary show-for-mediumlarge">
-        <%= render partial: "filters" %>
-      </div>
-    </div>
-    <div id="projects" class="columns mediumlarge-8 large-9" aria-live="polite">
+
+    <section id="projects" class="layout-main__section layout-main__heading">
       <%= render partial: "projects" %>
-    </div>
-  </div>
-</div>
+    </section>
+  <% else %>
+    <%= cell("decidim/announcement", t("empty", scope: "decidim.budgets.projects")) %>
+  <% end %>
 
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_budgets" %>
 <% end %>

data/app/views/decidim/budgets/projects/index.js.erb

@@ -1,10 +1,11 @@
-var $projects = $('#projects');
+var $projects = $('#projects .budget-list');
+var $order = $('.budget__list--header .collection-sort-controls');
 var $projectsCount = $('#projects-count');
 var $orderFilterInput = $('.order_filter');
 
-$projects.html('<%= j(render partial: "projects").strip.html_safe %>');
+$projects.html('<%= j(render partial: "projects_list").strip.html_safe %>');
+$order.html('<%= j(render partial: "order").strip.html_safe %>');
 $projectsCount.html('<%= j(render partial: "count").strip.html_safe %>');
 $orderFilterInput.val('<%= order %>');
 
-var $dropdownMenu = $('.dropdown.menu', $projects);
-$dropdownMenu.foundation();
+document.dispatchEvent(new CustomEvent("ajax:loaded", { detail: $projects[0] }));