eminux/MatchLiveTv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compatta archivio replay senza scroll orizzontale.

Browse Source 
Riduce le colonne, impila dettagli e stato su due righe e usa date brevi per stare nel layout della pagina.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Emiliano Frascaro
2026-06-09 09:28:03 +02:00
parent 214d276508
commit 0621efb839
3 changed files with 165 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/app/views/layouts/marketing.html.erb
View File

@@ -8,7 +8,7 @@
<%= render "shared/meta_tags" %>
<%= yield :head %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/marketing.css?v=37">
<link rel="stylesheet" href="/marketing.css?v=38">
</head>
<body<% if MatchLiveTv.google_analytics_configured? %> data-ga-id="<%= MatchLiveTv.google_analytics_measurement_id %>"<% end %>>
<%= render "shared/cookie_banner" %>

52
backend/app/views/public/club_recordings/index.html.erb
View File

@@ -49,19 +49,13 @@
<% if @recordings.any? %>
<div class="card replay-archive__card">
<div class="replay-archive__table-wrap">
<table class="data replay-archive-table">
<thead>
<tr>
<th class="replay-archive-table__col-thumb" scope="col"><span class="visually-hidden">Anteprima</span></th>
<th scope="col">Titolo</th>
<th scope="col">Piattaforma</th>
<th scope="col">Data</th>
<th scope="col">Durata</th>
<th scope="col">Views</th>
<th scope="col">Scadenza</th>
<th scope="col">Stato</th>
<th scope="col">Visibilità</th>
<th scope="col">Partita</th>
<th scope="col">Dettagli</th>
<th scope="col">Stato e visibilità</th>
<th class="replay-archive-table__col-actions" scope="col">Azioni</th>
</tr>
</thead>
@@ -74,7 +68,7 @@
<% if can_play %>
<%= link_to rec.replay_url, class: "replay-archive__thumb", target: "_blank", rel: "noopener", title: "Guarda replay" do %>
<% if rec.thumbnail_url %>
<img src="<%= rec.thumbnail_url %>" alt="" class="replay-archive__thumb-img" width="96" height="54" loading="lazy">
<img src="<%= rec.thumbnail_url %>" alt="" class="replay-archive__thumb-img" width="80" height="45" loading="lazy">
<% else %>
<span class="replay-archive__thumb-placeholder" aria-hidden="true">▶</span>
<% end %>
@@ -83,38 +77,40 @@
<% else %>
<div class="replay-archive__thumb replay-archive__thumb--static" title="<%= rec.status == "processing" ? "Elaborazione in corso" : "Replay non disponibile" %>">
<% if rec.thumbnail_url %>
<img src="<%= rec.thumbnail_url %>" alt="" class="replay-archive__thumb-img" width="96" height="54" loading="lazy">
<img src="<%= rec.thumbnail_url %>" alt="" class="replay-archive__thumb-img" width="80" height="45" loading="lazy">
<% else %>
<span class="replay-archive__thumb-placeholder" aria-hidden="true"><%= rec.status == "processing" ? "…" : "—" %></span>
<% end %>
</div>
<% end %>
</td>
<td class="replay-archive-table__col-title">
<td class="replay-archive-table__col-match">
<%= form_with url: public_club_recording_path(@club, rec), method: :patch, local: true, class: "replay-archive__title-form" do %>
<%= hidden_field_tag :team_id, @filter_team_id if @filter_team_id.present? %>
<%= hidden_field_tag :status, @filter_status if @filter_status.present? %>
<%= text_field_tag "recording[title]", rec.title_or_default, class: "replay-archive__title-input", onchange: "this.form.submit()" %>
<% end %>
<span class="replay-archive__meta-line"><%= rec.source_platform_label %></span>
</td>
<td><%= rec.source_platform_label %></td>
<td class="replay-archive-table__nowrap"><%= l_local(rec.recorded_at_or_fallback) %></td>
<td><%= rec.duration_label %></td>
<td><%= rec.view_count %></td>
<td class="replay-archive-table__nowrap">
<td class="replay-archive-table__col-details">
<span class="replay-archive__detail-line">
<%= l_local(rec.recorded_at_or_fallback, format: :short) %>
· <%= rec.duration_label %>
· <%= rec.view_count %> vis.
</span>
<span class="replay-archive__meta-line">
<% if rec.expires_at %>
<%= l_local(rec.expires_at) %>
Scade <%= l_local(rec.expires_at, format: :short) %>
<% if rec.days_until_expiry && rec.days_until_expiry.positive? %>
<span class="muted replay-archive-table__sub">(<%= rec.days_until_expiry %> gg)</span>
(<%= rec.days_until_expiry %> gg)
<% end %>
<% else %>
—
Nessuna scadenza
<% end %>
</span>
</td>
<td>
<td class="replay-archive-table__col-status">
<span class="replay-archive__status replay-archive__status--<%= rec.status %>"><%= rec.status_label %></span>
</td>
<td class="replay-archive-table__col-privacy">
<%= form_with url: public_club_recording_path(@club, rec), method: :patch, local: true, class: "replay-archive__privacy-form" do %>
<%= hidden_field_tag :team_id, @filter_team_id if @filter_team_id.present? %>
<%= hidden_field_tag :status, @filter_status if @filter_status.present? %>
@@ -126,12 +122,6 @@
</td>
<td class="replay-archive-table__col-actions">
<div class="replay-archive__actions">
<% if can_play %>
<%= link_to rec.replay_url, class: "replay-archive__action replay-archive__action--play", target: "_blank", rel: "noopener", title: "Guarda replay" do %>
<span aria-hidden="true">▶</span>
<span class="replay-archive__action-label">Play</span>
<% end %>
<% end %>
<% if ent.phone_download_enabled? && rec.ready? %>
<%= link_to "MP4", public_replay_download_path(rec.stream_session_id), class: "replay-archive__action replay-archive__action--secondary", title: "Scarica MP4" %>
<% end %>
@@ -145,8 +135,7 @@
class: "replay-archive__action replay-archive__action--danger",
title: "Elimina replay",
form: { data: { turbo_confirm: "Eliminare definitivamente questo replay? Verranno rimossi i file sul server e il video YouTube collegato." }, class: "replay-archive__action-form" } do %>
<span aria-hidden="true">✕</span>
<span class="replay-archive__action-label">Elimina</span>
✕
<% end %>
</div>
</td>
@@ -155,7 +144,6 @@
</tbody>
</table>
</div>
</div>
<% else %>
<p class="muted">Nessuna registrazione ancora. I replay compaiono al termine delle dirette Premium.</p>
<% end %>

