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

Adds styles for homepage users view

Browse Source
This commit is contained in:
decabeza
2018-05-23 17:41:23 +02:00
parent 50fd540797
commit 0ac6531612
10 changed files with 167 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
app/assets/stylesheets/layout.scss
View File

@@ -23,6 +23,7 @@
// 21. Related content
// 22. Images
// 23. Maps
// 24. Homepage
//
// 01. Global styles
@@ -2224,17 +2225,17 @@ table {
// 19. Recommended Section Home
// ----------------------------
.home-page {
.push {
display: none;
}
}
.section-recommended {
padding: $line-height * 2 0;
background: #fafafa;
border-bottom: 1px solid $border;
border-top: 1px solid $border;
padding: $line-height 0;
h2 {
margin-bottom: 0;
}
p {
margin-bottom: $line-height * 2;
}
@@ -2258,12 +2259,12 @@ table {
.card {
.card-section {
padding: $line-height 0;
max-width: rem-calc(300);
margin: 0 auto;
max-width: none;
padding: 0;
p {
font-size: rem-calc(15);
font-size: $base-font-size;
text-align: left;
}
}
@@ -2293,18 +2294,6 @@ table {
width: 100%;
}
.debates-inner {
border-top: 4px solid $debates;
}
.proposals-inner {
border-top: 4px solid $proposals;
}
.budget-investments-inner {
border-top: 4px solid $budget;
}
.debates-inner,
.proposals-inner,
.budget-investments-inner {
@@ -2316,10 +2305,10 @@ table {
}
h4 {
margin-top: $line-height;
margin-bottom: 0;
margin-top: 0;
margin-bottom: $line-height;
font-size: rem-calc(18);
min-height: rem-calc(50);
min-height: 0;
}
h5 {
@@ -2338,9 +2327,21 @@ table {
}
}
.debates,
.proposals {
a {
display: block;
margin-top: $line-height;
}
}
.debates-inner,
.proposals-inner,
.budget-investments-inner {
border: 1px solid $border;
padding: $line-height;
margin-right: $line-height;
max-height: rem-calc(500);
@include breakpoint(small) {
@@ -2575,3 +2576,70 @@ table {
color: #525252 !important;
}
}
// 24. Homepage
// ------------
.home-page {
a {
p {
&.description {
color: $text;
}
}
}
a:hover {
h3 {
color: #fff;
}
}
}
.figure-card {
display: flex;
margin: 0 0 $line-height;
position: relative;
a {
h3,
.title {
color: #fff;
}
&:hover {
text-decoration: none;
}
}
figcaption {
bottom: 0;
color: #fff;
font-size: rem-calc(36);
line-height: rem-calc(36);
text-transform: uppercase;
padding: $line-height / 4 $line-height / 2;
position: absolute;
width: 100%;
h3,
.title {
font-size: rem-calc(36);
line-height: rem-calc(36);
}
span {
background: #fff;
border-radius: rem-calc(4);
color: #000;
display: inline;
font-size: $base-font-size;
padding: rem-calc(4) rem-calc(8);
}
}
}

24
app/views/welcome/_card.html.erb
View File

@@ -1,11 +1,15 @@
<div id="<%= dom_id(card) %>" class="card">
<%= card.title %>
<%= card.description %>
<%= link_to card.link_text, card.link_url %>
<% if card.image.present? %>
<%= image_tag(card.image_url(:large),
class: "margin",
alt: card.image.title) %>
<div id="<%= dom_id(card) %>" class="small-12 large-4 column margin-bottom end">
<%= link_to card.link_url do %>
<figure class="figure-card">
<% if card.image.present? %>
<%= image_tag(card.image_url(:large), alt: card.image.title) %>
<% end %>
<figcaption>
<span>LABEL</span><br>
<h3><%= card.title %></h3>
</figcaption>
</figure>
<p class="description"><%= card.description %></p>
<p><%= card.link_text %></p>
<% end %>
</div>
</div>

10
app/views/welcome/_cards.html.erb
View File

@@ -1,5 +1,5 @@
<h1>Cards</h1>
<% @cards.all.each do |card| %>
<%= render "card", card: card %>
<% end %>
<div class="row">
<% @cards.all.each do |card| %>
<%= render "card", card: card %>
<% end %>
</div>

26
app/views/welcome/_feeds.html.erb
View File

@@ -1,16 +1,14 @@
<h1>Feeds</h1>
<div class="row">
<div class="small-12 column">
<% @feeds.each do |feed| %>
<% @feeds.each do |feed| %>
<div>
<strong>Most active <%= feed.kind %></strong>
<strong>Most active <%= feed.kind %></strong>
<% feed.items.each do |item| %>
<div class="<%= item.class.to_s.parameterize('_') %>">
<%= item.title %>
</div>
<% end %>
<% end %>
</div>
<% feed.items.each do |item| %>
<div class="<%= item.class.to_s.parameterize('_') %>">
<%= item.title %>
</div>
<br/>
<% end %>
<% end %>
</div>

32
app/views/welcome/_header.html.erb
View File

@@ -1,13 +1,21 @@
<% if header.present? %>
<%= header.title %>
<%= header.description %>
<% if header.image.present? %>
<%= image_tag(header.image_url(:large),
class: "margin",
alt: header.image.title) %>
<% end %>
<%= link_to header.button_text, header.button_url %>
<%= header.alignment %>
<% end %>
<div class="jumbo highlight">
<div class="row">
<div class="small-12 medium-6 column <%= 'medium-9 small-centered text-center' unless header.image.present? %>">
<h1><%= header.title %></h1>
<p class="lead"><%= header.description %></p>
<div class="small-12 medium-6 large-4 <%= 'small-centered' unless header.image.present? %>">
<%= link_to header.link_text, header.link_url, class: "button expanded large" %>
</div>
</div>
<% if header.image.present? %>
<div class="small-12 medium-6 column">
<%= image_tag(header.image_url(:large),
class: "margin",
alt: header.image.title) %>
</div>
<% end %>
</div>
</div>
<% end %>

10
app/views/welcome/_recommended.html.erb
View File

@@ -1,8 +1,12 @@
<div class="small-12 column section-recommended padding">
<div class="section-recommended">
<div class="row">
<h2 class="text-center"><%= t("welcome.recommended.title") %></h2>
<div class="small-12 column carousel-image">
<div class="small-12 column">
<h2><%= t("welcome.recommended.title") %></h2>
<p><%= t("welcome.recommended.help") %></p>
</div>
<div class="carousel-image">
<% if recommended_debates.any? %>
<% carousel_size = calculate_carousel_size(recommended_debates, recommended_proposals, true) %>
<%= render "recommended_carousel", recommendeds: recommended_debates,

6
app/views/welcome/_recommended_carousel.html.erb
View File

@@ -1,9 +1,9 @@
<div class="small-12 medium-4 large-4 <%= carousel_size %> column text-center <%= key %> ">
<div class="small-12 medium-6 column <%= key %> ">
<div class="card small-centered <%= key %>-inner">
<h3><%= t("welcome.recommended.#{key.underscore}.title") %></h3>
<div class="orbit" role="region" data-orbit data-use-m-u-i="false">
<div class="orbit" role="region" data-orbit data-use-m-u-i="false" data-timer-delay="4000">
<div class="orbit-wrapper">
<ul class="orbit-container no-bullet" tabindex="0" >
@@ -38,5 +38,5 @@
</div>
</div>
<%= link_to btn_text_link, btn_path_link, class: 'button hollow expanded' %>
<%= link_to btn_text_link, btn_path_link %>
</div>

56
app/views/welcome/index.html.erb
View File

@@ -9,52 +9,16 @@
social_url: root_url %>
<% end %>
<div class="jumbo highlight">
<div class="row">
<div class="small-12 medium-9 small-centered column text-center">
<h1><%= t("layouts.header.open_city_title") %></h1>
<p class="lead">
<%= t("layouts.header.open_city_slogan_html") %>
</p>
<div class="small-12 medium-6 large-4 small-centered">
<%= link_to t("shared.more_info"), help_path, class: "button expanded large" %>
</div>
</div>
</div>
</div>
<%= render "header", header: @header %>
<%= render "feeds" %>
<%= render "cards" %>
<% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %>
<%= render "recommended",
recommended_debates: @recommended_debates,
recommended_proposals: @recommended_proposals %>
<hr>
<% end %>
<main>
<%= render "feeds" %>
<% cache [locale_and_user_status, @featured_debates, @featured_proposals, 'featured'] do %>
<main>
<div class="small-12 column text-center">
<div class="row margin padding">
<div class="small-12 medium-3 column">
<h2><%= t("welcome.debates.title") %></h2>
<p><%= t("welcome.debates.description") %></p>
</div>
<div class="small-12 medium-3 column">
<h2><%= t("welcome.proposal.title") %></h2>
<p><%= t("welcome.proposal.description") %></p>
</div>
<div class="small-12 medium-3 column">
<h2><%= t("welcome.decide.title") %></h2>
<p><%= t("welcome.decide.description") %></p>
</div>
<div class="small-12 medium-3 column">
<h2><%= t("welcome.do.title") %></h2>
<p><%= t("welcome.do.description") %></p>
</div>
</div>
</div>
</main>
<% end %>
<%= render "cards" %>
<% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %>
<%= render "recommended",
recommended_debates: @recommended_debates,
recommended_proposals: @recommended_proposals %>
<% end %>
</main>

1
config/locales/en/general.yml
View File

@@ -801,6 +801,7 @@ en:
title: You propose
recommended:
title: Recommendations that may interest you
help: "These recommendations are generated by the tags of the debates and proposals you are following."
debates:
title: Recommended debates
btn_text_link: All recommended debates

1
config/locales/es/general.yml
View File

@@ -800,6 +800,7 @@ es:
title: Propones
recommended:
title: Recomendaciones que te pueden interesar
help: "Estas recomendaciones se generan por las etiquetas de los debates y propuestas que estás siguiendo."
debates:
title: Debates recomendados
btn_text_link: Todos los debates recomendados