Adds banner, styles, and updates icons font

app/assets/fonts/icons.svg

@@ -54,4 +54,8 @@
 <glyph glyph-name="arrow-down" unicode="&#82;" d="M402 311c0-5-2-9-5-13l-128-128c-4-4-8-5-13-5-5 0-9 1-13 5l-128 128c-3 4-5 8-5 13 0 5 2 9 5 13 4 3 8 5 13 5l256 0c5 0 9-2 13-5 3-4 5-8 5-13z"/>
 <glyph glyph-name="arrow-left" unicode="&#84;" d="M347 384l0-256c0-5-1-9-5-13-4-3-8-5-13-5-5 0-9 2-13 5l-128 128c-3 4-5 8-5 13 0 5 2 9 5 13l128 128c4 3 8 5 13 5 5 0 9-2 13-5 4-4 5-8 5-13z"/>
 <glyph glyph-name="arrow-right" unicode="&#85;" d="M329 256c0-5-2-9-5-13l-128-128c-4-3-8-5-13-5-5 0-9 2-13 5-4 4-5 8-5 13l0 256c0 5 1 9 5 13 4 3 8 5 13 5 5 0 9-2 13-5l128-128c3-4 5-8 5-13z"/>
+<glyph glyph-name="check-circle" unicode="&#86;" 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 m115-149l-139-179c-1-1-3-3-5-3-3 0-4 1-5 3-2 1-79 76-79 76l-2 1c0 1-1 2-1 3 0 2 1 3 1 4 1 0 1 0 1 1 8 8 24 24 25 25 1 2 2 3 4 3 3 0 5-2 6-3 1-1 45-43 45-43l111 143c1 0 2 1 4 1 1 0 2 0 3-1l31-24c0-1 1-3 1-4 0-1 0-2-1-3z"/>
+<glyph glyph-name="arrow-top" unicode="&#87;" d="M402 165c0-5-2-10-5-13-4-4-8-6-13-6l-256 0c-5 0-9 2-13 6-3 3-5 8-5 13 0 5 2 9 5 12l128 128c4 4 8 6 13 6 5 0 9-2 13-6l128-128c3-3 5-7 5-12z"/>
+<glyph glyph-name="help-1" unicode="&#88;" d="M345 435c-27 21-58 28-98 28-29 0-55-6-75-20-30-20-44-54-44-108l77 0c0 14-2 30 7 43 8 13 20 24 40 24 20 0 31-6 41-18 8-11 11-23 11-36 0-12-5-22-12-32-4-5-9-10-15-15 0 0-42-25-56-48-11-18-15-40-16-66 0-2 0-5 7-5 7 0 56 0 62 0 6 0 7 4 7 6 0 9 2 24 3 29 4 11 10 20 20 28l21 14c18 15 33 26 40 36 11 15 19 34 19 57 0 36-13 64-39 83z m-103-293c-26 1-47-17-48-46-1-28 19-46 45-47 27-1 48 17 49 45 1 28-19 47-46 48z"/>
+<glyph glyph-name="checkmark-circle" unicode="&#89;" d="M171 296l-29-30 93-93 208 208-29 29-179-178z m251-40c0-92-74-166-166-166-92 0-166 74-166 166 0 92 74 166 166 166 16 0 31-2 46-6l32 32c-24 11-50 16-78 16-114 0-208-94-208-208 0-114 94-208 208-208 114 0 208 94 208 208z"/>
 </font></defs></svg>

app/assets/stylesheets/icons.scss

@@ -172,3 +172,6 @@
 .icon-arrow-right:before {
   content: "\55";
 }
+.icon-checkmark-circle:before {
+  content: "\59";
+}

app/assets/stylesheets/participation.scss

@@ -5,6 +5,7 @@
 // 03. Show participation
 // 04. List participation
 // 05. Featured
+// 06. Proposals successfull
 //
 
 // 01. Votes and supports
