Improves styles for featured proposals

app/assets/stylesheets/participation.scss

@@ -789,11 +789,13 @@
 // 05. Featured
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.featured-debates {
+.featured-debates, .featured-proposals {
-  background: $highlight;
-  margin-top: $line-height !important;
   padding: $line-height/2 0;
 
+  @media (min-width: $small-breakpoint) {
+    margin-top: $line-height !important;
+  }
+
   @media (min-width: $medium-breakpoint) {
     margin-left: 0 !important;
     margin-right: 0 !important;
@@ -805,125 +807,35 @@
     text-transform: uppercase;
   }
 
-  h3 a {
+  h3 {
+    margin-bottom: 0;
+
+    a {
       color: $text;
       font-size: $h3-font-size;
     }
+  }
 
-  a {
+  a, .info {
     color: lighten($text, 15%);
     font-size: $small-font-size;
   }
+
 }
 
-.featured-proposals-container {
+.featured-debates {
-  background: #FED900;
+  background: $highlight;
-
-  @media (min-width: $medium-breakpoint) {
-    margin-left: 0 !important;
-    margin-right: rem-calc(-15) !important;
 }
 
-  h2 {
+.featured-proposals {
-    font-size: $small-font-size;
+  background: $featured;
-    line-height: $line-height;
-    text-transform: uppercase;
-
-    @media (min-width: $medium-breakpoint) {
-      margin-bottom: rem-calc(27);
-    }
-  }
-}
-
-.featured-proposals-container {
-  margin: $line-height 0 !important;
-
-  h2 {
-    // font-size: rem-calc(24);
-    // margin: rem-calc(12) 0 0;
-    // position: relative;
-    // text-transform: uppercase;
-
-    .icon-proposals {
-      font-size: rem-calc(20);
-      position: absolute;
-      right: -26px;
-      top: -5px;
-    }
-  }
-
-  .proposals-list {
-
-    @media (min-width: $medium-breakpoint) {
-      border-left: 1px solid #D2B400;
-    }
-
-    &:after {
-      border-color: #C9AF00 transparent transparent transparent;
-
-      @media (min-width: $medium-breakpoint) {
-        content: " ";
-      }
-    }
-  }
-
-  // .debates-list, .proposals-list {
-  //   margin: rem-calc(6) 0;
-
-    // &:after {
-    //   content: none;
-    //   position: absolute;
-    //   display: block;
-    //   border-style: solid;
-    //   bottom: rem-calc(-20);
-    //   border-left-width: 0;
-    //   border-right-color: transparent;
-    //   right: rem-calc(1);
-    //   border-width: rem-calc(14) rem-calc(14) 0 0;
-    // }
-  // }
-}
-
-.proposal-featured {
-  margin-bottom: 0;
-  margin-top: 0;
-  padding-left: 0;
-
-  .panel {
-    background: none;
-    border: 0;
-    margin-bottom: 0;
-    padding: 0 rem-calc(12);
-
-    h3 {
-      font-weight: bold;
-      margin: rem-calc(8) 0 0 0;
-      min-height: auto;
-
-      a {
-        clear: both;
-        display: block;
-        font-size: rem-calc(14);
-        line-height: $line-height;
-      }
-    }
-  }
-
-  .progress {
-    display: none !important;
-  }
-
-  .content {
-    overflow: hidden;
-  }
 
   .supports {
     @include supports;
     background: none;
     border: 0;
-    padding: 0;
+    padding-bottom: 0;
-    padding-left: rem-calc(13);
+    padding-top: 0;
-    margin-right: rem-calc(-26);
 
     &:after {
       content: none;
@@ -933,8 +845,12 @@
       display: none;
     }
 
+    .button-support {
+      margin-top: 0;
+    }
+
     .not-logged, .organizations-votes {
-      background: #FED900;
+      background: $featured;
       color: $warning-color;
       font-size: $small-font-size;
       line-height: rem-calc(24);
@@ -947,14 +863,12 @@
     }
 
     .anonymous-votes {
-      background: #FED900;
+      background: $featured;
-      padding: 0;
-      padding-top: rem-calc(6);
 
       p {
-        font-size: rem-calc(12);
+        color: $text;
-        line-height: rem-calc(20);
+        font-size: $small-font-size;
-        margin: 0;
+        line-height: $line-height;
       }
     }
 
@@ -965,10 +879,6 @@
       text-align: center;
     }
 
-    .button-support {
-      margin-top: rem-calc(4);
-    }
-
     .supported {
       margin-top: 0;
     }
@@ -979,32 +889,12 @@
       .social-share-button-facebook,
       .social-share-button-google_plus {
         height: rem-calc(33);
-      }
 
-      .social-share-button-twitter:before,
+        &:before {
-      .social-share-button-facebook:before,
-      .social-share-button-google_plus:before {
           font-size: rem-calc(18);
           line-height: rem-calc(33);
         }
       }
     }
   }
-
-.proposal-featured {
-  background: #FED900;
-
-  .panel h3 a {
-    color: $text;
-    font-size: $base-font-size;
-  }
-
-  .info {
-    color: #806C00 !important;
-    font-size: $small-font-size;
-  }
-
-  .content {
-    height: rem-calc(60);
-  }
 }

app/assets/stylesheets/variables.scss

@@ -74,6 +74,7 @@ $proposals:         #FFA42D;
 $proposals-border:  #CC8425;
 
 $highlight:         #E7F2FC;
+$featured:          #FED900;
 
 $footer-bg:         #DEE0E2;
 $footer-color:      #171819;

app/views/proposals/_featured_proposal.html.erb

@@ -1,22 +1,18 @@
-<div id="<%= dom_id(proposal) %>" class="proposal-featured small-12 column">
+<div id="<%= dom_id(proposal) %>" class="clear">
-  <div class="panel">
+  <div class="small-12 medium-9 column">
-    <div class="content small-12 medium-9 left">
     <h3><%= link_to proposal.title, proposal %></h3>
     <div class="info">
-        <span class="author">
       <% if proposal.author.hidden? || proposal.author.erased? %>
         <%= t("proposals.show.author_deleted") %>
       <% else %>
         <%= proposal.author.name %>
       <% end %>
-        </span>
+      &nbsp;&bull;&nbsp;
-        <span>&nbsp;&bull;&nbsp;</span>
+      <strong><%= t("proposals.proposal.supports", count: proposal.total_votes) %></strong>
-        <%= t("proposals.proposal.supports", count: proposal.total_votes) %>
     </div>
   </div>
 
-    <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 left">
+  <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column">
     <%= render 'featured_votes', proposal: proposal %>
   </div>
 </div>
-</div>

app/views/proposals/index.html.erb

@@ -25,21 +25,16 @@
         </div>
 
         <% if @featured_proposals.present? %>
-          <div id="featured-proposals" class="row featured-proposals-container">
+          <div id="featured-proposals" class="row featured-proposals">
-            <div class="small-12 medium-3 column">
+            <div class="small-12 column">
               <h2>
-                <%= t("proposals.index.featured_proposals_html") %>
+                <%= t("proposals.index.featured_proposals") %>
               </h2>
-              <span class="show-for-medium-up">
-                <%= image_tag("featured_proposals.jpg", size: "210x135") %>
-              </span>
             </div>
-            <div class="small-12 medium-9 column proposals-list">
             <% @featured_proposals.each do |featured_proposal| %>
               <%= render "featured_proposal", proposal: featured_proposal %>
             <% end %>
           </div>
-          </div>
         <% end %>
 
         <%= render 'shared/order_links', i18n_namespace: "proposals.index" %>