bcn-budget-v0.24 to 0.24-stable-bcn (#12)

Co-authored-by: Vera Rojman <[email protected]> Co-authored-by: Vera Rojman <[email protected]> Co-authored-by: Ivan Vergés <[email protected]> Co-authored-by: decidim-bot <[email protected]>
AjuntamentdeBarcelona · Jun 2, 2021 · 824f3c4 · 824f3c4
1 parent 3593e3f
commit 824f3c4
Show file tree

Hide file tree

Showing 53 changed files with 970 additions and 226 deletions.
diff --git a/decidim-budgets/app/assets/javascripts/decidim/budgets/projects.js.es6 b/decidim-budgets/app/assets/javascripts/decidim/budgets/projects.js.es6
@@ -1,4 +1,4 @@
-// = require ./progressFixed
+// = require decidim/focus_mode
 // = require_self
 
 $(() => {
@@ -9,6 +9,7 @@ $(() => {
   const totalAllocation = parseInt($budgetSummaryTotal.attr("data-total-allocation"), 10);
 
   const cancelEvent = (event) => {
+    $(event.currentTarget).removeClass("loading-spinner");
     event.stopPropagation();
     event.preventDefault();
   };
@@ -28,6 +29,8 @@ $(() => {
     const $currentTarget = $(event.currentTarget);
     const projectAllocation = parseInt($currentTarget.attr("data-allocation"), 10);
 
+    $currentTarget.addClass("loading-spinner");
+
     if ($currentTarget.attr("disabled")) {
       cancelEvent(event);
     } else if (($currentTarget.attr("data-add") === "true") && ((currentAllocation + projectAllocation) > totalAllocation)) {

diff --git a/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_budget-list.scss b/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_budget-list.scss
@@ -19,6 +19,26 @@
       border-bottom-right-radius: $card-border-radius;
       border-bottom: $border;
     }
+
+    &-cell {
+      display: grid;
+      grid-template-columns: 1fr 40px;
+
+      .budget-list__data {
+        grid-column: span 2;
+        background: none;
+      }
+
+      @include breakpoint(medium){
+        grid-template-columns: 1fr 40px 15em;
+        grid-template-rows: 1fr;
+
+        .budget-list__data {
+          background: $card-secondary-bg;
+          grid-column: 3;
+        }
+      }
+    }
   }
 
   &__image{
@@ -54,6 +74,11 @@
       padding: $card-padding;
       display: flex;
       align-items: center;
+
+      &.flex-horizontal {
+        flex-direction: column;
+        align-items: flex-start;
+      }
     }
 
     .card__text--status{
@@ -79,10 +104,18 @@
       min-width: 7rem;
       flex-direction: row;
       justify-content: flex-end;
-      flex-basis: 12rem;
+      flex-basis: 14rem;
       padding: 1rem $card-padding;
     }
 
+    .loading-spinner {
+      margin: 0 !important;
+      position: relative;
+      &:before {
+        position: absolute;
+      }
+    }
+
     &:last-child{
       margin-bottom: 0;
     }

diff --git a/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_budget-meter.scss b/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_budget-meter.scss
@@ -1,5 +1,22 @@
 .budget-summary__total{
   margin-bottom: .5rem;
+
+  .mini-title {
+    display: block;
+
+    &__strong {
+      line-height: 1rem;
+    }
+  }
+
+  @include breakpoint(medium) {
+    align-content: center;
+    display: flex;
+
+    .mini-title:nth-of-type(2) {
+      margin-left: auto;
+    }
+  }
 }
 
 .budget-summary__progressbox{

diff --git a/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_budget-vote-button.scss b/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_budget-vote-button.scss
@@ -0,0 +1,36 @@
+.budget-vote-button.expanded {
+  display: flex;
+  text-align: left;
+  justify-content: space-between;
+  align-items: center;
+
+  .icon-wrapper {
+    @extend .budget-list__action;
+  }
+
+  &.added {
+    @extend .budget-list__data--added;
+    color: $body-font-color;
+
+    .icon-wrapper {
+      background: var(--success);
+      border-color: $body-font-color;
+      color: $body-font-color;
+    }
+  }
+
+  &.hollow {
+    .icon-wrapper {
+      border: $button-hollow-border-width solid var(--primary);
+      color: var(--primary);
+    }
+
+    &:hover,
+    &:focus {
+      .icon-wrapper {
+        border-color: white;
+        color: white;
+      }
+    }
+  }
+}
diff --git a/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_progress.scss b/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_progress.scss
@@ -4,6 +4,17 @@
   position: relative;
 }
 
+.budget-progress .progress-meter{
+  &:not(&--minimum) {
+    background-color: tint($success, 80%);
+  }
+
+  .progress-meter-text{
+    color: $body-font-color; 
+    font-size: 1rem;
+  }
+}
+
 .progress-meter--minimum{
   background: repeating-linear-gradient(-55deg, rgba(white, .2), rgba(white, .2) 8px, rgba(black, .03) 8px, rgba(black, .03) 16px);
   position: absolute;
@@ -16,4 +27,22 @@
   text-align: right;
   padding-left: 1rem;
   padding-right: .5rem;
+
+  @include breakpoint(smallmedium down) {
+    text-align: center;
+    padding: 0;
+    left: 0;
+  }
 }
+
+.progress-text-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 1em;
+}
+
+.progress-text {
+  font-size: 1em;
+}
diff --git a/decidim-budgets/app/cells/decidim/budgets/budget_information_modal/show.erb b/decidim-budgets/app/cells/decidim/budgets/budget_information_modal/show.erb
@@ -1,28 +1,10 @@
-<button class="link" data-open="budget-modal-info" aria-controls="budget-modal-info" aria-haspopup="true" tabindex="0">
-  <%= t(:more_information, scope: i18n_scope) %>
-</button>
-
-<div class="reveal" data-reveal id="budget-modal-info">
-  <div class="reveal__header">
-    <h3 class="reveal__title"><%= decidim_sanitize(component_name) %></h3>
-    <button class="close-button" data-close aria-label="<%= t(:close_modal, scope: i18n_scope) %>" type="button">
-      <span aria-hidden="true">×</span>
-    </button>
-  </div>
-
-  <%= content_tag(:p, more_information) if more_information %>
-
-  <% unless current_workflow.single? %>
-    <p>
-      <%= link_to t(:back_to, scope: i18n_scope, component_name: component_name), budgets_path %>
-    </p>
-  <% end %>
-
-  <div class="row">
-    <div class="columns medium-8 medium-offset-2">
-      <button class="button expanded" data-close>
-        <%= t(:continue, scope: i18n_scope) %>
-      </button>
-    </div>
+<% if more_information %>
+  <button data-toggle="budget-modal-info">
+    <%= t("more_information", scope: i18n_scope) %>
+    <%= icon("caret-bottom", class:"icon--small", aria_label: t("more_information", scope: i18n_scope), role: "img") %>
+  </button>
+
+  <div class="hide" data-toggler=".hide" id="budget-modal-info">
+    <%= content_tag(:p, more_information) %>
   </div>
-</div>
+<% end %>
diff --git a/decidim-budgets/app/cells/decidim/budgets/budget_information_modal_cell.rb b/decidim-budgets/app/cells/decidim/budgets/budget_information_modal_cell.rb
@@ -7,7 +7,7 @@ class BudgetInformationModalCell < BaseCell
       alias budget model
 
       def more_information
-        translated_attribute(current_settings.more_information_modal).presence || translated_attribute(settings.more_information_modal)
+        translated_attribute(current_settings.more_information_modal).presence || translated_attribute(settings.more_information_modal).presence
       end
 
       def component_name

diff --git a/decidim-budgets/app/cells/decidim/budgets/budget_list_item/show.erb b/decidim-budgets/app/cells/decidim/budgets/budget_list_item/show.erb
@@ -1,22 +1,38 @@
-<div class="<%= card_class %>">
-  <div class="card--list__text">
+<div class="<%= card_class %> budget-list__item budget-list__item-cell">
+  <div class="budget-list__text flex-horizontal">
     <%= link_to budget_path(budget), class: link_class do %>
-      <% if voted? && !voting_finished? %>
-        <strong>
-          <%= translated_attribute(title) %>
-        </strong>
-        <span class="button tiny success card--list__check card--list__check--disabled">
-          <%= icon "check", class: "icon--small", role: "img" %>
-        </span>
-      <% else %>
+      <h5 class="card--list__heading">
         <%= translated_attribute(title) %>
+      </h5>
+    <% end %>
+
+    <h5>
+      <strong>
+        <%= budget_to_currency(total_budget) %>
+      </strong>
+    </h5>
+
+    <%= decidim_sanitize html_truncate(translated_attribute(description), length: 140) %>
+  </div>
 
-        <% if progress? && !voting_finished? %>
-          <span class="button tiny hollow secondary card--list__check card--list__check--disabled">
-            <%= icon "bookmark", class: "icon--small", role: "img" %>
-          </span>
-        <% end %>
+  <% if !voting_finished? %>
+    <div class="budget-list__icon mr-s">
+      <% if voted? %>
+        <span class="button tiny success card--list__check card--list__check--disabled card--list__check--inline">
+          <%= icon "check", class: "icon--small", role: "img" %>
+        </span>
+      <% elsif progress? %>
+        <span class="button tiny warning card--list__check card--list__check--disabled card--list__check--inline">
+          <%= icon "bookmark", class: "icon--small", role: "img" %>
+        </span>
       <% end %>
+    </div>
+  <% end %>
+
+  <div class="budget-list__data">
+    <%= link_to budget_path(budget), class: "button button--sc expanded #{button_class} mb-none" do %>
+      <span><%= button_text %></span>
+      <%= icon "chevron-right", class: "icon--small", role: "img" %>
     <% end %>
   </div>
 </div>
diff --git a/decidim-budgets/app/cells/decidim/budgets/budget_list_item_cell.rb b/decidim-budgets/app/cells/decidim/budgets/budget_list_item_cell.rb
@@ -4,9 +4,14 @@ module Decidim
   module Budgets
     # This cell renders the budget item list in the budgets list
     class BudgetListItemCell < BaseCell
+      include Decidim::SanitizeHelper
+      include Decidim::ApplicationHelper
+      include Decidim::Budgets::ProjectsHelper
+
       delegate :voting_finished?, to: :controller
+      delegate :highlighted, to: :current_workflow
 
-      property :title
+      property :title, :description, :total_budget
       alias budget model
 
       private
@@ -17,6 +22,7 @@ def card_class
             list << "card--list__data-added" if voted?
             list << "card--list__data-progress" if progress?
           end
+          list << "budget--highlighted" if highlighted?
         end.join(" ")
       end
 
@@ -32,9 +38,31 @@ def progress?
         current_user && status == :progress
       end
 
+      def highlighted?
+        highlighted.include?(budget)
+      end
+
       def status
         @status ||= current_workflow.status(budget)
       end
+
+      def button_class
+        "hollow" if voted? || !highlighted?
+      end
+
+      def button_text
+        key = if current_workflow.vote_allowed?(budget)
+                progress? ? :progress : :vote
+              else
+                :show
+              end
+
+        t(key, scope: i18n_scope)
+      end
+
+      def i18n_scope
+        "decidim.budgets.budgets_list"
+      end
     end
   end
 end
diff --git a/decidim-budgets/app/cells/decidim/budgets/budget_m_cell.rb b/decidim-budgets/app/cells/decidim/budgets/budget_m_cell.rb
@@ -5,7 +5,6 @@ module Budgets
     # This cell renders the Medium (:m) budget card
     # for an given instance of a Decidim::Budgets::Budget
     class BudgetMCell < Decidim::CardMCell
-      include ActiveSupport::NumberHelper
       include Decidim::Budgets::ProjectsHelper
 
       def statuses

diff --git a/decidim-budgets/app/cells/decidim/budgets/budgets_header/show.erb b/decidim-budgets/app/cells/decidim/budgets/budgets_header/show.erb
@@ -1,7 +1,3 @@
-<div class="row">
-  <div class="columns medium-7 mediumlarge-8">
-    <div class="section">
-      <%= decidim_sanitize(landing_page_content) %>
-    </div>
-  </div>
+<div class="section">
+  <%= decidim_sanitize(landing_page_content) %>
 </div>
diff --git a/decidim-budgets/app/cells/decidim/budgets/budgets_header_cell.rb b/decidim-budgets/app/cells/decidim/budgets/budgets_header_cell.rb
@@ -9,6 +9,10 @@ class BudgetsHeaderCell < BaseCell
       def landing_page_content
         translated_attribute(current_settings.landing_page_content).presence || translated_attribute(settings.landing_page_content)
       end
+
+      def landing_page_instructions
+        translated_attribute(current_settings.landing_page_instructions).presence || translated_attribute(settings.landing_page_instructions)
+      end
     end
   end
 end
diff --git a/decidim-budgets/app/cells/decidim/budgets/budgets_list/card_list.erb b/decidim-budgets/app/cells/decidim/budgets/budgets_list/card_list.erb
@@ -1,7 +1,18 @@
-<div id="budgets" class="card card--list card--list--mini">
-  <% budgets.each do |budget| %>
-    <% next if highlighted.include?(budget) && !voting_finished? %>
+<%# show highlighted budgets first %>
+<% if highlighted.any? %>
+  <div id="highlighted-budgets" class="card card--list budget-list">
+    <% highlighted.each do |budget| %>
+      <%= cell("decidim/budgets/budget_list_item", budget) %>
+    <% end %>
+  </div>
+<% end %>
 
-    <%= cell("decidim/budgets/budget_list_item", budget) %>
-  <% end %>
-</div>
+<% non_highlighted = (budgets - highlighted - voted) %>
+
+<% if non_highlighted.any? %>
+  <div id="budgets" class="card card--list budget-list">
+    <% non_highlighted.each do |budget| %>
+      <%= cell("decidim/budgets/budget_list_item", budget) %>
+    <% end %>
+  </div>
+<% end %>