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

adds data equalizer to fix height on items with images

Browse Source
This commit is contained in:
decabeza
2017-09-28 15:20:00 +02:00
parent fff643db8c
commit 8aaa0cb718
3 changed files with 34 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -658,20 +658,17 @@
.proposals-list .proposal {
@include breakpoint(small) {
.no-image {
width: 100%;
max-width: 300px;
max-width: rem-calc(300);
margin: 0 auto;
}
.no-image::before {
content: '';
display: block;
padding-top: 100%;
}
h3 {
font-size: 1.3rem;
&::before {
content: '';
display: block;
padding-top: 100%;
}
}
.column:first-child {
@@ -680,19 +677,17 @@
}
@include breakpoint(medium) {
.panel {
padding: 0 0.75rem 0 0;
padding: 0 $line-height / 2 0 0;
.no-image {
height: 245px;
width: 140px;
height: 100%;
min-height: rem-calc(245);
width: rem-calc(140);
}
}
h3 {
font-size: 1.4rem;
}
.column:first-child {
overflow: hidden;
}
@@ -702,7 +697,7 @@
}
.column:last-child:not(:first-child) {
padding-top: 0.75rem;
padding-top: $line-height / 2;
}
img {

22
app/views/budgets/investments/_investment.html.erb
View File

@@ -1,13 +1,15 @@
<div id="<%= dom_id(investment) %>" class="budget-investment clear">
<div class="panel">
<div class="row">
<div class="row" data-equalizer>
<div class="small-12 medium-3 large-2 column">
<% if investment.image.present? %>
<%= image_tag investment.image_url(:thumb), alt: investment.image.title %>
<% else %>
<div class="no-image"></div>
<% end %>
<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 %>
</div>
</div>
<div class="small-12 medium-6 large-7 column">
@@ -53,7 +55,7 @@
<% if investment.should_show_votes? %>
<div id="<%= dom_id(investment) %>_votes"
class="small-12 medium-3 column text-center">
class="small-12 medium-3 column text-center" data-equalizer-watch>
<%= render partial: '/budgets/investments/votes', locals: {
investment: investment,
investment_votes: investment_votes,
@@ -62,7 +64,7 @@
</div>
<% elsif investment.should_show_vote_count? %>
<div id="<%= dom_id(investment) %>_votes"
class="small-12 medium-3 column text-center">
class="small-12 medium-3 column text-center" data-equalizer-watch>
<div class="supports js-participation">
<span class="total-supports no-button">
<%= t("budgets.investments.investment.supports",
@@ -72,7 +74,7 @@
</div>
<% elsif investment.should_show_ballots? %>
<div id="<%= dom_id(investment) %>_ballot"
class="small-12 medium-3 column text-center">
class="small-12 medium-3 column text-center" data-equalizer-watch>
<%= render partial: '/budgets/investments/ballot', locals: {
investment: investment,
investment_ids: investment_ids,
@@ -81,7 +83,7 @@
</div>
<% elsif investment.should_show_price? %>
<div id="<%= dom_id(investment) %>_price"
class="supports small-12 medium-3 column text-center">
class="supports small-12 medium-3 column text-center" data-equalizer-watch>
<p class="investment-project-amount margin-top">
<%= investment.formatted_price %>
</p>

16
app/views/proposals/_proposal.html.erb
View File

@@ -3,14 +3,16 @@
data-type="proposal">
<div class="panel">
<div class="icon-successful"></div>
<div class="row">
<div class="row" data-equalizer>
<div class="small-12 medium-3 large-2 column">
<% if proposal.image.present? %>
<%= image_tag proposal.image_url(:thumb), alt: proposal.image.title %>
<% else %>
<div class="no-image"></div>
<% end %>
<div data-equalizer-watch>
<% if proposal.image.present? %>
<%= image_tag proposal.image_url(:thumb), alt: proposal.image.title %>
<% else %>
<div class="no-image"></div>
<% end %>
</div>
</div>
<div class="small-12 medium-6 large-7 column">
@@ -58,7 +60,7 @@
</div>
</div>
<div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column supports-container">
<div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column supports-container" data-equalizer-watch>
<% if proposal.successful? %>
<div class="padding text-center">