11816f833d
This way we simplify the HTML, which had some `if...else` blocks that were hard to follow because there were opening tags inside these blocks while the closing tags were outside these blocks. We're also making the CSS container-dependent instead of window-dependent. Since there are between one and three elements inside the panel, we accomplish this by making the element with the content take its own line if the width of the panel is smaller than 35rem. Note we're trying to keep the layout similar to what it was; since we're no longer using negative margins (like the ones in the `.row` selector), the votes element now gets a width of 22.5% instead of 25%. Also note we're using the column-gap property for flexbox because the `flex-with-gap` mixin doesn't work so well with elements that have borders. Since the column-gap property for flexbox is now supperted by more than 98% of the browsers (which wasn't the case when we started using the `flex-with-gap` mixin), the `flex-with-gap` mixin has become obsolete. Finally, note we're removing the `max-width: 12rem` rule in the images. I'm not sure why we introduced this rule in the first place, and it didn't play so well to the new layout. I considered using code like `max-width: min(100%, 12rem)`, but, since I'm not sure why `12rem` was there in the first place, I'm not sure whether this approach was better, and it sure made things more complex.
87 lines
3.2 KiB
Plaintext
87 lines
3.2 KiB
Plaintext
<div id="<%= dom_id(proposal) %>"
|
|
class="proposal clear <%= ("successful" if proposal.successful?) %>"
|
|
data-type="proposal">
|
|
<div class="panel <%= "with-image" if proposal.image.present? %>">
|
|
<% if proposal.successful? %>
|
|
<div class="icon-successful"></div>
|
|
<% end %>
|
|
|
|
<% if proposal.image.present? %>
|
|
<div class="panel-image">
|
|
<%= image_tag proposal.image.variant(:thumb),
|
|
alt: proposal.image.title.unicode_normalize %>
|
|
</div>
|
|
<% 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>
|
|
<p class="proposal-info">
|
|
<%= l proposal.created_at.to_date %>
|
|
<span class="bullet"> • </span>
|
|
<%= render Shared::CommentsCountComponent.new(
|
|
proposal.comments_count,
|
|
url: namespaced_proposal_path(proposal, anchor: "comments")
|
|
) %>
|
|
|
|
<% if proposal.author.hidden? || proposal.author.erased? %>
|
|
<span class="bullet"> • </span>
|
|
<span class="author">
|
|
<%= t("proposals.show.author_deleted") %>
|
|
</span>
|
|
<% else %>
|
|
<span class="bullet"> • </span>
|
|
<span class="author">
|
|
<%= proposal.author.name %>
|
|
</span>
|
|
<% if proposal.author.display_official_position_badge? %>
|
|
<span class="bullet"> • </span>
|
|
<span class="label round level-<%= proposal.author.official_level %>">
|
|
<%= proposal.author.official_position %>
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if proposal.author.verified_organization? %>
|
|
<span class="bullet"> • </span>
|
|
<span class="label round is-association">
|
|
<%= t("shared.collective") %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<% if Geozone.any? %>
|
|
<span class="bullet"> • </span>
|
|
<span class="geozone">
|
|
<%= link_to geozone_name(proposal), proposals_path(search: geozone_name(proposal)) %>
|
|
</span>
|
|
<% end %>
|
|
</p>
|
|
<div class="proposal-description">
|
|
<p><%= proposal.summary %></p>
|
|
<div class="truncate"></div>
|
|
</div>
|
|
<%= render "shared/tags", taggable: proposal, limit: 5 %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if show_proposal_votes? %>
|
|
<div id="<%= dom_id(proposal) %>_votes" class="supports-container">
|
|
<% if proposal.successful? %>
|
|
<div class="padding">
|
|
<div class="supports">
|
|
<%= render "proposals/supports", proposal: proposal %>
|
|
</div>
|
|
</div>
|
|
<% elsif proposal.archived? %>
|
|
<div class="padding">
|
|
<strong><%= t("proposals.proposal.supports", count: proposal.total_votes) %></strong>
|
|
<p><%= t("proposals.proposal.archived") %></p>
|
|
</div>
|
|
<% else %>
|
|
<%= render "votes", proposal: proposal %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|