142
backend/public/marketing.css
View File

@@ -1361,26 +1361,21 @@ body.cookie-banner-visible {
overflow: hidden;
}
.replay-archive__table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.replay-archive-table {
width: 100%;
min-width: 920px;
table-layout: fixed;
border-collapse: collapse;
}
.replay-archive-table th,
.replay-archive-table td {
padding: 12px 10px;
padding: 10px 8px;
border-bottom: 1px solid #2a2a36;
vertical-align: middle;
}
.replay-archive-table th {
font-size: 0.78rem;
font-size: 0.72rem;
font-weight: 600;
color: #9a9aaa;
text-transform: uppercase;
@@ -1388,38 +1383,49 @@ body.cookie-banner-visible {
}
.replay-archive-table__col-thumb {
width: 108px;
width: 92px;
}
.replay-archive-table__col-title {
min-width: 11rem;
.replay-archive-table__col-match {
width: 22%;
}
.replay-archive-table__col-privacy {
width: 8.5rem;
.replay-archive-table__col-details {
width: 30%;
}
.replay-archive-table__col-status {
width: 18%;
}
.replay-archive-table__col-actions {
width: 1%;
white-space: nowrap;
width: 12%;
}
.replay-archive-table__nowrap {
white-space: nowrap;
font-size: 0.9rem;
}
.replay-archive-table__sub {
.replay-archive__detail-line {
display: block;
font-size: 0.75rem;
margin-top: 2px;
font-size: 0.88rem;
line-height: 1.35;
color: #e8e8f0;
}
.replay-archive__meta-line {
display: block;
margin-top: 4px;
font-size: 0.78rem;
line-height: 1.35;
color: #9a9aaa;
}
.replay-archive-table__col-status .replay-archive__status {
margin-bottom: 6px;
}
.replay-archive__thumb {
position: relative;
display: block;
width: 96px;
height: 54px;
width: 80px;
height: 45px;
border-radius: 8px;
overflow: hidden;
background: #0f0f14;
@@ -1460,15 +1466,15 @@ a.replay-archive__thumb:hover {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(229, 57, 53, 0.95);
color: #fff;
font-size: 0.85rem;
line-height: 36px;
font-size: 0.75rem;
line-height: 32px;
text-align: center;
padding-left: 3px;
padding-left: 2px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
pointer-events: none;
}
@@ -1482,19 +1488,16 @@ a.replay-archive__thumb:hover {
.replay-archive__title-input {
width: 100%;
min-width: 10rem;
max-width: 18rem;
margin: 0;
padding: 8px 10px;
font-size: 0.92rem;
padding: 7px 8px;
font-size: 0.88rem;
}
.replay-archive__privacy-select {
width: 100%;
min-width: 7.5rem;
margin: 0;
padding: 8px 10px;
font-size: 0.85rem;
padding: 6px 8px;
font-size: 0.8rem;
}
.replay-archive__status {
@@ -1527,16 +1530,17 @@ a.replay-archive__thumb:hover {
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 6px;
gap: 4px;
}
.replay-archive__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 34px;
padding: 0 10px;
gap: 2px;
min-height: 30px;
min-width: 30px;
padding: 0 7px;
border-radius: 8px;
border: 1px solid #3d3d4a;
background: #1c1c26;
@@ -1555,23 +1559,9 @@ a.replay-archive__thumb:hover {
color: #fff;
}
.replay-archive__action--play {
background: #e53935;
border-color: #e53935;
color: #fff;
min-width: 34px;
padding: 0 12px;
}
.replay-archive__action--play:hover {
background: #c62828;
border-color: #c62828;
color: #fff;
}
.replay-archive__action--secondary {
font-size: 0.75rem;
padding: 0 8px;
font-size: 0.72rem;
padding: 0 6px;
}
.replay-archive__action--danger {
@@ -1615,17 +1605,35 @@ a.replay-archive__thumb:hover {
border: 0;
}
@media (max-width: 720px) {
.replay-archive__action-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
@media (max-width: 900px) {
.replay-archive-table thead {
display: none;
}
.replay-archive__action--play {
min-width: 40px;
padding: 0;
.replay-archive-table,
.replay-archive-table tbody,
.replay-archive-table tr,
.replay-archive-table td {
display: block;
width: 100%;
}
.replay-archive-table tr {
padding: 12px 14px;
border-bottom: 1px solid #2a2a36;
}
.replay-archive-table td {
padding: 4px 0;
border: none;
}
.replay-archive-table__col-thumb {
margin-bottom: 8px;
}
.replay-archive-table__col-actions .replay-archive__actions {
justify-content: flex-start;
margin-top: 8px;
}
}