Merge pull request #1259 from consul/accessibility

Accessibility

app/assets/stylesheets/_settings.scss

@@ -51,6 +51,7 @@ $base-font-size:      rem-calc(17);
 $base-line:           rem-calc(26);
 $small-font-size:     rem-calc(14);
 $line-height:         rem-calc(24);
+$tiny-font-size:      rem-calc(12);
 
 $brand:             #004A83;
 $dark:              darken($brand, 10%);
@@ -66,7 +67,6 @@ $link-hover:        darken($link, 20%);
 
 $debates:           #008CCF;
 
-$votes:             #26AEEE;
 $like:              #7BD2A8;
 $unlike:            #EF8585;
 
@@ -79,7 +79,7 @@ $budget:            #454372;
 $budget-hover:      #7571BF;
 
 $highlight:         #E7F2FC;
-$featured:          #FED900;
+$featured:          #FFDC5C;
 
 $footer-border:     #BFC1C3;
 

app/assets/stylesheets/layout.scss

@@ -475,8 +475,16 @@ header {
     &.active {
       border-bottom: 2px solid $brand;
       color: $brand;
+
+      &:hover {
+        text-decoration: none;
+      }
     }
   }
+
+  h2 {
+    font-size: $base-font-size;
+  }
 }
 
 .search-form-header input[type=text] {
@@ -1247,13 +1255,14 @@ table {
 }
 
 .share-supported {
+  text-align: center;
 
   .social-share-button {
     display: inline-block;
   }
 
   .ssb-twitter {
-    background: none;
+    background: #45B0E3;
     color: white;
     height: $line-height;
     position: relative;
@@ -1276,7 +1285,7 @@ table {
   }
 
   .ssb-facebook {
-    background: none;
+    background: #3B5998;
     color: white;
     height: rem-calc(24);
     position: relative;
@@ -1299,7 +1308,7 @@ table {
   }
 
   .ssb-google_plus {
-    background: none;
+    background: #DE4C34;
     color: white;
     height: rem-calc(24);
     position: relative;
@@ -1550,7 +1559,7 @@ table {
 
     .comment-votes {
       color: $text-medium;
-      font-size: rem-calc(14);
+      font-size: $small-font-size;
       line-height: $line-height;
 
       a {
@@ -1560,12 +1569,21 @@ table {
 
         &:hover {
           color: $text-medium;
+          text-decoration: none;
+
+          .icon-like {
+            color: $like;
+          }
+
+          .icon-unlike {
+            color: $unlike;
+          }
         }
       }
 
       [class^="icon-"] {
-        font-size: rem-calc(20);
+        font-size: $base-font-size;
-        vertical-align: middle;
+        vertical-align: sub;
       }
     }
 
@@ -1685,7 +1703,8 @@ table {
 }
 
 .flag-disable, .flag-active {
-  vertical-align: middle;
+  line-height: 0;
+  vertical-align: sub;
 }
 
 .flag-disable {

app/assets/stylesheets/participation.scss

@@ -12,14 +12,21 @@
 // ----------------------
 
 @mixin votes {
-  background: $votes;
+  border-top: 1px solid $border;
-  margin: 0 rem-calc(-12);
+  margin-top: $line-height;
-  padding: rem-calc(14) rem-calc(12);
+  padding: $line-height 0;
   position: relative;
 
+  @include breakpoint(medium) {
+    border-left: 1px solid $border;
+    border-top: 0;
+    margin-top: 0;
+    padding-top: $line-height*2;
+  }
+
   .icon-like, .icon-unlike {
     background: white;
-    border: 2px solid $votes;
+    border: 2px solid $text-light;
     border-radius: rem-calc(3);
     color: $text-light;
     display: inline-block;
@@ -29,7 +36,6 @@
     position: relative;
 
     &:hover, &:active {
-      border-color: white;
       color: white;
       cursor: pointer;
       opacity: 1 !important;
@@ -40,6 +46,7 @@
 
     &:hover, &:active {
       background: $like;
+      border: 2px solid $like;
     }
   }
 
@@ -47,50 +54,64 @@
 
     &:hover, &:active {
       background: $unlike;
+      border: 2px solid $unlike;
     }
   }
 
   .like, .unlike {
     line-height: rem-calc(48);
     vertical-align: super;
+    text-decoration: none;
 
     span.percentage {
-      color: white;
+      color: $text;
       display: inline-block;
-      font-size: rem-calc(16);
+      font-size: $small-font-size;
       line-height: $line-height*2;
-      padding-left: rem-calc(8);
+      padding-right: $line-height/2;
       vertical-align: top;
+
+      @include breakpoint(medium) {
+        display: block;
+        line-height: $line-height;
+        padding-right: 0;
+      }
     }
   }
 
   .voted {
 
     .icon-like, .icon-unlike {
-      border-color: white;
       color: white;
     }
 
     .icon-like {
       background: $like;
+      border: 2px solid $like;
     }
 
     .icon-unlike {
       background: $unlike;
+      border: 2px solid $unlike;
     }
   }
 
   .no-voted {
 
     .icon-like, .icon-unlike {
-      opacity: .5;
+      opacity: .3;
     }
   }
 
   .total-votes {
-    color: white;
+    font-weight: bold;
     float: right;
     line-height: $line-height*2;
+
+    @include breakpoint(medium) {
+      display: block;
+      float: none;
+    }
   }
 
   .divider {
@@ -99,64 +120,65 @@
 }
 
 @mixin supports {
-  background: $proposals;
+  padding: $line-height 0;
-  margin: 0 rem-calc(-12);
-  padding: rem-calc(14) rem-calc(12);
   position: relative;
 
   .progress {
-    background-color: rgba(255,255,255,.8);
+    background: lighten($proposals, 35%);
-    height: $line-height/2;
+    border: 1px solid lighten($proposals, 35%);
+    height: rem-calc(14);
+    position: relative;
 
     .meter {
-      background: $like;
+      background: $proposals;
+      border-radius: 0;
+      border-bottom-right-radius: rem-calc(3);
+      border-top-right-radius: rem-calc(3);
       display: block;
       height: $line-height/2;
     }
   }
 
   .percentage {
-    font-size: rem-calc(10);
+    color: $text;
-    color: $brand;
+    font-size: $tiny-font-size;
-    vertical-align: top;
     position: absolute;
-    top: 13px;
+    right: 6px;
-    right: 20px;
+    top: -2px;
+    vertical-align: top;
   }
 
   abbr {
-    color: white;
+    color: $text-medium;
 
     &[title] {
-      border-bottom: 1px dotted white;
+      border-bottom: 1px dotted $text-medium;
     }
   }
 
   .button-support {
-    background: white;
+    background: $proposals;
     color: $text;
     display: inline-block;
     font-size: $small-font-size;
     margin-top: rem-calc(12);
 
-    &:hover {
+    &:hover, &:active {
-      background: darken($proposals, 35%);
+      background: lighten($proposals, 25%);
-      color: white;
       cursor: pointer;
     }
-
-    &:active {
-      opacity: .75;
-    }
   }
 
   .total-supports {
-    color: white;
+    color: $text;
+    display: block;
+    font-weight: bold;
     text-align: center;
-    font-size: $small-font-size;
 
     span {
       display: block;
+      font-size: $small-font-size;
+      font-weight: normal;
     }
   }
 
@@ -165,23 +187,17 @@
   }
 
   .supported {
-    color: white;
+    color: $text;
     margin-top: rem-calc(12);
   }
 }
 
-.message {
+.supports-container {
-  @include supports;
+  border-top: 1px solid $border;
-  background: none;
-  border-top: 0;
 
   @include breakpoint(medium) {
     border-left: 1px solid $border;
-    margin: $line-height rem-calc(-25) 0 rem-calc(12);
+    border-top: 0;
-  }
-
-  p {
-    font-size: $small-font-size;
   }
 }
 
@@ -276,7 +292,9 @@
 // 03. Show participation
 // ----------------------
 
-.debate-show, .proposal-show, .investment-project-show {
+.debate-show,
+.proposal-show,
+.investment-project-show {
 
   p {
     word-wrap: break-word;
@@ -413,47 +431,8 @@
     }
   }
 
-  .votes {
-    @include votes;
-    border: 0;
-    border-radius: 0;
-    margin: 0;
-
-    .total-votes {
-      display: block;
-      float: none;
-      line-height: $line-height;
-    }
-
-    @include breakpoint(small + rem-calc(1) and medium down) {
-      .in-favor, .against {
-        text-align: left;
-        width: rem-calc(100);
-      }
-    }
-
-    .divider {
-      display: none;
-    }
-
-    @include breakpoint(medium) {
-      .divider {
-        display: inline-block;
-      }
-    }
-  }
-
   .supports {
     @include supports;
-    border: 0;
-    border-radius: 0;
-    margin: 0;
-
-    .total-supports {
-      display: block;
-      float: none;
-      line-height: $line-height;
-    }
   }
 
   .leave-comment {
@@ -478,6 +457,17 @@
   word-break: break-word;
 }
 
+.proposal-show, .investment-project-show {
+
+  .supports {
+    padding: $line-height/2 0 0;
+  }
+
+  .share-supported {
+    display: none;
+  }
+}
+
 // 04. List participation
 // ----------------------
 
@@ -496,8 +486,7 @@
 }
 
 .debate, .proposal, .investment-project {
-  margin-bottom: 0;
+  margin: $line-height/4 0;
-  margin-top: 0;
 
   .panel {
     background: white;
@@ -651,107 +640,30 @@
   }
 }
 
-.debate {
+.debate, .debate-show {
 
   .votes {
     @include votes;
-    border: 1px solid $votes;
-    margin: 0 rem-calc(-12);
 
-    @include breakpoint(medium) {
+    .against {
-      border-top-left-radius: 3px;
+      margin-left: $line-height/4;
-      border-bottom-left-radius: 3px;
-      margin: 0 rem-calc(-25) 0 rem-calc(12);
-    }
-
-    &:after {
-      content: none;
-      position: absolute;
-      display: block;
-      border-style: solid;
-      border-color: #166387 transparent transparent transparent;
-      bottom: -14px;
-      border-left-width: 0;
-      border-right-color: transparent;
-      right: -1px;
-      border-width: 13px 13px 0 0;
-
-      @include breakpoint(medium) {
-        content: "";
-      }
-    }
-
-    .total-votes {
-      display: inline-block;
-      line-height: $line-height;
-      margin-left: rem-calc(24);
-      padding-top: rem-calc(12);
-      vertical-align: top;
-
-      @include breakpoint(medium) {
-        display: block;
-        float: none;
-        line-height: $line-height*2;
-        margin-left: 0;
-        padding-top: 0;
-      }
     }
 
     @include breakpoint(medium) {
-      .like, .unlike {
+      text-align: center;
-
-        span.percentage {
-          display: block;
-          line-height: $line-height/2;
-        }
-      }
     }
   }
 }
 
+.debate-show .votes {
+  border: 0;
+  padding: $line-height/2 0;
+}
+
 .proposal {
 
   .supports {
     @include supports;
-    border: 1px solid $proposals;
-    margin: 0 rem-calc(-12);
-
-    @include breakpoint(medium) {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-      margin: 0 rem-calc(-25) 0 rem-calc(12);
-    }
-
-    &:after {
-      content: none;
-      position: absolute;
-      display: block;
-      border-style: solid;
-      border-color: #664212 transparent transparent transparent;
-      bottom: -14px;
-      border-left-width: 0;
-      border-right-color: transparent;
-      right: -1px;
-      border-width: 13px 13px 0 0;
-
-      @include breakpoint(medium) {
-        content: "";
-      }
-    }
-
-    .total-supports {
-      display: inline-block;
-      line-height: $line-height;
-      padding-top: rem-calc(12);
-      vertical-align: top;
-
-      @include breakpoint(medium) {
-        display: block;
-        float: none;
-        margin-left: 0;
-        padding-top: 0;
-      }
-    }
   }
 }
 
@@ -759,20 +671,6 @@
 
   .supports {
     @include supports;
-    background: none;
-    border: 0;
-    border-left: 1px solid $border;
-    margin: 0 rem-calc(-12);
-    min-height: rem-calc(180);
-    padding-top: 0;
-
-    @include breakpoint(medium) {
-      padding-top: $line-height*1.5;
-    }
-
-    &:after {
-      content: none;
-    }
 
     .investment-project-amount {
       color: $budget;
@@ -802,33 +700,14 @@
       font-weight: bold;
     }
 
-    .supported {
-      color: $budget;
-      margin-top: 0;
-      width: 100%;
-    }
-
     .remove .icon-check-circle {
       display: block;
       font-size: rem-calc(70);
       line-height: rem-calc(70);
     }
-
-    .share-supported {
-
-      .ssb-twitter,
-      .ssb-facebook,
-      .ssb-google_plus {
-        color: $budget;
-      }
-    }
   }
 }
 
-.investment-project-show .supports {
-  border: 0;
-}
-
 .proposals-summary {
 
   .panel {
@@ -903,7 +782,14 @@
     }
 
     .button-support {
+      background: $text;
+      color: $featured;
       margin-top: 0;
+
+      &:hover {
+        background: white;
+        color: $text;
+      }
     }
 
     .participation-not-allowed {
@@ -924,6 +810,7 @@
 
     .supported {
       margin-top: 0;
+      font-size: $small-font-size;
     }
 
     .share-supported {
@@ -931,7 +818,10 @@
       .ssb-twitter,
       .ssb-facebook,
       .ssb-google_plus {
-        height: rem-calc(33);
+        background: none;
+        color: $text;
+        height: rem-calc(33) !important;
+
 
         &:before {
           font-size: rem-calc(18);

app/views/comments/_votes.html.erb

@@ -6,13 +6,17 @@
     <span class="in_favor">
       <% if can?(:vote, comment) %>
         <%= link_to vote_comment_path(comment, value: 'yes'),
-            method: "post", remote: true do %>
+            method: "post", remote: true, title: t('votes.agree') do %>
-            <span class="icon-angle-up">
+            <span class="icon-like">
               <span class="sr-only"><%= t('votes.agree') %></span>
             </span>
         <% end %>
       <% else %>
-        <span class="icon-angle-up"></span>
+        <%= link_to new_user_session_path do %>
+          <span class="icon-like">
+            <span class="sr-only"><%= t('votes.agree') %></span>
+          </span>
+        <% end %>
       <% end %>
       <%= comment.total_likes %>
     </span>
@@ -20,13 +24,15 @@
     <span class="against">
       <% if can?(:vote, comment) %>
         <%= link_to vote_comment_path(comment, value: 'no'),
-            method: "post", remote: true do %>
+            method: "post", remote: true, title: t('votes.disagree') do %>
-            <span class="icon-angle-down">
+            <span class="icon-unlike">
               <span class="sr-only"><%= t('votes.disagree') %></span>
             </span>
         <% end %>
       <% else %>
-        <span class="icon-angle-down"></span>
+        <span class="icon-unlike">
+          <span class="sr-only"><%= t('votes.disagree') %></span>
+        </span>
       <% end %>
       <%= comment.total_dislikes %>
     </span>
@@ -40,26 +46,40 @@
       <span class="in_favor">
         <% if can?(:vote, comment) %>
           <%= link_to vote_comment_path(comment, value: 'yes'),
-              method: "post", remote: true do %>
+              method: "post", remote: true, title: t('votes.agree') do %>
-              <span class="icon-angle-up"></span>
+              <span class="icon-like">
+                <span class="sr-only"><%= t('votes.agree') %></span>
+              </span>
           <% end %>
         <% else %>
-          <span class="icon-angle-up"></span>
+          <%= link_to new_user_session_path do %>
+            <span class="icon-like">
+              <span class="sr-only"><%= t('votes.agree') %></span>
+            </span>
+          <% end %>
         <% end %>
         <%= comment.total_likes %>
       </span>
+
       <span class="against">
         <% if can?(:vote, comment) %>
           <%= link_to vote_comment_path(comment, value: 'no'),
-              method: "post", remote: true do %>
+              method: "post", remote: true, title: t('votes.disagree') do %>
-              <span class="icon-angle-down"></span>
+              <span class="icon-unlike">
+                <span class="sr-only"><%= t('votes.disagree') %></span>
+              </span>
           <% end %>
         <% else %>
-          <span class="icon-angle-down"></span>
+          <%= link_to new_user_session_path do %>
+            <span class="icon-unlike">
+              <span class="sr-only"><%= t('votes.disagree') %></span>
+            </span>
+          <% end %>
         <% end %>
         <%= comment.total_dislikes %>
       </span>
-     </div>
+    </div>
+
     <div class="participation-not-allowed" style='display:none' aria-hidden="false">
       <%= t("votes.comment_unauthenticated",
         signin: link_to(t("votes.signin"), new_user_session_path),

app/views/debates/_debate.html.erb

@@ -48,7 +48,7 @@
           </div>
         </div>
 
-        <div id="<%= dom_id(debate) %>_votes" class="small-12 medium-3 column text-center">
+        <div id="<%= dom_id(debate) %>_votes" class="small-12 medium-3 column">
             <%= render 'debates/votes', debate: debate %>
         </div>
 

app/views/debates/index.html.erb

@@ -6,6 +6,8 @@
 <% end %>
 
 <main>
+  <h1 class="sr-only"><%= t("shared.outline.debates") %></h1>
+
   <div class="row">
     <div id="debates" class="debates-list small-12 medium-9 column">
 

app/views/debates/show.html.erb

@@ -45,10 +45,8 @@
       <aside class="small-12 medium-3 column">
         <div class="sidebar-divider"></div>
         <h3><%= t("votes.supports") %></h3>
-        <div class="text-center">
+        <div id="<%= dom_id(@debate) %>_votes">
-          <div id="<%= dom_id(@debate) %>_votes">
+          <%= render 'debates/votes', debate: @debate %>
-           <%= render 'debates/votes', debate: @debate %>
-          </div>
         </div>
         <div class="sidebar-divider"></div>
         <h3><%= t("debates.show.share") %></h3>

app/views/kaminari/_paginator.html.erb

@@ -1,6 +1,7 @@
 <%= paginator.render do -%>
   <div class="pagination-centered">
     <nav>
+      <h1 class="sr-only"><%= t("shared.outline.pagination") %></h1>
       <ul class="pagination text-center margin-top" aria-label="Pagination">
         <%= first_page_tag unless current_page.first? %>
         <%= prev_page_tag unless current_page.first? %>

app/views/layouts/application.html.erb

@@ -22,6 +22,8 @@
     <%= setting['per_page_code'].try(:html_safe) %>
   </head>
   <body>
+    <h1 class="sr-only"><%= setting['org_name'] %></h1>
+
     <div class="wrapper">
       <%= render 'layouts/header' %>
 

app/views/proposals/_featured_votes.html.erb

@@ -1,4 +1,4 @@
-<div class="supports">
+<div class="supports text-center">
   <div class="in-favor">
     <% if voted_for?(@featured_proposals_votes, proposal) %>
       <div class="supported">

app/views/proposals/_proposal.html.erb

@@ -52,25 +52,21 @@
         </div>
       </div>
 
-      <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column">
+      <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column supports-container">
-        <% if proposal.successfull? %>
+        <div class="supports text-center">
-          <div class="message">
+          <% if proposal.successfull? %>
             <p>
               <%= t("proposal_ballots.successfull",
                   voting: link_to(t("proposal_ballots.voting"), proposal_ballots_path)).html_safe %>
             </p>
-          </div>
+          <% elsif proposal.archived? %>
-        <% elsif proposal.archived? %>
-          <div class="message">
             <strong><%= t("proposals.proposal.supports", count: proposal.total_votes) %></strong>
             <p><%= t("proposals.proposal.archived") %></p>
-          </div>
+          <% else %>
-        <% else %>
-          <div class="text-center">
             <%= render 'votes',
                       { proposal: proposal, vote_url: vote_proposal_path(proposal, value: 'yes') } %>
-          </div>
+          <% end %>
-        <% end %>
+        </div>
       </div>
     </div>
   </div>

app/views/proposals/_votes.html.erb

@@ -1,59 +1,56 @@
-<div class="supports">
+<div class="progress small-12 round">
-
+  <span class="meter" style="width: <%= progress_bar_percentage(proposal) %>%;"></span>
-  <div class="progress small-12 round">
+  <span class="percentage">
-    <span class="meter" style="width: <%= progress_bar_percentage(proposal) %>%;"></span>
+    <%= supports_percentage(proposal) %>&nbsp;/&nbsp;<%= t("proposals.proposal.total_percent") %>
-    <span class="percentage">
-      <%= supports_percentage(proposal) %>&nbsp;/&nbsp;<%= t("proposals.proposal.total_percent") %>
-    </span>
-  </div>
-
-  <span class="total-supports">
-    <%= t("proposals.proposal.supports", count: proposal.total_votes) %>&nbsp;
-    <span>
-      <abbr title="<%= t("proposals.proposal.reason_for_supports_necessary") %>">
-        <%= t("proposals.proposal.supports_necessary", number: number_with_delimiter(Proposal.votes_needed_for_success)) %>
-      </abbr>
-    </span>
   </span>
+</div>
 
-  <div class="in-favor">
+<span class="total-supports">
-    <% if voted_for?(@proposal_votes, proposal) %>
+  <%= t("proposals.proposal.supports", count: proposal.total_votes) %>&nbsp;
-      <div class="supported">
+  <span>
-        <%= t("proposals.proposal.already_supported") %>
+    <abbr title="<%= t("proposals.proposal.reason_for_supports_necessary") %>">
-      </div>
+      <%= t("proposals.proposal.supports_necessary", number: number_with_delimiter(Proposal.votes_needed_for_success)) %>
-    <% else %>
+    </abbr>
-      <%= link_to vote_url,
+  </span>
-          class: "button button-support small expanded",
+</span>
-          title: t('proposals.proposal.support_title'), method: "post", remote: true do %>
+
-        <%= t("proposals.proposal.support") %>
+<div class="in-favor">
-      <% end %>
+  <% if voted_for?(@proposal_votes, proposal) %>
+    <div class="supported callout success">
+      <%= t("proposals.proposal.already_supported") %>
+    </div>
+  <% else %>
+    <%= link_to vote_url,
+        class: "button button-support small expanded",
+        title: t('proposals.proposal.support_title'), method: "post", remote: true do %>
+      <%= t("proposals.proposal.support") %>
     <% end %>
-  </div>
-
-  <% if user_signed_in? && current_user.organization? %>
-    <div class="participation-not-allowed" style='display:none' aria-hidden="false">
-      <p>
-        <%= t("votes.organizations") %>
-      </p>
-    </div>
-  <% elsif user_signed_in? && !proposal.votable_by?(current_user)%>
-    <div class="participation-not-allowed" style='display:none' aria-hidden="false">
-      <p>
-        <%= t("votes.verified_only",
-            verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %>
-      </p>
-    </div>
-  <% elsif !user_signed_in? %>
-    <div class="participation-not-allowed" style='display:none' aria-hidden="false">
-      <%= t("votes.unauthenticated",
-        signin: link_to(t("votes.signin"), new_user_session_path),
-        signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
-    </div>
-  <% end %>
-
-  <% if voted_for?(@proposal_votes, proposal) && setting['twitter_handle'] %>
-    <div class="share-supported">
-      <%= social_share_button_tag("#{proposal.title} #{setting['twitter_hashtag']}", url: proposal_url(proposal), via: setting['twitter_handle']) %>
-    </div>
   <% end %>
 </div>
+
+<% if user_signed_in? && current_user.organization? %>
+  <div class="participation-not-allowed" style='display:none' aria-hidden="false">
+    <p>
+      <%= t("votes.organizations") %>
+    </p>
+  </div>
+<% elsif user_signed_in? && !proposal.votable_by?(current_user)%>
+  <div class="participation-not-allowed" style='display:none' aria-hidden="false">
+    <p>
+      <%= t("votes.verified_only",
+          verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %>
+    </p>
+  </div>
+<% elsif !user_signed_in? %>
+  <div class="participation-not-allowed" style='display:none' aria-hidden="false">
+    <%= t("votes.unauthenticated",
+      signin: link_to(t("votes.signin"), new_user_session_path),
+      signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
+  </div>
+<% end %>
+
+<% if voted_for?(@proposal_votes, proposal) && setting['twitter_handle'] %>
+  <div class="share-supported">
+    <%= social_share_button_tag("#{proposal.title} #{setting['twitter_hashtag']}", url: proposal_url(proposal), via: setting['twitter_handle']) %>
+  </div>
+<% end %>

app/views/proposals/index.html.erb

@@ -6,6 +6,8 @@
 <% end %>
 
 <main>
+  <h1 class="sr-only"><%= t("shared.outline.proposals") %></h1>
+
   <div class="row">
     <div id="proposals" class="proposals-list small-12 medium-9 column">
 

app/views/proposals/show.html.erb

@@ -102,22 +102,20 @@
       <aside class="small-12 medium-3 column">
         <div class="sidebar-divider"></div>
         <h3><%= t("votes.supports") %></h3>
-        <div id="<%= dom_id(@proposal) %>_votes">
+        <div id="<%= dom_id(@proposal) %>_votes" class="supports text-center">
           <% if @proposal.successfull? %>
             <p>
               <%= t("proposal_ballots.successfull",
                   voting: link_to(t("proposal_ballots.voting"), proposal_ballots_path)).html_safe %>
             </p>
           <% elsif @proposal.archived? %>
-            <p class="text-center">
+            <p>
               <strong><%= t("proposals.proposal.supports", count: @proposal.total_votes) %></strong>
             </p>
             <p><%= t("proposals.proposal.archived") %></p>
           <% else %>
-            <div class="text-center">
+            <%= render 'votes',
-             <%= render 'votes',
+                      { proposal: @proposal, vote_url: vote_proposal_path(@proposal, value: 'yes') } %>
-                        { proposal: @proposal, vote_url: vote_proposal_path(@proposal, value: 'yes') } %>
-            </div>
           <% end %>
         </div>
         <div id="social-share" class="sidebar-divider"></div>

app/views/shared/_order_links.html.erb

@@ -1,7 +1,9 @@
-<section class="submenu">
+<div class="submenu">
   <% valid_orders.each do |order| %>
-    <%= link_to t("#{i18n_namespace}.orders.#{order}"),
+    <%= link_to current_path_with_query_params(order: order, page: 1), class: order == @current_order ? 'active' : '' do %>
-                current_path_with_query_params(order: order, page: 1),
+      <%= content_tag(order == @current_order ? :h2 : :span) do %>
-                class: order == @current_order ? 'active' : '' %>
+        <%= t("#{i18n_namespace}.orders.#{order}") %>
+      <% end %>
+    <% end %>
   <% end %>
-</section>
+</div>

app/views/shared/_search_form.html.erb

@@ -1,4 +1,5 @@
 <div id="search_form" class="search-form-header">
+  <h1 class="sr-only"><%= t("shared.outline.searcher") %></h1>
   <%= form_tag search_path, method: :get do %>
     <div class="input-group">
       <label class="sr-only"><%= t("#{i18n_namespace}.title") %></label>

app/views/shared/_top_links.html.erb

@@ -1,8 +1,7 @@
-<section class="top-links hide-for-small-only">
+<div class="top-links hide-for-small-only">
   <div class="row">
     <%= render "shared/locale_switcher" %>
     <div class="external-links">
-      <%= link_to setting['org_name'], root_path, class: ("selected" unless current_page?("/opendata")) %>&nbsp;|
       <%= link_to t("layouts.header.external_link_transparency"), t("layouts.header.external_link_transparency_url") %>&nbsp;|
       <%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %>
       <% if setting['blog_url'] %>
@@ -13,4 +12,4 @@
       <% end %>
     </div>
   </div>
-</section>
+</div>

app/views/spending_proposals/_spending_proposal.html.erb

@@ -49,7 +49,7 @@
         </div>
       </div>
 
-      <div id="<%= dom_id(spending_proposal) %>_votes" class="small-12 medium-3 column text-center">
+      <div id="<%= dom_id(spending_proposal) %>_votes" class="small-12 medium-3 column supports-container">
           <%= render 'votes',
                     { spending_proposal: spending_proposal, vote_url: vote_spending_proposal_path(spending_proposal, value: 'yes') } %>
       </div>

app/views/spending_proposals/_votes.html.erb

@@ -1,4 +1,4 @@
-<div class="supports">
+<div class="supports text-center">
 
   <% reason = spending_proposal.reason_for_not_being_votable_by(current_user) %>
   <% voting_allowed = true unless reason.presence == :not_voting_allowed %>
@@ -10,7 +10,7 @@
 
   <div class="in-favor">
     <% if user_voted_for %>
-      <div class="supported">
+      <div class="supported callout success">
         <%= t("spending_proposals.spending_proposal.already_supported") %>
       </div>
     <% elsif voting_allowed %>

app/views/spending_proposals/index.html.erb

@@ -6,6 +6,8 @@
 <% end %>
 
 <main>
+  <h1 class="sr-only"><%= t("shared.outline.budget") %></h1>
+
   <div class="row">
     <div id="investment-projects" class="investment-projects-list small-12 medium-9 column">
 

config/locales/en.yml

@@ -343,7 +343,7 @@ en:
         other: "%{count} comments"
         zero: No comments
       proposal: Proposal
-      reason_for_supports_necessary: 2% of Census
+      reason_for_supports_necessary: 1% of Census
       support: Support
       support_title: Support this proposal
       supports:
@@ -449,6 +449,12 @@ en:
       categories: "Categories"
     target_blank_html: " (link opens in new window)"
     unflag: Unflag
+    outline:
+      debates: Debates
+      proposals: Proposals
+      budget: Participatory budget
+      pagination: Pagination
+      searcher: Searcher
   social:
     blog: Blog
     facebook: Facebook

config/locales/es.yml

@@ -343,7 +343,7 @@ es:
         other: "%{count} Comentarios"
         zero: Sin comentarios
       proposal: Propuesta
-      reason_for_supports_necessary: 2% del Censo
+      reason_for_supports_necessary: 1% del Censo
       support: Apoyar
       support_title: Apoyar esta propuesta
       supports:
@@ -449,6 +449,12 @@ es:
       categories: "Categorías"
     target_blank_html: " (se abre en ventana nueva)"
     unflag: Deshacer denuncia
+    outline:
+      debates: Debates
+      proposals: Propuestas
+      budget: Presupuestos ciudadanos
+      pagination: Paginación
+      searcher: Buscador
   social:
     blog: Blog
     facebook: Facebook

config/locales/fr.yml

@@ -1316,7 +1316,7 @@ fr:
         other: "%{count} commentaires"
         zero: Aucun commentaire
       proposal: Proposition
-      reason_for_supports_necessary: 2% du Recensement
+      reason_for_supports_necessary: 1% du Recensement
       support: Soutenir
       supports:
         one: 1 soutien

config/locales/pages.en.yml

@@ -39,7 +39,7 @@ en:
 
           The proposals can be supported by every citizen registered that has verified their account in the participation platform. In this way, the citizenship, and not someone in its name, will decide which are the proposals that are worthwhile to carry out.
 
-          One that the proposal has achive support of 2% census, it will be studied by a city council group and to move beyond the popular referendum phase, in which citizenship will vote if it is carried out or not. The maximum period to obtain support enough is 12 months.
+          One that the proposal has achive support of 1% census, it will be studied by a city council group and to move beyond the popular referendum phase, in which citizenship will vote if it is carried out or not. The maximum period to obtain support enough is 12 months.
       how_to_use:
         text: |-
           Use it in your local government or help us to improve it, it is free software.

config/locales/pages.es.yml

@@ -39,7 +39,7 @@ es:
 
           Las propuestas pueden ser apoyadas por ciudadanos empadronados que hayan verificado su cuenta en la plataforma de participación, de tal manera que será la propia ciudadanía, y nadie en su nombre, la que decida cuáles son las propuestas que merecen la pena ser llevadas a cabo.
 
-          Una vez que una propuesta alcance una cantidad de apoyos equivalente al 2% del censo, automáticamente pasa a ser estudiada por un grupo de trabajo del Ayuntamiento y pasará a la siguiente fase de consulta popular, en la que la ciudadanía votará si se lleva a cabo o no. El plazo máximo para recabar los apoyos necesarios será de 12 meses.
+          Una vez que una propuesta alcance una cantidad de apoyos equivalente al 1% del censo, automáticamente pasa a ser estudiada por un grupo de trabajo del Ayuntamiento y pasará a la siguiente fase de consulta popular, en la que la ciudadanía votará si se lleva a cabo o no. El plazo máximo para recabar los apoyos necesarios será de 12 meses.
       how_to_use:
         text: |-
           Utilízalo en tu municipio libremente o ayúdanos a mejorarlo, es software libre.

config/locales/pt-BR.yml

@@ -1214,8 +1214,8 @@ pt-BR:
           podem ser apoiadas por todos os cidadãos registrados em Madrid que verificaram
           a sua conta na plataforma de participação. Desta forma, a cidadania e não
           alguém em seu nome, irá decidir quais são as propostas que valem a pena
-          levar a cabo.\r\n\r\nAssim que a proposta atingir o apoio de 2% Madrid recenseada
+          levar a cabo.\r\n\r\nAssim que a proposta atingir o apoio de 1% Madrid recenseada
-          (cerca de 53.000 pessoas), será estudado por um grupo conselheiro da cidade,
+          (cerca de 28.000 pessoas), será estudado por um grupo conselheiro da cidade,
           avançar além da fase de consulta popular, em que a cidadania de Madrid vai
           votar se a proposta será realizada ou não. O prazo máximo para obter apoio
           suficiente é de 12 meses."
@@ -1339,7 +1339,7 @@ pt-BR:
         other: "%{count} comentários"
         zero: Nenhum comentário
       proposal: Proposta
-      reason_for_supports_necessary: 2% do Censo
+      reason_for_supports_necessary: 1% do Censo
       support: Apoiar
       supports:
         one: 1 apoio

spec/features/proposal_ballots_spec.rb

@@ -25,7 +25,6 @@ feature 'Proposal ballots' do
 
     successfull_proposals.each do |proposal|
       within("#proposal_#{proposal.id}_votes") do
-        expect(page).to_not have_css(".supports")
         expect(page).to have_content "This proposal has reached the required supports"
       end
     end
@@ -37,7 +36,6 @@ feature 'Proposal ballots' do
     successfull_proposals.each do |proposal|
       visit proposal_path(proposal)
       within("#proposal_#{proposal.id}_votes") do
-        expect(page).to_not have_css(".supports")
         expect(page).to have_content "This proposal has reached the required supports"
       end
     end

spec/features/proposals_spec.rb

@@ -723,7 +723,6 @@ feature 'Proposals' do
       within("#proposals-list") do
         archived_proposals.each do |proposal|
           within("#proposal_#{proposal.id}_votes") do
-            expect(page).to_not have_css(".supports")
             expect(page).to have_content "This proposal has been archived and can't collect supports"
           end
         end
@@ -734,7 +733,6 @@ feature 'Proposals' do
       archived_proposal = create(:proposal, :archived)
 
       visit proposal_path(archived_proposal)
-      expect(page).to_not have_css(".supports")
       expect(page).to have_content "This proposal has been archived and can't collect supports"
     end