Merge pull request #826 from consul/design_spending_proposals

Design spending proposals

app/assets/fonts/icons.svg

@@ -42,8 +42,10 @@
 <glyph glyph-name="box" unicode="&#73;" d="M311 274c0 5-2 10-6 13-3 4-7 6-12 6l-74 0c-5 0-9-2-12-6-4-3-6-8-6-13 0-5 2-9 6-13 3-3 7-5 12-5l74 0c5 0 9 2 12 5 4 4 6 8 6 13z m164 55l0-274c0-5-1-9-5-13-4-4-8-5-13-5l-402 0c-5 0-9 1-13 5-4 4-5 8-5 13l0 274c0 5 1 9 5 13 4 4 8 5 13 5l402 0c5 0 9-1 13-5 4-4 5-8 5-13z m19 128l0-73c0-5-2-9-6-13-3-3-8-5-13-5l-438 0c-5 0-10 2-13 5-4 4-6 8-6 13l0 73c0 5 2 9 6 13 3 4 8 5 13 5l438 0c5 0 10-1 13-5 4-4 6-8 6-13z"/>
 <glyph glyph-name="youtube" unicode="&#75;" d="M314 157l0-61c0-12-4-19-11-19-5 0-9 2-13 6l0 86c4 5 8 7 13 7 7 0 11-7 11-19z m97-1l0-13-26 0 0 13c0 13 4 20 13 20 8 0 13-7 13-20z m-276 63l30 0 0 26-89 0 0-26 30 0 0-163 29 0z m82-163l25 0 0 141-25 0 0-108c-6-8-11-12-16-12-4 0-6 2-6 6-1 1-1 4-1 10l0 104-25 0 0-112c0-9 1-16 2-20 2-7 8-11 17-11 9 0 19 6 29 17z m122 42l0 57c0 13 0 23-2 28-3 11-10 16-20 16-10 0-19-5-27-16l0 62-25 0 0-189 25 0 0 14c9-11 17-16 27-16 10 0 17 5 20 16 2 5 2 14 2 28z m97 3l0 4-26 0c0-10 0-16-1-18-1-6-5-10-11-10-9 0-13 7-13 20l0 25 51 0 0 29c0 15-3 26-8 33-7 10-17 15-30 15-13 0-23-5-31-15-5-7-8-18-8-33l0-49c0-15 3-26 9-33 7-10 17-15 31-15 13 0 24 5 30 15 4 5 6 10 6 16 1 1 1 7 1 16z m-174 261l0 60c0 13-4 20-12 20-8 0-12-7-12-20l0-60c0-13 4-20 12-20 8 0 12 7 12 20z m206-215c0-44-3-77-8-100-2-11-8-20-16-28-9-7-18-12-29-13-35-4-88-6-159-6-71 0-124 2-159 6-11 1-20 6-29 13-8 8-14 17-16 28-5 22-8 55-8 100 0 45 3 78 8 100 2 12 8 21 16 29 9 7 18 12 30 13 35 4 87 6 158 6 71 0 124-2 159-6 11-1 20-6 29-13 8-8 14-17 16-29 5-21 8-54 8-100z m-285 365l29 0-35-114 0-77-28 0 0 77c-3 14-9 34-18 61-7 19-13 37-18 53l30 0 20-75z m105-95l0-50c0-16-2-27-8-34-7-10-17-14-30-14-13 0-23 4-30 14-5 7-8 19-8 34l0 50c0 15 3 26 8 33 7 10 17 15 30 15 13 0 23-5 30-15 6-7 8-18 8-33z m96 46l0-142-26 0 0 15c-10-12-20-17-29-17-9 0-15 3-17 10-2 5-3 12-3 22l0 112 26 0 0-105c0-6 1-9 1-10 0-4 2-6 6-6 5 0 10 4 16 12l0 109z"/>
 <glyph glyph-name="letter" unicode="&#76;" d="M475 82l0 220c-6-7-12-13-19-19-51-39-92-72-122-97-10-8-18-14-24-19-6-4-14-9-24-14-11-4-21-7-30-7l0 0c-9 0-19 3-30 7-10 5-18 10-24 14-6 5-14 11-24 19-30 25-71 58-122 97-7 6-13 12-19 19l0-220c0-2 0-4 2-6 2-2 4-3 7-3l420 0c3 0 5 1 7 3 2 2 2 4 2 6z m0 301l0 7c0 0 0 1 0 3 0 3 0 4-1 4 0 0-1 1-1 2-1 2-2 3-3 3-1-1-2-1-4 0l-420 0c-3 0-5-1-7-2-2-2-2-4-2-7 0-32 14-59 42-81 36-29 75-59 114-91 1-1 5-3 10-8 6-5 10-8 13-11 4-2 8-5 13-9 5-3 10-6 14-8 5-1 9-2 13-2l0 0c4 0 8 1 13 2 4 2 9 5 14 8 5 4 9 7 13 9 3 3 7 6 13 11 5 5 9 7 10 8 39 32 78 62 114 91 11 8 20 19 29 33 9 14 13 26 13 38z m37 10l0-311c0-12-4-23-13-32-9-9-20-13-33-13l-420 0c-13 0-24 4-33 13-9 9-13 20-13 32l0 311c0 13 4 23 13 32 9 9 20 14 33 14l420 0c13 0 24-5 33-14 9-9 13-19 13-32z"/>
