From 5768ddd3ec0c50f36b4e8828a63550132ab114b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivan=20Verg=C3=A9s?=
<%= action_authorized_link_to :unvote,
- "👉 #{t('decidim.decidim_awesome.proposal_m.change_vote')}",
+ t("decidim.decidim_awesome.voting.three_flags.change_vote"),
proposal_vote_path(current_vote&.weight),
- resource: proposal,
remote: true,
method: :delete,
id: "change-vote",
- class: "change-vote-button" %>
-<% end %>
-<%= t("decidim.decidim_awesome.proposal_m.modal.title") %>
-<% if voted_for_any? %>
+<%= title %>
+
+
<%= t("decidim.proposals.proposals.vote_button.maximum_votes_reached") %>
+<% elsif vote_limit_enabled? && remaining_votes_count_for(current_user) <= 0 %> +<%= t("decidim.proposals.proposals.vote_button.no_votes_remaining") %>
+<% elsif current_settings.votes_blocked? || !current_component.participatory_space.can_participate?(current_user) %> +<%= t("decidim.proposals.proposals.vote_button.votes_blocked") %>
<% end %> diff --git a/app/cells/decidim/decidim_awesome/voting/three_flags_proposal/vote_block_for.erb b/app/cells/decidim/decidim_awesome/voting/three_flags_proposal/vote_block_for.erb index b8ec01cb8..2da884d86 100644 --- a/app/cells/decidim/decidim_awesome/voting/three_flags_proposal/vote_block_for.erb +++ b/app/cells/decidim/decidim_awesome/voting/three_flags_proposal/vote_block_for.erb @@ -1,14 +1,16 @@<%= proposal_votes(weight) %>
-<%= color.capitalize %>
+<%= proposal_votes(weight) %>
+ <% end %> <%= action_authorized_link_to :vote, proposal_vote_path(weight), - resource: proposal, - remote: true, - method: :post, - class: "rectangle voting-block #{color} #{opacity_class_for(weight)} #{'voted' if voted_for?(weight)}" do %> - <%= icon "thumb-up" %> + **link_options(weight) do %> + <%= proposal.manifest.label_for(weight) %> + <%= content_tag :svg, role: "img" do + content_tag(:title, t("decidim.decidim_awesome.voting.three_flags.voting_for", type: proposal.manifest.label_for(weight))) + + content_tag(:use, "", "href" => svg_path(weight)) + end %> <% end %><%= vote_instructions %>
-${evt.currentTarget.children[1].children[0].textContent}
`); + } else if ($card[0].classList.contains("button")) { + $card[0].classList.remove("button"); + $card.html(`${evt.currentTarget.title}
`); + } else { + $card.html(`${evt.currentTarget.textContent}
`); + } + $modal.foundation("open"); + } else { + $(evt.currentTarget).closest(".voting-three-flags").addClass("loading"); + } + }); +}); diff --git a/app/packs/stylesheets/decidim/decidim_awesome/voting/three_flags.scss b/app/packs/stylesheets/decidim/decidim_awesome/voting/three_flags.scss index 097feaa60..99b548bde 100644 --- a/app/packs/stylesheets/decidim/decidim_awesome/voting/three_flags.scss +++ b/app/packs/stylesheets/decidim/decidim_awesome/voting/three_flags.scss @@ -4,6 +4,57 @@ $yellow-color: #ffc107; $red-color: #f44336; + &-card { + a { + margin-bottom: 0; + + > svg { + margin-bottom: 2px; + vertical-align: middle; + } + } + } + + margin-bottom: 1.5rem; + border-bottom: 2px solid #d9d9d9; + + &.current-choice { + text-align: center; + margin-bottom: 0; + border-bottom: none; + + .vote-card { + margin-top: .5rem; + + .vote-label { + margin-bottom: 1rem; + color: $black; + } + } + + .change-vote-button:hover { + font-size: 1rem; + margin-top: 0; + } + } + + &.loading { + opacity: .3; + pointer-events: none; + position: relative; + + &::before { + @include spinner(25px, $medium-gray, var(--primary), 800ms); + + z-index: 1000; + content: ""; + vertical-align: middle; + position: absolute; + top: calc(50% - 12.5px); + left: calc(50% - 12.5px); + } + } + .vote-title { text-align: center; font-size: 1.5rem; @@ -18,30 +69,57 @@ display: none; } - .rectangle { - width: $rectangle-width; - height: calc($rectangle-width * 2); + .vote-card { display: inline-block; - margin: 5px; - border-radius: 5px; - position: relative; - &.green { - background-color: $green-color; + .vote-label { + font-size: 1rem; + margin-bottom: 0; + } + + > svg { + display: inline-block; + width: $rectangle-width; + height: calc($rectangle-width * 2); + vertical-align: middle; + margin: -.5rem 0 0 .5rem; + max-width: 100%; + transition: transform 150ms ease-in-out; + + &:hover { + transform: scale(1.15) rotate(-5deg); + } } - &.yellow { - background-color: $yellow-color; + &.weight_3 { + color: $green-color; + + & > svg { + fill: $green-color; + } } - &.red { - background-color: $red-color; + &.weight_2 { + color: $yellow-color; + + & > svg { + fill: $yellow-color; + } } - } - .voting-block { - text-align: center; - line-height: 40px; + &.weight_1 { + color: $red-color; + + & > svg { + fill: $red-color; + } + } + + &.voted { + & > svg { + transform: scale(1.15) rotate(-5deg); + } + } } .voting-button { @@ -51,63 +129,41 @@ font-weight: bold; } - .fully-opaque { - opacity: 1; - } - - .semi-opaque { + .dim { opacity: .3; pointer-events: none; } - .non-clickable { + .disabled { pointer-events: none; } - .vote-block, - .vote-link { + .vote-block { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; + text-align: center; .vote-count { font-size: 2rem; - font-weight: bold; + font-weight: bolder; margin-bottom: 0; } + } - .vote-label { - font-size: 1rem; - margin-bottom: 0; - - &.green { - color: $green-color; - } - - &.yellow { - color: $yellow-color; - } + .change-vote-button { + transition: all 150ms ease-in-out; - &.red { - color: $red-color; - } - } - - .icon--thumb-up { - position: absolute; - bottom: 0; - left: 10%; - height: 20px; - width: 20px; + &:hover { + text-decoration: none; + font-size: .9rem; + margin-top: .1rem; } } .button.abstain-button { - background-color: transparent; - color: black; - box-shadow: 0 2px 6px 4px rgba(0, 0, 0, .1); - margin-top: 1rem; + text-transform: uppercase; } } diff --git a/app/views/decidim/decidim_awesome/voting/three_flags/_proposal_m_cell_footer.erb b/app/views/decidim/decidim_awesome/voting/three_flags/_proposal_m_cell_footer.erb index 146fabf77..3cfef1d43 100644 --- a/app/views/decidim/decidim_awesome/voting/three_flags/_proposal_m_cell_footer.erb +++ b/app/views/decidim/decidim_awesome/voting/three_flags/_proposal_m_cell_footer.erb @@ -2,10 +2,7 @@