Merge pull request #2608 from consul/ui-design

UI design

app/assets/stylesheets/participation.scss

@@ -1350,8 +1350,7 @@
       text-decoration: none;
     }
 
-    a,
+    a {
-    div {
       display: block;
       padding: $line-height / 2;
 

app/views/admin/newsletters/show.html.erb

@@ -38,7 +38,17 @@
     <%= t("admin.newsletters.show.body_help_text") %>
   </p>
   <div class="newsletter-body-content">
-    <%= render file: "app/views/mailer/newsletter.html.erb", layout: '/app/views/layouts/mailer.html.erb' %>
+    <%= render file: "app/views/layouts/_mailer_header.html.erb" %>
+
+    <table cellpadding="0" cellspacing="0" border="0" style="background: #fff; margin: 0 auto; max-width: 700px; width:100%;">
+      <tbody>
+        <tr>
+          <%= render file: "app/views/mailer/newsletter.html.erb" %>
+        </tr>
+      </tbody>
+    </table>
+
+    <%= render file: "app/views/layouts/_mailer_footer.html.erb" %>
   </div>
 </div>
 

app/views/budgets/index.html.erb

@@ -65,9 +65,9 @@
         <div id="groups_and_headings" class="groups-and-headings">
           <% current_budget.groups.each do |group| %>
             <h2 id="<%= group.name.parameterize %>"><%= group.name %></h2>
-            <ul class="no-bullet">
+            <ul class="no-bullet" data-equalizer data-equalizer-on="medium">
               <% group.headings.order_by_group_name.each do |heading| %>
-                <li class="heading small-12 medium-4 large-2">
+                <li class="heading small-12 medium-4 large-2" data-equalizer-watch>
                   <% unless current_budget.informing? %>
                     <%= link_to budget_investments_path(current_budget.id, heading_id: heading.id) do %>
                       <%= heading_name_and_price_html(heading, current_budget) %>

app/views/debates/index.html.erb

@@ -1,4 +1,4 @@
-<% provide :title do %><%= t('debates.index.title') %><% end %>
+<% provide :title do %><%= t("debates.index.title") %><% end %>
 <% content_for :header_addon do %>
   <%= render "shared/search_form",
              search_path: debates_path(page: 1),
@@ -54,10 +54,10 @@
 
       <%= render "shared/advanced_search", search_path: debates_path(page: 1) %>
 
-      <%= render 'shared/order_links', i18n_namespace: "debates.index" %>
+      <%= render "shared/order_links", i18n_namespace: "debates.index" %>
 
       <div class="show-for-small-only">
-        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button expanded' %>
+        <%= link_to t("debates.index.start_debate"), new_debate_path, class: "button expanded" %>
       </div>
 
       <% if @debates.any? || current_user.blank? %>
@@ -81,7 +81,7 @@
           <p><%= t("debates.index.section_footer.description") %></p>
           <p><%= t("debates.index.section_footer.help_text_1") %></p>
           <p><%= t("debates.index.section_footer.help_text_2",
-                    org: link_to(setting['org_name'], new_user_registration_path)).html_safe %></p>
+                    org: link_to(setting["org_name"], new_user_registration_path)).html_safe %></p>
           <p><%= t("debates.index.section_footer.help_text_3",
                     proposal: link_to(t("debates.index.section_footer.proposals_link"), proposals_path),
                     budget: link_to(t("debates.index.section_footer.budget_link"), budgets_path)).html_safe %>
@@ -93,8 +93,8 @@
     <div class="small-12 medium-3 column">
 
       <aside class="margin-bottom">
-        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button expanded' %>
+        <%= link_to t("debates.index.start_debate"), new_debate_path, class: "button expanded" %>
-        <%= render "shared/tag_cloud", taggable: 'debate' %>
+        <%= render "shared/tag_cloud", taggable: "debate" %>
       </aside>
     </div>
 

app/views/layouts/_mailer_footer.html.erb

@@ -0,0 +1,13 @@
+<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto; max-width: 700px; width:100%; margin-bottom: 40px; padding: 0 20px;">
+  <tbody>
+    <tr>
+      <td style="text-align: center; border-top: 1px solid #dadfe1; padding-top: 20px;">
+        <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif; margin: 0;padding: 0;line-height: 1.5em;color: #797f7f; font-size: 12px;">
+        <%= setting['org_name'] %></p>
+
+        <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif; margin: 0;padding: 0;line-height: 1.5em;color: #222; font-size: 10px; margin-top: 12px;">
+        <%= t('mailers.no_reply') %></p>
+      </td>
+    </tr>
+  </tbody>
+</table>

app/views/layouts/_mailer_header.html.erb

@@ -0,0 +1,15 @@
+<table cellpadding="0" cellspacing="0" border="0" style="background: #fff; margin: 0 auto; max-width: 700px; width:100%;">
+  <tr>
+    <td>
+      <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
+        <tr>
+          <td style="border-bottom: 1px solid #dadfe1; padding: 20px 0;">
+            <a href="#" target="_blank">
+              <%= image_tag('logo_email.png',  style: "border: 0; display: block; width: 100%;max-width: 370px", alt: setting['org_name']) %>
+            </a>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>

app/views/layouts/mailer.html.erb

@@ -7,38 +7,16 @@
 </head>
 <body style="background: #fff; font-family:font-family: 'Open Sans','Helvetica Neue',arial,sans-serif !important; margin: 0 10px; padding: 0; text-align: left;">
 
+  <%= render "layouts/mailer_header" %>
+
   <table cellpadding="0" cellspacing="0" border="0" style="background: #fff; margin: 0 auto; max-width: 700px; width:100%;">
-    <tr>
-      <td>
-        <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
-          <tr>
-            <td style="border-bottom: 1px solid #dadfe1; padding: 20px 0;">
-              <a href="#" target="_blank">
-                <%= image_tag('logo_email.png',  style: "border: 0; display: block; width: 100%;max-width: 370px", alt: setting['org_name']) %>
-              </a>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-    <tr>
-      <%= yield %>
-    </tr>
-  </table>
-
-  <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto; max-width: 700px; width:100%; margin-bottom: 40px; padding: 0 20px;">
     <tbody>
-    <tr>
+      <tr>
-      <td style="text-align: center; border-top: 1px solid #dadfe1; padding-top: 20px;">
+        <%= yield %>
-        <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif; margin: 0;padding: 0;line-height: 1.5em;color: #797f7f; font-size: 12px;">
+      </tr>
-        <%= setting['org_name'] %></p>
-
-        <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif; margin: 0;padding: 0;line-height: 1.5em;color: #222; font-size: 10px; margin-top: 12px;">
-        <%= t('mailers.no_reply') %></p>
-
-      </td>
-    </tr>
     </tbody>
   </table>
+
+  <%= render "layouts/mailer_footer" %>
 </body>
 </html>

app/views/welcome/_recommended_carousel.html.erb

@@ -29,8 +29,12 @@
 
       <div class="orbit-bullets">
         <% recommendeds.each_with_index do |recommended, index| %>
-          <button data-slide="<%= index %>" class="<%= is_active_class(index) %>">
+          <button class="<%= is_active_class(index) %>"
-            <span class="show-for-sr">Second slide details.</span>
+                  title="<%= t("welcome.recommended.slide", title: recommended.title) %>"
+                  data-slide="<%= index %>">
+            <span class="show-for-sr">
+              <%= t("welcome.recommended.slide", title: recommended.title) %>
+            </span>
           </button>
         <% end %>
       </div>

config/locales/en/general.yml

@@ -807,6 +807,7 @@ en:
         btn_text_link: All recommended proposals
       budget_investments:
         title: Recommended investments
+      slide: "See %{title}"
     verification:
       i_dont_have_an_account: I don't have an account
       i_have_an_account: I already have an account

config/locales/es/general.yml

@@ -806,6 +806,7 @@ es:
         btn_text_link: Todas las propuestas recomendadas
       budget_investments:
         title: Presupuestos recomendados
+      slide: "Ver %{title}"
     verification:
       i_dont_have_an_account: No tengo cuenta, quiero crear una y verificarla
       i_have_an_account: Ya tengo una cuenta que quiero verificar