-<glyph glyph-name="no-notification" unicode="&#120;" d="M261 27c0 3-2 5-5 5-11 0-21 4-29 12-8 8-12 18-12 29 0 3-2 5-5 5-3 0-4-2-4-5 0-14 5-26 14-35 10-10 22-15 36-15 3 0 5 1 5 4z m-154 136l251 217c-8 17-21 31-38 42-17 11-39 17-64 17-18 0-34-3-48-9-15-6-27-14-35-23-9-9-15-19-20-30-4-10-7-20-7-30 0-73-13-134-39-184z m387-53c0-10-4-19-11-26-7-7-16-11-26-11l-128 0c0-20-7-37-21-52-15-14-32-21-52-21-20 0-37 7-52 21-14 14-21 32-21 52l42 37 217 0c-32 35-54 79-65 131l32 28c11-68 40-121 85-159z m24 397l24-27c2-2 3-4 2-7 0-2-1-4-3-6l-534-464c-2-1-5-2-7-2-3 1-5 2-6 4l-24 27c-2 2-3 4-2 7 0 2 1 4 3 6l53 46c-4 6-6 12-6 19 10 8 18 16 26 25 8 9 16 20 25 34 8 14 15 29 21 45 6 16 10 36 14 59 4 23 6 48 6 74 0 29 11 56 33 81 22 25 52 40 88 45-2 4-2 8-2 12 0 7 2 14 8 19 5 5 11 8 19 8 8 0 14-3 19-8 6-5 8-12 8-19 0-4 0-8-2-12 24-3 45-11 63-23 18-12 32-27 42-45l119 104c2 1 5 2 7 2 3-1 5-2 6-4z"/>
-<glyph glyph-name="notification" unicode="&#110;" d="M261 27c0 3-2 5-5 5-11 0-21 4-29 12-8 8-12 18-12 29 0 3-2 5-5 5-3 0-4-2-4-5 0-14 5-26 14-35 10-10 22-15 36-15 3 0 5 1 5 4z m233 83c0-10-4-19-11-26-7-7-16-11-26-11l-128 0c0-20-7-37-21-52-15-14-32-21-52-21-20 0-37 7-52 21-14 15-21 32-21 52l-128 0c-10 0-19 4-26 11-7 7-11 16-11 26 10 8 18 16 26 25 8 9 16 20 25 34 8 14 15 29 21 45 6 16 10 36 14 59 4 23 6 48 6 74 0 29 11 56 33 81 22 25 52 40 88 45-2 4-2 8-2 12 0 7 2 14 8 19 5 5 11 8 19 8 8 0 14-3 19-8 6-5 8-12 8-19 0-4 0-8-2-12 36-5 66-20 88-45 22-25 33-52 33-81 0-26 2-51 6-74 4-23 8-43 14-59 6-16 13-31 21-45 9-14 17-25 25-34 8-9 16-17 26-25z"/>
 <glyph glyph-name="circle" unicode="&#67;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
 <glyph glyph-name="circle-o" unicode="&#77;" d="M256 411c-28 0-54-7-78-20-24-14-43-33-57-57-13-24-20-50-20-78 0-28 7-54 20-78 14-24 33-43 57-57 24-13 50-20 78-20 28 0 54 7 78 20 24 14 43 33 57 57 13 24 20 50 20 78 0 28-7 54-20 78-14 24-33 43-57 57-24 13-50 20-78 20z m219-155c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph glyph-name="help" unicode="&#78;" d="M256 480c-124 0-224-100-224-224 0-124 100-224 224-224 124 0 224 100 224 224 0 124-100 224-224 224z m20-327c0-18-13-29-31-28-16 0-29 12-28 30 0 18 14 29 30 29 17-1 30-13 29-31z m49 128c-4-6-14-14-25-23l-14-9c-6-5-10-11-12-17-1-4-2-13-2-19 0-1-1-4-5-4-3 0-35 0-39 0-4 0-4 2-4 4 0 16 3 30 10 41 9 15 35 30 35 30 4 3 7 6 10 10 4 6 8 13 8 20 0 8-2 16-8 23-6 7-13 11-25 11-13 0-21-6-26-15-5-8-4-18-4-27l-49 0c0 34 9 56 28 68 12 9 29 13 48 13 24 0 44-5 61-18 17-12 25-29 25-52 0-15-5-27-12-36z"/>