@@ -548,14 +549,14 @@
 
 .debates-list, .proposals-list, .investment-projects-list {
 
-  @include breakpoint(small) {
+  @include breakpoint(medium) {
     margin-bottom: rem-calc(48);
   }
 }
 
 .investment-projects-list {
 
-  @include breakpoint(small) {
+  @include breakpoint(medium) {
     min-height: $line-height*15;
   }
 }
@@ -574,7 +575,7 @@
     min-height: rem-calc(192);
     padding: rem-calc(12) rem-calc(12) 0 rem-calc(12);
 
-    @include breakpoint(small) {
+    @include breakpoint(medium) {
       margin-bottom: rem-calc(-1);
       padding-bottom: rem-calc(12);
     }
@@ -732,7 +733,7 @@
     border: 1px solid $votes-border;
     margin: 0 rem-calc(-12);
 
-    @include breakpoint(small) {
+    @include breakpoint(medium) {
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
       margin: 0 rem-calc(-25) 0 rem-calc(12);
@@ -750,7 +751,7 @@
       right: -1px;
       border-width: 13px 13px 0 0;
 
-      @include breakpoint(small) {
+      @include breakpoint(medium) {
         content: "";
       }
     }
@@ -762,7 +763,7 @@
       padding-top: rem-calc(12);
       vertical-align: top;
 
-      @include breakpoint(small) {
+      @include breakpoint(medium) {
         display: block;
         float: none;
         line-height: $line-height*2;
@@ -771,7 +772,7 @@
       }
     }
 
-    @include breakpoint(small) {
+    @include breakpoint(medium) {
       .like, .unlike {
 
         span.percentage {
@@ -790,7 +791,7 @@
     border: 1px solid $proposals-border;
     margin: 0 rem-calc(-12);
 
-    @include breakpoint(small) {
+    @include breakpoint(medium) {
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
       margin: 0 rem-calc(-25) 0 rem-calc(12);
@@ -808,7 +809,7 @@
       right: -1px;
       border-width: 13px 13px 0 0;
 
-      @include breakpoint(small) {
+      @include breakpoint(medium) {
         content: "";
       }
     }
@@ -819,7 +820,7 @@
       padding-top: rem-calc(12);
       vertical-align: top;
 
-      @include breakpoint(small) {
+      @include breakpoint(medium) {
         display: block;
         float: none;
         margin-left: 0;
@@ -840,7 +841,7 @@
     min-height: rem-calc(180);
     padding-top: 0;
 
-    @include breakpoint(small) {
+    @include breakpoint(medium) {
       padding-top: $line-height*1.5;
     }
 
@@ -929,7 +930,8 @@
 // 05. Featured
 // ------------
 
-.featured-debates, .featured-proposals {
+.featured-debates, .featured-proposals, .featured-proposals-ballot,
+.proposals-ballot, .proposals-ballot-list {
   padding: $line-height/2 0;
 
   @include breakpoint(medium) {
@@ -1029,3 +1031,124 @@
     }
   }
 }
+
+// 06. Proposals successfull
+// -------------------------
+
+.successfull-heading {
+  background: #2D3E50;
+  color: white;
+  min-height: $line-height*8;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  .info {
+    background: #34495E;
+    padding: $line-height;
+
+    @include breakpoint(medium) {
+      border-radius: rem-calc(6);
+    }
+  }
+}
+
+.featured-proposals-ballot-banner {
+  background: #2D3E50;
+  position: relative;
+  text-align: center;
+
+  h2, p {
+    color: white;
+  }
+
+  .button {
+    background: #E74B3C;
+  }
+
+  @include breakpoint(medium) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+.featured-proposals-ballot {
+  background: #FFFBCC;
+  position: relative;
+
+  .button {
+    color: white;
+    font-size: $base-font-size;
+    margin-bottom: 0;
+  }
+
+  a {
+    display: block;
+    padding: $line-height/2 0;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.featured-proposals-ballot, .featured-proposals-ballot-banner,
+.successfull .panel {
+
+  .icon-successfull {
+    border-right: 60px solid #34495E;
+    border-top: 0;
+    border-bottom: 60px solid transparent;
+    height: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 0;
+
+    &:after {
+      color: white;
+      content: "\59";
+      font-family: "icons" !important;
+      left: 34px;
+      position: absolute;
+      top: 5px;
+    }
+  }
+}
+
+.proposals-ballot-list {
+
+  .proposal-sucessfull {
+    background: white;
+    border-top: 1px solid $border;
+    padding: $line-height 0;
+    position: relative;
+  }
+}
+
+.successfull {
+
+  .panel {
+    position: relative;
+  }
+
+  .truncate {
+    display: none;
+  }
+
+  .message {
+    @include supports;
+    background: none;
+    border-top: 0;
+
+    @include breakpoint(medium) {
+      border-left: 1px solid $border;
+      margin: $line-height rem-calc(-25) 0 rem-calc(12);
+    }
+  }
+}

app/views/proposals/index.html.erb

@@ -32,6 +32,19 @@
       <% end %>
 
       <% if @proposal_ballots.present? %>
+        <div class="row featured-proposals-ballot-banner margin-bottom">
+          <div class="small-12 column padding">
+            <div class="icon-successfull"></div>
+            <h2>
+              <%= t("proposal_ballots.featured_title") %>
+            </h2>
+            <p><%= t("proposal_ballots.info") %></p>
+            <div class="small-12 medium-4 small-centered">
+              <%= link_to t("proposal_ballots.info_button"), proposal_ballots_path, class: "button expanded" %>
+            </div>
+          </div>
+        </div>
+
         <div class="row featured-proposals-ballot">
           <div class="small-12 column">
             <div class="icon-successfull"></div>

config/locales/en.yml

@@ -382,6 +382,8 @@ en:
     voting: "next voting"
     featured_title: "Next voting"
     nothing_to_vote: "There is nothing to vote at the moment."
+    info: "There are proposals that have reached the required supports and will be voted."
+    info_button: "More information about voting"
   proposal_notifications:
     new:
       title: "Send message"

config/locales/es.yml

@@ -382,6 +382,8 @@ es:
     voting: "próxima votación"
     featured_title: "Próxima votación"
     nothing_to_vote: "No hay nada que votar en este momento."
+    info: "Hay propuestas que han alcanzado el número de apoyos necesarios y pasarán a la siguiente votación."
+    info_button: "Más información sobre la votación"
   proposal_notifications:
     new:
       title: "Enviar mensaje"