Updates styles for debates show
This commit is contained in:
Alberto Garcia Cabeza
@@ -162,6 +162,88 @@ header {
|
||||
// 05. Debates
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
@mixin votes {
|
||||
border-top: 1px solid $votes-border;
|
||||
padding: rem-calc(14) rem-calc(12);
|
||||
background: $votes-background;
|
||||
margin: 0 -12px;
|
||||
|
||||
.icon-like {
|
||||
background: white;
|
||||
border: 2px solid white;
|
||||
border-radius: rem-calc(3);
|
||||
color: $votes-neutral;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(30);
|
||||
line-height: rem-calc(30);
|
||||
padding: rem-calc(3) rem-calc(6);
|
||||
position: relative;
|
||||
//when active => color: $votes-like;
|
||||
|
||||
&:hover {
|
||||
background: $votes-like;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $votes-like-act;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-unlike {
|
||||
background: white;
|
||||
border: 2px solid white;
|
||||
border-radius: rem-calc(3);
|
||||
color: $votes-neutral;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(30);
|
||||
line-height: rem-calc(30);
|
||||
padding: rem-calc(3) rem-calc(6);
|
||||
position: relative;
|
||||
//when active => color: $votes-unlike;
|
||||
|
||||
&:hover {
|
||||
background: $votes-unlike;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $votes-unlike-act;
|
||||
}
|
||||
}
|
||||
|
||||
.like {
|
||||
line-height: rem-calc(48);
|
||||
vertical-align: super;
|
||||
|
||||
span {
|
||||
color: $votes-text;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(16);
|
||||
font-weight: lighter;
|
||||
line-height: $line-height*2;
|
||||
padding-left: rem-calc(8);
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.unlike {
|
||||
@extend .like;
|
||||
}
|
||||
|
||||
.total-votes {
|
||||
color: $votes-text;
|
||||
float: right;
|
||||
line-height: $line-height*2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 rem-calc(6);
|
||||
}
|
||||
}
|
||||
|
||||
// 05.1. Debates Index
|
||||
// - - - - - - - - - - - -
|
||||
|
||||
@@ -255,85 +337,7 @@ header {
|
||||
}
|
||||
|
||||
.votes {
|
||||
border-top: 1px solid $votes-border;
|
||||
padding: rem-calc(14) rem-calc(12);
|
||||
background: $votes-background;
|
||||
margin: 0 -12px;
|
||||
|
||||
.icon-like {
|
||||
background: white;
|
||||
border: 2px solid white;
|
||||
border-radius: rem-calc(3);
|
||||
color: $votes-neutral;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(30);
|
||||
line-height: rem-calc(30);
|
||||
padding: rem-calc(3) rem-calc(6);
|
||||
position: relative;
|
||||
//when active => color: $votes-like;
|
||||
|
||||
&:hover {
|
||||
background: $votes-like;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $votes-like-act;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-unlike {
|
||||
background: white;
|
||||
border: 2px solid white;
|
||||
border-radius: rem-calc(3);
|
||||
color: $votes-neutral;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(30);
|
||||
line-height: rem-calc(30);
|
||||
padding: rem-calc(3) rem-calc(6);
|
||||
position: relative;
|
||||
//when active => color: $votes-unlike;
|
||||
|
||||
&:hover {
|
||||
background: $votes-unlike;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $votes-unlike-act;
|
||||
}
|
||||
}
|
||||
|
||||
.like {
|
||||
line-height: rem-calc(48);
|
||||
vertical-align: super;
|
||||
|
||||
span {
|
||||
color: $votes-text;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(16);
|
||||
font-weight: lighter;
|
||||
line-height: $line-height*2;
|
||||
padding-left: rem-calc(8);
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.unlike {
|
||||
@extend .like;
|
||||
}
|
||||
|
||||
.total-votes {
|
||||
color: $votes-text;
|
||||
float: right;
|
||||
line-height: $line-height*2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 rem-calc(6);
|
||||
}
|
||||
@include votes;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -394,9 +398,9 @@ header {
|
||||
border: 0;
|
||||
|
||||
.total-votes {
|
||||
display: block;
|
||||
float: none;
|
||||
line-height: $line-height;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.like {
|
||||
@@ -468,13 +472,6 @@ header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.votes {
|
||||
padding-top: 0;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
padding-top: $line-height*1.5;
|
||||
}
|
||||
|
||||
h3 {
|
||||
border-bottom: 1px solid $border;
|
||||
font-size: rem-calc(18);
|
||||
@@ -482,64 +479,16 @@ header {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.icon-like {
|
||||
background: $votes-background;
|
||||
border: 1px solid $votes-border;
|
||||
border-radius: rem-calc(3);
|
||||
color: $votes;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(30);
|
||||
line-height: rem-calc(30);
|
||||
padding: rem-calc(6) rem-calc(12);
|
||||
//when active => color: $votes-like;
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: $brand;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-unlike {
|
||||
background: $votes-background;
|
||||
border: 1px solid $votes-border;
|
||||
border-radius: rem-calc(3);
|
||||
color: $votes;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(30);
|
||||
line-height: rem-calc(30);
|
||||
padding: rem-calc(6) rem-calc(12);
|
||||
//when active => color: $votes-unlike;
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: $brand;
|
||||
}
|
||||
}
|
||||
|
||||
.like {
|
||||
|
||||
span {
|
||||
color: $votes-text;
|
||||
display: block;
|
||||
font-size: rem-calc(18);
|
||||
font-weight: bold;
|
||||
line-height: $line-height*1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.unlike {
|
||||
@extend .like;
|
||||
}
|
||||
.votes {
|
||||
@include votes;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
|
||||
.total-votes {
|
||||
color: $votes-text;
|
||||
font-size: rem-calc(14);
|
||||
display: block;
|
||||
float: none;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 rem-calc(12);
|
||||
}
|
||||
}
|
||||
|
||||
.leave-comment {
|
||||
|
||||
@@ -18,17 +18,21 @@
|
||||
</div>
|
||||
<div class="small-12 medium-3 column text-center">
|
||||
<div class="votes">
|
||||
<div class="in-favor">
|
||||
<%= link_to debate_votes_path(debate, value: 'yes'), class: "like inline-block", title: t('votes.agree'), method: "post" do %>
|
||||
<i class="icon-like"></i>
|
||||
<span><%= percentage('likes', debate) %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<span class="divider"></span>
|
||||
|
||||
<%= link_to debate_votes_path(debate, value: 'no'), class: "unlike inline-block", title: t('votes.disagree'), method: "post" do %>
|
||||
<div class="against">
|
||||
<%= likenk_to debate_votes_path(debate, value: 'no'), class: "unlike inline-block", title: t('votes.disagree'), method: "post" do %>
|
||||
<i class="icon-unlike"></i>
|
||||
<span><%= percentage('dislikes', debate) %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<span class="total-votes">
|
||||
<%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
|
||||
|
||||
@@ -16,17 +16,21 @@
|
||||
</div>
|
||||
|
||||
<div class="votes">
|
||||
<div class="in-favor">
|
||||
<%= link_to debate_votes_path(featured_debate, value: "yes"), class: "like", title: t('votes.agree'), method: "post" do %>
|
||||
<i class="icon-like"></i>
|
||||
<span><%= percentage('likes', featured_debate) %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<span class="divider"></span>
|
||||
|
||||
<div class="against">
|
||||
<%= link_to debate_votes_path(featured_debate, value: "no"), class: "unlike", title: t('votes.disagree'), method: "post" do %>
|
||||
<i class="icon-unlike"></i>
|
||||
<span><%= percentage('dislikes', featured_debate) %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<span class="total-votes">
|
||||
<%= pluralize(featured_debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
|
||||
|
||||
@@ -10,9 +10,10 @@
|
||||
<%= @debate.description %>
|
||||
<p><%= render 'shared/tags', debate: @debate %></p>
|
||||
</div>
|
||||
<div id="votes" class="small-12 medium-3 column votes">
|
||||
<%= render 'votes/votes' %>
|
||||
<div id="votes" class="small-12 medium-3 column">
|
||||
<h3><%= t("votes.supports") %></h3>
|
||||
<div class="text-center">
|
||||
<%= render 'votes/votes' %>
|
||||
<%= link_to t("debates.show.leave_comment"), "#comments", class: "leave-comment" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
<div class="small-12 column">
|
||||
<p class="total-votes right">
|
||||
<%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
|
||||
</p>
|
||||
|
||||
<h3><%= t("votes.supports") %></h3>
|
||||
|
||||
<div class="text-center">
|
||||
<div id="in_favor" class="inline-block">
|
||||
<div class="votes">
|
||||
<div class="inline-block in-favor">
|
||||
<%= link_to debate_votes_path(@debate, value: 'yes'), class: "like", title: t('votes.agree'), method: "post", remote: true do %>
|
||||
<i class="icon-like"></i>
|
||||
<span><%= percentage('likes', @debate) %></span>
|
||||
@@ -15,11 +8,14 @@
|
||||
|
||||
<span class="divider"></span>
|
||||
|
||||
<div id="against" class="inline-block">
|
||||
<div class="inline-block against">
|
||||
<%= link_to debate_votes_path(@debate, value: 'no'), class: "unlike", title: t('votes.disagree'), method: "post", remote: true do %>
|
||||
<i class="icon-unlike"></i>
|
||||
<span><%= percentage('dislikes', @debate) %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="total-votes">
|
||||
<%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
|
||||
</span>
|
||||
</div>
|
||||
Reference in New Issue
Block a user