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

Replace equalizer to display flex on cards

Browse Source
This commit is contained in:
decabeza
2020-04-14 17:14:52 +02:00
parent d99875cde2
commit a8537f7e19
5 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2788,11 +2788,18 @@ table {
margin-top: rem-calc(-48);
}
.cards-container {
display: flex;
flex-wrap: wrap;
}
.card {
border: 0;
flex-grow: 0;
overflow: visible;
a {
height: 100%;
img {
transition-duration: 0.3s;

2
app/views/pages/_card.html.erb
View File

@@ -1,5 +1,5 @@
<div id="<%= dom_id(card) %>"
class="card small-12 medium-<%= card.columns %> column margin-bottom end" data-equalizer-watch>
class="card small-12 medium-<%= card.columns %> column margin-bottom end">
<%= link_to card.link_url do %>
<figure class="figure-card">
<div class="gradient"></div>

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

@@ -1,5 +1,7 @@
<div class="row" data-equalizer data-equalizer-on="medium">
<% @cards.find_each do |card| %>
<%= render "card", card: card %>
<% end %>
<div class="row">
<div class="cards-container">
<% @cards.find_each do |card| %>
<%= render "card", card: card %>
<% end %>
</div>
</div>

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

@@ -1,5 +1,5 @@
<div id="<%= dom_id(card) %>"
class="card small-12 medium-<%= card.columns %> column margin-bottom end" data-equalizer-watch>
class="card small-12 medium-<%= card.columns %> column margin-bottom end">
<%= link_to card.link_url do %>
<figure class="figure-card">
<div class="gradient"></div>

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

@@ -1,7 +1,9 @@
<h3 class="title"><%= t("welcome.cards.title") %></h3>
<div class="row" data-equalizer data-equalizer-on="medium">
<% @cards.each do |card| %>
<%= render "card", card: card %>
<% end %>
<div class="row">
<div class="cards-container">
<% @cards.each do |card| %>
<%= render "card", card: card %>
<% end %>
</div>
</div>