+<glyph glyph-name="budget" unicode="&#83;" d="M33 256l223 0 0 223c-5 1-11 1-16 1-115 0-208-93-208-208 0-5 0-11 1-16z m77-146c38-48 96-78 162-78 115 0 208 93 208 208 0 66-30 124-78 162-31 26-71 42-114 45l0-223-223 0c3-43 19-83 45-114z"/>
+<glyph glyph-name="notification" unicode="&#110;" d="M256 48c23 0 41 19 41 42l-82 0c0-23 18-42 41-42z m135 125l0 114c0 64-45 118-104 131l0 15c0 17-13 31-31 31-18 0-31-14-31-31l0-15c-59-13-104-67-104-131l0-114-41-42 0-21 352 0 0 21z"/>
+<glyph glyph-name="no-notification" unicode="&#120;" d="M257 392c7 0 24-5 24-5 46-10 78-52 78-100l0-127 9-10 8-8-240 0 8 8 9 10 0 127c0 48 33 90 78 100 0 0 18 5 24 5m1 72c-18 0-31-14-31-31l0-15c-59-13-104-67-104-131l0-114-41-42 0-21 352 0 0 21-41 42 0 114c0 64-45 118-104 131l0 15c0 17-13 31-31 31z m41-374l-82 0c0-23 18-42 41-42 23 0 41 19 41 42z"/>
 </font></defs></svg>

app/assets/stylesheets/icons.scss

@@ -142,15 +142,21 @@
 .icon-letter:before {
   content: "\4c";
 }
-.icon-no-notification:before {
-  content: "\78";
-}
-.icon-notification:before {
-  content: "\6e";
-}
 .icon-circle:before {
   content: "\43";
 }
 .icon-circle-o:before {
   content: "\4d";
 }
+.icon-help:before {
+  content: "\4e";
+}
+.icon-budget:before {
+  content: "\53";
+}
+.icon-notification:before {
+  content: "\6e";
+}
+.icon-no-notification:before {
+  content: "\78";
+}

app/assets/stylesheets/participation.scss

