Skip to content

Commit

Permalink
tune card css styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@vol1ura
vol1ura committed Feb 22, 2025
1 parent 35a16a1 commit 3fb3dc4
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 176 deletions.
39 changes: 16 additions & 23 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,36 +175,29 @@ nav.pagination {
}
}

.img-event-container {
@extend .card, .text-bg-light, .border-opacity-25, .shadow, .h-100;

.img-event {
border-radius: 0 !important;
transition: transform 0.3s ease;
}

&:hover .img-event {
transform: scale(1.03);
}
}


.img-club {
@extend .float-start, .me-2, .my-2, .rounded;
width: 150px;
}

.img-event {
@extend .img-fluid, .rounded;
@media (max-width: 576px) {
border-radius: 0 !important;
.card-with-border {
@extend .card, .text-bg-light, .border-primary, .border-opacity-25, .shadow, .h-100;

.img-scaled {
transition: transform 0.3s ease;
}

&:hover {
@extend .shadow-lg, .border-opacity-50;

.img-scaled {
transform: scale(1.03);
}
}
}

.img-event-shadow {
@extend .bg-dark, .bg-gradient, .bg-opacity-25, .rounded-top;
@media (max-width: 576px) {
border-radius: 0 !important;
.card-body a:not(.stretched-link) {
position: relative;
z-index: 2;
}
}

Expand Down
11 changes: 11 additions & 0 deletions app/assets/stylesheets/web/events.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.img-event {
@extend .img-fluid, .rounded;
border-radius: 0 !important;
}

.img-event-shadow {
@extend .bg-dark, .bg-gradient, .bg-opacity-25, .rounded-top;
@media (max-width: 576px) {
border-radius: 0 !important;
}
}
10 changes: 7 additions & 3 deletions app/views/badges/_badge.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="col">
<div class="card text-bg-light mb-3 border-primary border-opacity-25 shadow h-100">
<div class="card-with-border mb-3">
<div class="row g-0">
<div class="col-sm-4 p-3 d-flex justify-content-center align-items-start">
<%= image_tag badge.image.variant(:web), class: 'img-badge', alt: badge.name, loading: 'lazy' %>
<%= image_tag badge.image.variant(:web), class: 'img-badge img-scaled', alt: badge.name, loading: 'lazy' %>
</div>
<div class="col-sm-8">
<div class="card-body">
Expand All @@ -11,7 +11,11 @@
<%= link_to sanitized_text(badge.conditions), badge, class: 'stretched-link text-decoration-none text-body' %>
</p>
<% if badge.received_date %>
<p class="card-text"><small class="text-muted">Дата получения: <%= l badge.received_date %> года</small></p>
<p class="card-text">
<small class="text-muted">
<%= t '.event_date', date: l(badge.received_date, format: :long) %>
</small>
</p>
<% end %>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion app/views/badges/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
<h2><%= @badge.name %></h2>
<p class="card-text"><%= sanitized_text @badge.conditions %></p>
<% if @badge.funrun_kind? && @badge.received_date %>
<p class="text-muted"><%= t '.event_date' %>: <%= l @badge.received_date %></p>
<p class="text-muted">
<%= t '.event_date', date: l(@badge.received_date, format: :long) %>
</p>
<% end %>
</div>
</div>
Expand Down
8 changes: 8 additions & 0 deletions app/views/events/_card.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0"><%= header %></h4>
<div class="card-body">
<%= yield %>
</div>
</div>
</div>
224 changes: 91 additions & 133 deletions app/views/events/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,104 +21,72 @@
<% end %>

<div class="row row-cols-1 row-cols-md-2 g-3 mb-3">
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0"><%= t '.description' %></h4>
<div class="card-body">
<div class="card-text"><%= sanitized_text @event.description %></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0"><%= t '.how_participate' %></h4>
<div class="card-body">
<p class="card-text"><%= t '.about_participation' %></p>
<a href="https://t.me/sat9am5kmbot" class="btn btn-outline-danger" target="_blank" rel="noopener"><%= t '.registration' %></a>
</div>
</div>
</div>
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0"><%= t '.volunteers' %></h4>
<div class="card-body">
<p class="card-text"><%= t '.about_volunteers' %></p>
<%= link_to t('.show'), volunteering_event_path(@event.code_name), class: 'btn btn-outline-primary' %>
</div>
</div>
</div>
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0"><%= t '.our_contacts' %></h4>
<div class="card-body">
<p class="card-text"><strong><%= t '.place' %>:</strong> <%= @event.place %></p>
<p class="card-text">
<div class="d-flex flex-wrap">
<% @event.contacts.order(:contact_type).each do |contact| %>
<%=
external_link_to(
contact.link.html_safe,
class: 'mb-2',
title: human_contact_type(contact.contact_type),
) do
%>
<%= render "events/contacts/#{contact.contact_type}" %>
<% end %>
<% end %>
</div>
</p>
</div>
<%= render 'card', header: t('.description') do %>
<div class="card-text"><%= sanitized_text @event.description %></div>
<% end %>
<%= render 'card', header: t('.how_participate') do %>
<p class="card-text"><%= t '.about_participation' %></p>
<a href="https://t.me/sat9am5kmbot" class="btn btn-outline-danger" target="_blank" rel="noopener"><%= t '.registration' %></a>
<% end %>
<%= render 'card', header: t('.volunteers') do %>
<p class="card-text"><%= t '.about_volunteers' %></p>
<%= link_to t('.show'), volunteering_event_path(@event.code_name), class: 'btn btn-outline-primary' %>
<% end %>
<%= render 'card', header: t('.our_contacts') do %>
<p class="card-text"><strong><%= t '.place' %>:</strong> <%= @event.place %></p>
<div class="d-flex flex-wrap">
<% @event.contacts.order(:contact_type).each do |contact| %>
<%=
external_link_to(
contact.link.html_safe,
class: 'mb-2',
title: human_contact_type(contact.contact_type),
) do
%>
<%= render "events/contacts/#{contact.contact_type}" %>
<% end %>
<% end %>
</div>
</div>
<% end %>
<% if @almost_jubilee_by_results.present? %>
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0"><%= t '.jubilee_by_results' %></h4>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col"><%= t '.athlete' %></th>
<th scope="col"><%= t '.results_count' %></th>
</tr>
</thead>
<tbody class="table-group-divider">
<% @almost_jubilee_by_results.each do |athlete| %>
<tr>
<td><%= link_to athlete.name, athlete_path(athlete), class: 'athlete-link' %></td>
<td><%= athlete.stats['results']['count'] %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<%= render 'card', header: t('.jubilee_by_results') do %>
<table class="table">
<thead>
<tr>
<th scope="col"><%= t '.athlete' %></th>
<th scope="col"><%= t '.results_count' %></th>
</tr>
</thead>
<tbody class="table-group-divider">
<% @almost_jubilee_by_results.each do |athlete| %>
<tr>
<td><%= link_to athlete.name, athlete_path(athlete), class: 'athlete-link' %></td>
<td><%= athlete.stats['results']['count'] %></td>
</tr>
<% end %>
</tbody>
</table>
<% end %>
<% end %>
<% if @almost_jubilee_by_volunteers.present? %>
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0"><%= t '.jubilee_by_volunteering' %></h4>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col"><%= t '.athlete' %></th>
<th scope="col"><%= t '.volunteering_count' %></th>
</tr>
</thead>
<tbody class="table-group-divider">
<% @almost_jubilee_by_volunteers.each do |athlete| %>
<tr>
<th scope="row"><%= link_to athlete.name, athlete_path(athlete), class: 'athlete-link' %></th>
<td><%= athlete.stats['volunteers']['count'] %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<%= render 'card', header: t('.jubilee_by_volunteering') do %>
<table class="table">
<thead>
<tr>
<th scope="col"><%= t '.athlete' %></th>
<th scope="col"><%= t '.volunteering_count' %></th>
</tr>
</thead>
<tbody class="table-group-divider">
<% @almost_jubilee_by_volunteers.each do |athlete| %>
<tr>
<th scope="row"><%= link_to athlete.name, athlete_path(athlete), class: 'athlete-link' %></th>
<td><%= athlete.stats['volunteers']['count'] %></td>
</tr>
<% end %>
</tbody>
</table>
<% end %>
<% end %>
</div>

Expand Down Expand Up @@ -148,45 +116,35 @@
</div>

<div class="row row-cols-1 row-cols-md-2 g-3 mt-3">
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0">За всё время было</h4>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @total_activities %></span>
<%= 'проведено забегов' %>
</li>
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @results_count.sum { |_, v| v } %></span>
<%= 'зафиксировано результатов' %>
</li>
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @uniq_athletes_count %></span>
<%= 'всего уникальных участников' %>
</li>
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @volunteers_count.sum { |_, v| v } %></span>
<%= 'всего волонтёрств' %>
</li>
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @uniq_volunteers_count %></span>
<%= 'всего уникальных волонтёров' %>
</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card border-primary border-opacity-25 shadow h-100">
<h4 class="card-header mt-0">Динамика мероприятия</h4>
<div class="card-body" data-controller="event">
<div class="row row-cols-2">
<div class="col" data-event-target="results"></div>
<div class="col" data-event-target="volunteers"></div>
</div>
</div>
<%= render 'card', header: 'За всё время было' do %>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @total_activities %></span>
<%= 'проведено забегов' %>
</li>
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @results_count.sum { |_, v| v } %></span>
<%= 'зафиксировано результатов' %>
</li>
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @uniq_athletes_count %></span>
<%= 'всего уникальных участников' %>
</li>
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @volunteers_count.sum { |_, v| v } %></span>
<%= 'всего волонтёрств' %>
</li>
<li class="list-group-item">
<span class="badge bg-primary rounded-pill"><%= @uniq_volunteers_count %></span>
<%= 'всего уникальных волонтёров' %>
</li>
</ul>
<% end %>
<%= render 'card', header: 'Динамика мероприятия' do %>
<div class="row row-cols-2" data-controller="event">
<div class="col" data-event-target="results"></div>
<div class="col" data-event-target="volunteers"></div>
</div>
</div>
<% end %>
</div>
<% end %>
4 changes: 2 additions & 2 deletions app/views/pages/_event.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="col">
<%= tag.div class: ['img-event-container', event.active ? 'border-primary' : 'border-danger'] do %>
<%= tag.div class: ['card-with-border', event.active ? 'border-primary' : 'border-danger'] do %>
<div class="overflow-hidden card-img-top">
<%= event_main_image_tag event, class: 'img-event', alt: event.name, loading: 'lazy' %>
<%= event_main_image_tag event, class: 'img-event img-scaled', alt: event.name, loading: 'lazy' %>
</div>
<%= tag.div class: ['position-absolute', 'top-0', 'bg-gradient', 'bg-opacity-25', 'w-100', 'px-3', 'card-img-top', event.active ? 'bg-dark' : 'bg-danger'] do %>
<h3 class="fs-4 text-light"><%= event.name %></h3>
Expand Down
Loading

0 comments on commit 3fb3dc4

Please sign in to comment.