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

Use flex in a poll in the polls index

Browse Source 
Note we aren't using flex-with-gap because currently (until we decide to
use the `gap` property) this mixin sets a negative margin that would
move the border of this element to the left.
This commit is contained in:
Javi Martín
2024-10-22 23:57:02 +02:00
parent b00ddfc931
commit 8ca941ab02
3 changed files with 46 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -403,18 +403,10 @@ button,
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
}
.uppercase {
text-transform: uppercase;
}

18
app/assets/stylesheets/polls/poll.scss
View File

@@ -2,7 +2,25 @@
&.with-image {
@include breakpoint(medium) {
display: flex;
padding: 0 calc($line-height / 2) 0 0;
> * {
flex-basis: 25%;
}
.poll-info {
flex-basis: 50%;
}
> a {
align-self: center;
}
> .poll-info,
> a {
margin-#{$global-left}: rem-calc(map-get($grid-column-gutter, medium));
}
}
}

62
app/components/polls/poll_component.html.erb
View File

@@ -1,39 +1,33 @@
<div class="poll with-image">
<%= render Polls::AccessStatusComponent.new(poll) %>
<div class="row" data-equalizer data-equalize-on="medium">
<div class="small-12 medium-3 column">
<div class="image-container" data-equalizer-watch>
<% if poll.image.present? %>
<%= image_tag poll.image.variant(:large), alt: poll.image.title.unicode_normalize %>
<% end %>
</div>
</div>
<div class="small-12 medium-6 column" data-equalizer-watch>
<% if poll.questions.one? %>
<h4><%= link_to_poll poll.questions.first.title, poll %></h4>
<div class="dates"><%= dates %></div>
<% else %>
<h4><%= link_to_poll poll.name, poll %></h4>
<div class="dates"><%= dates %></div>
<ul class="margin-top">
<% poll.questions.sort_for_list.each do |question| %>
<li><%= question.title %></li>
<% end %>
</ul>
<% end %>
<%= render Polls::GeozonesComponent.new(poll) %>
<%= render SDG::TagListComponent.new(poll, limit: 5, linkable: false) %>
</div>
<div class="small-12 medium-3 column table" data-equalizer-watch>
<div class="table-cell align-middle">
<% if poll.expired? %>
<%= link_to_poll t("polls.index.participate_button_expired"), poll, class: "button hollow expanded" %>
<% else %>
<%= link_to_poll t("polls.index.participate_button"), poll, class: "button hollow expanded" %>
<% end %>
</div>
</div>
<div class="image-container">
<% if poll.image.present? %>
<%= image_tag poll.image.variant(:large), alt: poll.image.title.unicode_normalize %>
<% end %>
</div>
<div class="poll-info">
<% if poll.questions.one? %>
<h4><%= link_to_poll poll.questions.first.title, poll %></h4>
<div class="dates"><%= dates %></div>
<% else %>
<h4><%= link_to_poll poll.name, poll %></h4>
<div class="dates"><%= dates %></div>
<ul class="margin-top">
<% poll.questions.sort_for_list.each do |question| %>
<li><%= question.title %></li>
<% end %>
</ul>
<% end %>
<%= render Polls::GeozonesComponent.new(poll) %>
<%= render SDG::TagListComponent.new(poll, limit: 5, linkable: false) %>
</div>
<% if poll.expired? %>
<%= link_to_poll t("polls.index.participate_button_expired"), poll, class: "button hollow expanded" %>
<% else %>
<%= link_to_poll t("polls.index.participate_button"), poll, class: "button hollow expanded" %>
<% end %>
</div>