@@ -272,7 +272,9 @@
 // 02. New participation
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.debate-new, .debate-edit, .proposal-new, .proposal-edit,  {
+.debate-new, .debate-edit,
+.proposal-new, .proposal-edit,
+.spending-proposal-new, .spending-proposal-edit  {
   padding-top: $line-height;
 
   .back {
@@ -293,6 +295,13 @@
     opacity: .5;
   }
 
+  .icon-budget {
+    color: $budget;
+    font-size: rem-calc(50);
+    line-height: $line-height;
+    opacity: .5;
+  }
+
   .recommendations {
     list-style-type: none;
     margin-left: 0;

app/assets/stylesheets/variables.scss

@@ -73,6 +73,8 @@ $check:             #46DB91;
 $proposals:         #FFA42D;
 $proposals-border:  #CC8425;
 
+$budget:            #454372;
+
 $highlight:         #E7F2FC;
 $featured:          #FED900;
 

app/views/admin/_menu.html.erb

@@ -34,7 +34,7 @@
 
     <li <%= "class=active" if controller_name == "spending_proposals" %>>
       <%= link_to admin_spending_proposals_path do %>
-        <i class="icon-proposals"></i>
+        <i class="icon-budget"></i>
         <%= t("admin.menu.spending_proposals") %>
       <% end %>
     </li>

app/views/spending_proposals/index.html.erb

@@ -4,7 +4,7 @@
     <div class="more-information text small-12 medium-8 column">
       <h1><%= t('spending_proposals.index.title') %></h1>
 
-      <p><%= t('spending_proposals.index.text') %></p>
+      <p><%= t('spending_proposals.index.text_html') %></p>
 
       <% if can? :create, SpendingProposal %>
         <%= link_to t('spending_proposals.index.create_link'), new_spending_proposal_path, class: 'button radius' %>

app/views/spending_proposals/new.html.erb

@@ -1,4 +1,4 @@
-<div class="spending-proposal-new row">
+<div class="spending-proposal-new row margin-top">
 
   <div class="small-12 medium-9 column">
     <%= link_to spending_proposals_path, class: "left back" do %>
@@ -15,7 +15,7 @@
   </div>
 
   <div class="small-12 medium-3 column">
-    <i class="icon-spending-proposals right"></i>
+    <i class="icon-budget right"></i>
     <h2><%= t("spending_proposals.new.recommendations_title") %></h2>
     <ul class="recommendations">
       <li><%= t("spending_proposals.new.recommendation_one") %></li>

config/locales/en.yml

@@ -249,7 +249,7 @@ en:
   spending_proposals:
     index:
       title: "Participatory budgeting"
-      text: "Here you can send spending proposals to be considered in the frame of the annual participatory budgeting."
+      text_html: "Here you can send spending proposals to be considered in the frame of the annual participatory budgeting."
       create_link: "Create spending proposal"
       verified_only: "Only verified users can create spending proposals, %{verify_account}."
       verify_account: "verify your account"
@@ -257,7 +257,7 @@ en:
       back_link: Back
       start_new: "Create spending proposal"
       more_info: "How do participatory budgeting works?"
-      recommendations_title: "Recommendations for creating a spending proposal"
+      recommendations_title: "How to create a spending proposal"
       recommendation_one: "It's mandatory that the proposal makes reference to a budgetable action."
       recommendation_two: "Any proposal or comment suggesting illegal action will be deleted."
       recommendation_three: "Try to go into details when describing your spending proposal so the reviewing team undertands your points."

config/locales/es.yml

@@ -249,7 +249,7 @@ es:
   spending_proposals:
     index:
       title: "Presupuestos participativos"
-      text: "Desde esta sección podrás sugerir propuestas de gasto que irán asociadas a las partidas de presupuestos ciudadanos. El requisito principal es que sean propuestas presupuestables."
+      text_html: "Desde esta sección podrás sugerir propuestas de gasto que irán asociadas a las partidas de presupuestos ciudadanos.<br>El requisito principal es que sean propuestas presupuestables."
       create_link: "Enviar propuesta de gasto"
       verified_only: "Sólo los usuarios verificados pueden crear propuestas de gasto, %{verify_account}."
       verify_account: "verifica tu cuenta"
@@ -257,7 +257,7 @@ es:
       back_link: Volver
       start_new: "Crear una propuesta de gasto"
       more_info: "¿Cómo funcionan los presupuestos participativos?"
-      recommendations_title: "Recomendaciones para crear una propuesta de gasto"
+      recommendations_title: "Cómo crear una propuesta de gasto"
       recommendation_one: "Es fundamental que haga referencia a una actuación presupuestable."
       recommendation_two: "Cualquier propuesta o comentario que implique acciones ilegales será eliminada."
       recommendation_three: "Intenta detallar lo máximo posible la propuesta para que el equipo de gobierno encargado de estudiarla tenga las menor dudas posibles."