Improves styles for featured proposals

This commit is contained in:
Alberto Garcia Cabeza
2016-01-12 17:50:18 +01:00
parent a219b909b3
commit 6dff64a920
5 changed files with 55 additions and 173 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

View File

@@ -789,11 +789,13 @@
// 05. Featured
// - - - - - - - - - - - - - - - - - - - - - - - - -
.featured-debates {
background: $highlight;
margin-top: $line-height !important;
.featured-debates, .featured-proposals {
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 {
color: $text;
font-size: $h3-font-size;
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 {
background: #FED900;
@media (min-width: $medium-breakpoint) {
margin-left: 0 !important;
margin-right: rem-calc(-15) !important;
}
h2 {
font-size: $small-font-size;
line-height: $line-height;
text-transform: uppercase;
@media (min-width: $medium-breakpoint) {
margin-bottom: rem-calc(27);
}
}
.featured-debates {
background: $highlight;
}
.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;
}
.featured-proposals {
background: $featured;
.supports {
@include supports;
background: none;
border: 0;
padding: 0;
padding-left: rem-calc(13);
margin-right: rem-calc(-26);
padding-bottom: 0;
padding-top: 0;
&: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;
padding: 0;
padding-top: rem-calc(6);
background: $featured;
p {
font-size: rem-calc(12);
line-height: rem-calc(20);
margin: 0;
color: $text;
font-size: $small-font-size;
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,
.social-share-button-facebook:before,
.social-share-button-google_plus:before {
font-size: rem-calc(18);
line-height: rem-calc(33);
&: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);
}
}

View File

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

View File

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

View File

@@ -25,20 +25,15 @@
</div>
<% if @featured_proposals.present? %>
<div id="featured-proposals" class="row featured-proposals-container">
<div class="small-12 medium-3 column">
<div id="featured-proposals" class="row featured-proposals">
<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>
<% @featured_proposals.each do |featured_proposal| %>
<%= render "featured_proposal", proposal: featured_proposal %>
<% end %>
</div>
<% end %>