improves layout for items list with images

This commit is contained in:
decabeza
2017-12-06 21:00:34 +01:00
parent 1d6877b797
commit 39def428b5
6 changed files with 42 additions and 59 deletions

View File

@@ -655,29 +655,6 @@
.budget-investments-list .budget-investment,
.proposals-list .proposal {
.no-image {
background: $brand;
}
}
.budget-investments-list .budget-investment,
.proposals-list .proposal {
@include breakpoint(small) {
.no-image {
width: 100%;
max-width: rem-calc(300);
margin: 0 auto;
&::before {
content: '';
display: block;
padding-top: 100%;
}
}
}
@include breakpoint(medium) {
.panel {
@@ -685,12 +662,6 @@
&.with-image {
padding: 0 $line-height / 2 0 0;
}
.no-image {
height: 100%;
min-height: rem-calc(245);
width: rem-calc(140);
}
}
.column:first-child {

View File

@@ -21,9 +21,11 @@
<%= f.text_field :external_url %>
</div>
<div class="images small-12 column">
<%= render 'images/nested_image', imageable: @investment, f: f %>
</div>
<% if feature?(:allow_images) %>
<div class="images small-12 column">
<%= render 'images/nested_image', imageable: @investment, f: f %>
</div>
<% end %>
<div class="documents small-12 column">
<%= render 'documents/nested_documents', documentable: @investment, f: f %>

View File

@@ -1,18 +1,20 @@
<div id="<%= dom_id(investment) %>" class="budget-investment clear">
<div class="panel with-image">
<div class="panel <%= ('with-image' if feature?(:allow_images) && investment.image.present?) %>">
<% if feature?(:allow_images) && investment.image.present? %>
<div class="row" data-equalizer>
<div class="small-12 medium-3 large-2 column text-center">
<div data-equalizer-watch>
<% if investment.image.present? %>
<%= image_tag investment.image_url(:thumb), alt: investment.image.title %>
<% else %>
<div class="no-image"></div>
<% end %>
<%= image_tag investment.image_url(:thumb), alt: investment.image.title %>
</div>
</div>
<div class="small-12 medium-6 large-7 column">
<% else %>
<div class="row">
<div class="small-12 medium-9 column">
<% end %>
<div class="budget-investment-content">
<% cache [locale_and_user_status(investment), 'index', investment, investment.author] do %>
@@ -55,7 +57,8 @@
<% if investment.should_show_votes? %>
<div id="<%= dom_id(investment) %>_votes"
class="small-12 medium-3 column text-center" data-equalizer-watch>
class="small-12 medium-3 column text-center"
<%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>>
<%= render partial: '/budgets/investments/votes', locals: {
investment: investment,
investment_votes: investment_votes,
@@ -64,7 +67,8 @@
</div>
<% elsif investment.should_show_vote_count? %>
<div id="<%= dom_id(investment) %>_votes"
class="small-12 medium-3 column text-center" data-equalizer-watch>
class="small-12 medium-3 column text-center"
<%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>>
<div class="supports js-participation">
<span class="total-supports no-button">
<%= t("budgets.investments.investment.supports",
@@ -74,7 +78,8 @@
</div>
<% elsif investment.should_show_ballots? %>
<div id="<%= dom_id(investment) %>_ballot"
class="small-12 medium-3 column text-center" data-equalizer-watch>
class="small-12 medium-3 column text-center"
<%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>>
<%= render partial: '/budgets/investments/ballot', locals: {
investment: investment,
investment_ids: investment_ids,
@@ -83,13 +88,14 @@
</div>
<% elsif investment.should_show_price? %>
<div id="<%= dom_id(investment) %>_price"
class="supports small-12 medium-3 column text-center" data-equalizer-watch>
class="supports small-12 medium-3 column text-center"
<%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>>
<p class="investment-project-amount margin-top">
<%= investment.formatted_price %>
</p>
</div>
<% else %>
<div data-equalizer-watch></div>
<div <%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>></div>
<% end %>
<% end %>

View File

@@ -10,8 +10,6 @@
<div class="image-container" data-equalizer-watch>
<% if poll.image.present? %>
<%= image_tag poll.image_url(:large), alt: poll.image.title %>
<% else %>
<div class="no-image"></div>
<% end %>
</div>
</div>

View File

@@ -46,9 +46,11 @@
<%= f.text_field :external_url, placeholder: t("proposals.form.proposal_external_url"), label: false %>
</div>
<div class="images small-12 column">
<%= render 'images/nested_image', imageable: @proposal, f: f %>
</div>
<% if feature?(:allow_images) %>
<div class="images small-12 column">
<%= render 'images/nested_image', imageable: @proposal, f: f %>
</div>
<% end %>
<div class="documents small-12 column">
<%= render 'documents/nested_documents', documentable: @proposal, f: f %>

View File

@@ -1,21 +1,23 @@
<div id="<%= dom_id(proposal) %>"
class="proposal clear <%= ("successful" if proposal.total_votes > Proposal.votes_needed_for_success) %>"
data-type="proposal">
<div class="panel with-image">
<div class="panel <%= ('with-image' if feature?(:allow_images) && proposal.image.present?) %>">
<div class="icon-successful"></div>
<div class="row" data-equalizer>
<div class="small-12 medium-3 large-2 column text-center">
<div data-equalizer-watch>
<% if proposal.image.present? %>
<% if feature?(:allow_images) && proposal.image.present? %>
<div class="row" data-equalizer>
<div class="small-12 medium-3 large-2 column text-center">
<div data-equalizer-watch>
<%= image_tag proposal.image_url(:thumb), alt: proposal.image.title %>
<% else %>
<div class="no-image"></div>
<% end %>
</div>
</div>
</div>
<div class="small-12 medium-6 large-7 column">
<div class="small-12 medium-6 large-7 column">
<% else %>
<div class="row">
<div class="small-12 medium-9 column">
<% end %>
<div class="proposal-content">
<% cache [locale_and_user_status(proposal), 'index', proposal, proposal.author] do %>
<h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>
@@ -60,7 +62,9 @@
</div>
</div>
<div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column supports-container" data-equalizer-watch>
<div id="<%= dom_id(proposal) %>_votes"
class="small-12 medium-3 column supports-container"
<%= 'data-equalizer-watch' if feature?(:allow_images) && proposal.image.present? %>>
<% if proposal.successful? %>
<div class="padding text-center">