Improves homepage layout

This commit is contained in:
decabeza
2018-06-06 11:23:43 +02:00
parent 24bf72b3f1
commit ee0bbe42fd
4 changed files with 34 additions and 28 deletions

View File

@@ -115,4 +115,4 @@ $tab-content-border: $border;
$orbit-bullet-diameter: 0.8rem; $orbit-bullet-diameter: 0.8rem;
$pagination-radius: $global-radius; $pagination-radius: $global-radius;

View File

@@ -253,7 +253,7 @@ a {
} }
} }
& + li { + li {
margin-left: 0; margin-left: 0;
} }
@@ -2662,8 +2662,9 @@ table {
&.title { &.title {
display: inline-block; display: inline-block;
border-top: 4px solid $brand; border-top: 4px solid $brand;
margin-bottom: 0;
min-width: rem-calc(240); min-width: rem-calc(240);
padding-top: $line-height / 2; padding: $line-height / 2 0;
} }
} }
} }
@@ -2674,17 +2675,28 @@ table {
clear: both; clear: both;
} }
.debate { a {
margin: $line-height 0;
&.see-all {
border-bottom: 1px solid $border;
display: block;
font-size: $small-font-size;
margin: $line-height 0 $line-height / 2;
text-align: right;
width: 100%;
}
} }
} }
.feed-image { .feed-image {
display: inline-block; display: inline-block;
height: rem-calc(120); height: rem-calc(120);
margin: $line-height / 2 0;
overflow: hidden; overflow: hidden;
@include breakpoint(medium) {
height: rem-calc(96);
}
img { img {
margin-left: rem-calc(-15); margin-left: rem-calc(-15);
max-width: none; max-width: none;
@@ -2694,25 +2706,19 @@ table {
.feed-description { .feed-description {
@include breakpoint(medium) {
padding-top: $line-height;
}
p { p {
font-size: $small-font-size; font-size: $small-font-size;
margin-bottom: 0;
} }
} }
.feed-content { .feed-content {
border-bottom: 1px solid $border;
display: inline-block;
a { .debate,
.proposal {
&.see-all { margin-bottom: 0;
font-size: $small-font-size; margin-top: 0;
margin: $line-height 0 $line-height / 2; padding: $line-height / 2 0;
}
} }
} }

View File

@@ -1,15 +1,15 @@
<div class="row margin-bottom feeds-list"> <div class="row margin-bottom feeds-list" data-equalizer data-equalize-on="medium">
<% @feeds.each do |feed| %> <% @feeds.each do |feed| %>
<% if feed_proposals?(feed) %> <% if feed_proposals?(feed) %>
<div class="small-12 medium-8 column margin-top"> <div class="small-12 medium-8 column margin-top">
<div class="feed-content"> <div class="feed-content" data-equalizer-watch>
<h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3> <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
<% feed.items.each do |item| %> <% feed.items.each do |item| %>
<div class="<%= item.class.to_s.parameterize('_') %> row"> <div class="<%= item.class.to_s.parameterize('_') %> row">
<% if feature?(:allow_images) && item.image.present? %> <% if feature?(:allow_images) && item.image.present? %>
<div class="small-12 large-3 column"> <div class="small-12 medium-6 large-3 column">
<div class="feed-image"> <div class="feed-image">
<%= image_tag item.image_url(:thumb), <%= image_tag item.image_url(:thumb),
alt: item.image.title.unicode_normalize %> alt: item.image.title.unicode_normalize %>
@@ -22,15 +22,15 @@
</div> </div>
</div> </div>
<% end %> <% end %>
<%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "float-right see-all" %>
</div> </div>
<%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "see-all" %>
</div> </div>
<% end %> <% end %>
<% if feed_debates?(feed) %> <% if feed_debates?(feed) %>
<div class="small-12 medium-4 column margin-top"> <div class="small-12 medium-4 column margin-top">
<div class="feed-content"> <div class="feed-content" data-equalizer-watch>
<h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3> <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
<% feed.items.each do |item| %> <% feed.items.each do |item| %>
@@ -38,9 +38,9 @@
<strong><%= link_to item.title, url_for(item) %></strong> <strong><%= link_to item.title, url_for(item) %></strong>
</div> </div>
<% end %> <% end %>
<%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "float-right see-all" %>
</div> </div>
<%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "see-all" %>
</div> </div>
<% end %> <% end %>

View File

@@ -16,11 +16,11 @@
<div class="row"> <div class="row">
<div class="small-12 column <%= 'medium-8' if feed_processes_enabled? %>"> <div class="small-12 column <%= 'large-8' if feed_processes_enabled? %>">
<%= render "cards" %> <%= render "cards" %>
</div> </div>
<div class="small-12 medium-4 column"> <div class="small-12 large-4 column">
<%= render "processes" %> <%= render "processes" %>
</div> </div>
</div> </div>