add content and styles for guides/new page

This commit is contained in:
decabeza
2018-01-18 19:39:08 +01:00
committed by Bertocq
parent dcc2240eb6
commit 88657f43ba
2 changed files with 148 additions and 9 deletions

View File

@@ -9,6 +9,7 @@
// 07. Proposals successful
// 08. Polls
// 09. Polls results and stats
// 10. Guides
//
// 01. Votes and supports
@@ -1943,3 +1944,94 @@
line-height: rem-calc(60);
}
}
// 10. Guides
// ----------------------
.guides {
h2 {
margin: $line-height 0 $line-height * 2;
}
.guide-budget,
.guide-proposal {
border-radius: rem-calc(3);
margin: $line-height 0;
padding: $line-height;
position: relative;
.button {
color: $text;
font-weight: bold;
}
&::before {
border-radius: 100%;
color: #fff;
font-family: "icons" !important;
height: rem-calc(80);
left: 50%;
line-height: rem-calc(80);
margin-left: rem-calc(-40);
position: absolute;
text-align: center;
top: -40px;
width: rem-calc(80);
z-index: 99;
}
}
.guide-budget {
border: 1px solid $budget;
&::before {
background: $budget;
content: '\53';
font-size: rem-calc(40);
}
.button {
background: #f8f5f9;
border: 1px solid $budget;
}
}
.guide-proposal {
border: 1px solid $proposals;
&::before {
background: $proposals;
content: '\68';
font-size: rem-calc(40);
}
.button {
background: #fffaf4;
border: 1px solid $proposals;
}
}
ul {
@include breakpoint(medium) {
min-height: $line-height * 14;
}
li {
margin-bottom: $line-height;
padding-left: $line-height;
position: relative;
&::before {
color: #37af65;
content: '\56';
font-family: "icons" !important;
font-size: $small-font-size;
left: 0;
position: absolute;
top: 1px;
}
}
}
}

View File

@@ -1,11 +1,58 @@
<% if current_budget %>
<div>
<%= link_to t("guides.new_budget_investment"),
new_budget_investment_path(current_budget) %>
<div class="guides">
<div class="row margin">
<div class="small-12 column text-center">
<h1><%= t("guides.title", org: setting['org_name']) %></h1>
<p class="lead"><%= t("guides.subtitle") %></p>
</div>
</div>
<% end %>
<div>
<%= link_to t("guides.new_proposal"),
new_proposal_path %>
</div>
<div class="row" data-equalizer data-equalize-on="medium">
<div class="small-12 medium-5 medium-offset-1 column">
<div class="guide-budget" data-equalizer-watch>
<h2 class="text-center">
<%= t("guides.budget_investment.title") %>
</h2>
<ul class="no-bullet">
<li><%= t("guides.budget_investment.feature_1_html") %></li>
<li><%= t("guides.budget_investment.feature_2_html") %></li>
<li><%= t("guides.budget_investment.feature_3_html") %></li>
<li><%= t("guides.budget_investment.feature_4_html") %></li>
</ul>
<% if current_budget %>
<div class="small-12 medium-9 small-centered">
<%= link_to t("guides.budget_investment.new_button"),
new_budget_investment_path(current_budget),
class: "button expanded" %>
</div>
<% end %>
</div>
</div>
<div class="small-12 medium-5 column end">
<div class="guide-proposal" data-equalizer-watch>
<h2 class="text-center">
<%= t("guides.proposal.title") %>
</h2>
<ul class="no-bullet">
<li><%= t("guides.proposal.feature_1_html") %></li>
<li>
<%= t("guides.proposal.feature_2_html",
votes: setting["votes_for_proposal_success"],
org: setting['org_name']) %>
</li>
<li><%= t("guides.proposal.feature_3_html") %></li>
<li><%= t("guides.proposal.feature_4_html") %></li>
</ul>
<div class="small-12 medium-9 small-centered">
<%= link_to t("guides.proposal.new_button"),
new_proposal_path,
class: "button expanded" %>
</div>
</div>
</div>
</div>
</div>