consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds banner, styles, and updates icons font

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2016-09-07 16:42:57 +02:00
parent 22487592cf
commit cff1f43a90
9 changed files with 159 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/fonts/icons.eot
View File

Binary file not shown.

4
app/assets/fonts/icons.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
app/assets/fonts/icons.ttf
View File

Binary file not shown.

BIN
app/assets/fonts/icons.woff
View File

Binary file not shown.

3
app/assets/stylesheets/icons.scss
View File

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

147
app/assets/stylesheets/participation.scss
View File

@@ -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);
}
}
}

13
app/views/proposals/index.html.erb
View File

@@ -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>

2
config/locales/en.yml
View File

@@ -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"

2
config/locales/es.yml
View File

@@ -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"