Use flex layout instead of data-equalizer in feeds

Using data-equalizer is always hard due to the JavaScript it uses, while
the flex layout works all the time.
This commit is contained in:
Javi Martín
2020-12-19 21:26:57 +01:00
parent 98aea588e5
commit be9fc22650
4 changed files with 25 additions and 15 deletions

View File

@@ -1,20 +1,30 @@
.feeds-participation { .feeds-participation {
@include breakpoint(medium) {
display: flex;
.feed-proposals:not(:only-child) {
width: 2 * 100% / 3;
}
.feed-debates:not(:only-child) {
width: 1 * 100% / 3;
}
.feed-proposals,
.feed-debates {
display: flex;
flex-direction: column;
.feed-content {
flex: 1;
}
}
}
.feed-debates, .feed-debates,
.feed-proposals { .feed-proposals {
@include grid-col; @include grid-col;
margin-top: $line-height; margin-top: $line-height;
} }
.feed-proposals:not(:only-child) {
@include breakpoint(medium) {
width: 2 * 100% / 3;
}
}
.feed-debates:not(:only-child) {
@include breakpoint(medium) {
width: 1 * 100% / 3;
}
}
} }

View File

@@ -1,5 +1,5 @@
<div id="feed_debates" class="feed-debates"> <div id="feed_debates" class="feed-debates">
<div class="feed-content" data-equalizer-watch> <div class="feed-content">
<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| %>

View File

@@ -1,4 +1,4 @@
<div class="row margin-bottom feeds-list feeds-participation" data-equalizer data-equalize-on="medium"> <div class="row margin-bottom feeds-list feeds-participation">
<% feeds.each do |feed| %> <% feeds.each do |feed| %>
<% if feed_proposals?(feed) %> <% if feed_proposals?(feed) %>
<%= render Widgets::Feeds::ProposalsComponent.new(feed) %> <%= render Widgets::Feeds::ProposalsComponent.new(feed) %>

View File

@@ -1,5 +1,5 @@
<div id="feed_proposals" class="feed-proposals"> <div id="feed_proposals" class="feed-proposals">
<div class="feed-content" data-equalizer-watch> <div class="feed-content">
<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| %>