session summary layout upgrade
This commit is contained in:
SowinskiBraeden committed
1 parent
666b859a34
commit
055b9f4409
2 files changed
+165
-116
No files matched your search
+38
-59
@@ -755,74 +755,35 @@ td a:hover {
|
||||
}
|
||||
|
||||
.leaderboard-layout,
|
||||
.session-layout,
|
||||
.admin-layout {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.session-layout {
|
||||
align-items: stretch;
|
||||
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
|
||||
.results-panel-full {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.results-panel,
|
||||
.chart-panel {
|
||||
.table-scroll-open {
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
max-height: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.chart-row {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.chart-panel-compact,
|
||||
.session-insights-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 430px;
|
||||
min-height: 430px;
|
||||
max-height: 430px;
|
||||
}
|
||||
|
||||
.results-panel .table-scroll {
|
||||
.chart-panel-compact .chart-frame-compact {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.25rem;
|
||||
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: rgba(255, 160, 64, 0.88) rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.results-panel .table-scroll::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.results-panel .table-scroll::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.results-panel .table-scroll::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 186, 110, 0.95),
|
||||
rgba(255, 136, 48, 0.95)
|
||||
);
|
||||
border-radius: 999px;
|
||||
border: 2px solid rgba(10, 12, 18, 0.9);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 170, 90, 0.18),
|
||||
0 0 12px rgba(255, 140, 60, 0.18);
|
||||
}
|
||||
|
||||
.results-panel .table-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 200, 130, 1),
|
||||
rgba(255, 150, 60, 1)
|
||||
);
|
||||
}
|
||||
|
||||
.results-panel .table-scroll::-webkit-scrollbar-corner {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.chart-panel .chart-frame {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-height: 220px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@@ -838,8 +799,8 @@ td a:hover {
|
||||
|
||||
.session-results-table th:last-child,
|
||||
.session-results-table td:last-child {
|
||||
min-width: 15rem;
|
||||
width: 18rem;
|
||||
min-width: 18rem;
|
||||
width: 22rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@@ -851,6 +812,24 @@ td a:hover {
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
|
||||
+127
-57
@@ -39,75 +39,145 @@
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="grid two-col session-layout">
|
||||
<div class="panel results-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="eyebrow">Results</p>
|
||||
<h2>Player totals</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap table-scroll">
|
||||
<table class="data-table session-results-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Player</th>
|
||||
<th>Buy-in</th>
|
||||
<th>Cash-out</th>
|
||||
<th>Paid</th>
|
||||
<th>Remaining</th>
|
||||
<th>Status</th>
|
||||
<th>Net</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in session.entries %}
|
||||
<tr>
|
||||
<td><a href="{{ url_for('player_detail', player_name=entry.player_name) }}">{{ entry.player_name }}</a></td>
|
||||
<td>{{ entry.buy_in_cents | money }}</td>
|
||||
<td>{{ entry.cash_out_cents | money }}</td>
|
||||
<td>{{ entry.paid_cents | money }}</td>
|
||||
<td class="{{ 'negative' if entry.payout_remaining_cents > 0 else 'positive' }}">
|
||||
{{ entry.payout_remaining_cents | money }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge status-{{ entry.payout_status }}">
|
||||
{{ entry.payout_status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="{{ 'positive' if entry.net_cents > 0 else 'negative' if entry.net_cents < 0 else '' }}">
|
||||
{{ entry.net_cents | money }}
|
||||
</td>
|
||||
<td>
|
||||
{% if entry.notes %}
|
||||
<ul class="note-list">
|
||||
{% for note in entry.notes %}
|
||||
<li>{{ note }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
—
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<section class="panel results-panel results-panel-full">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="eyebrow">Results</p>
|
||||
<h2>Player totals</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel chart-panel">
|
||||
<div class="table-scroll table-scroll-open">
|
||||
<table class="data-table session-results-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Player</th>
|
||||
<th>Buy-in</th>
|
||||
<th>Cash-out</th>
|
||||
<th>Paid</th>
|
||||
<th>Remaining</th>
|
||||
<th>Status</th>
|
||||
<th>Net</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in session.entries %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ url_for('player_detail', player_name=entry.player_name) }}">
|
||||
{{ entry.player_name }}
|
||||
</a>
|
||||
</td>
|
||||
<td>{{ entry.buy_in_cents | money }}</td>
|
||||
<td>{{ entry.cash_out_cents | money }}</td>
|
||||
<td>{{ entry.paid_cents | money }}</td>
|
||||
<td class="{{ 'negative' if entry.payout_remaining_cents > 0 else 'positive' }}">
|
||||
{{ entry.payout_remaining_cents | money }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge status-{{ entry.payout_status }}">
|
||||
{{ entry.payout_status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="{{ 'positive' if entry.net_cents > 0 else 'negative' if entry.net_cents < 0 else '' }}">
|
||||
{{ entry.net_cents | money }}
|
||||
</td>
|
||||
<td>
|
||||
{% if entry.notes %}
|
||||
<ul class="note-list">
|
||||
{% for note in entry.notes %}
|
||||
<li>{{ note }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
—
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid two-col chart-row">
|
||||
<div class="panel chart-panel chart-panel-compact">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="eyebrow">Breakdown</p>
|
||||
<h2>Net by player</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-frame">
|
||||
<div class="chart-frame chart-frame-compact">
|
||||
<canvas id="sessionBreakdownChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel session-insights-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="eyebrow">Quick read</p>
|
||||
<h2>Session snapshot</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% set winners = session.entries | selectattr('net_cents', 'gt', 0) | list %}
|
||||
{% set losers = session.entries | selectattr('net_cents', 'lt', 0) | list %}
|
||||
|
||||
<div class="detail-grid">
|
||||
<div class="detail-row">
|
||||
<span>Players</span>
|
||||
<strong>{{ session.entries|length }}</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Biggest winner</span>
|
||||
<strong>
|
||||
{% if winners %}
|
||||
{{ winners | sort(attribute='net_cents', reverse=True) | first | attr('player_name') }}
|
||||
{% else %}
|
||||
—
|
||||
{% endif %}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Best result</span>
|
||||
<strong class="positive">
|
||||
{% if winners %}
|
||||
{{ (winners | sort(attribute='net_cents', reverse=True) | first).net_cents | money }}
|
||||
{% else %}
|
||||
$0.00
|
||||
{% endif %}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Biggest loser</span>
|
||||
<strong>
|
||||
{% if losers %}
|
||||
{{ losers | sort(attribute='net_cents') | first | attr('player_name') }}
|
||||
{% else %}
|
||||
—
|
||||
{% endif %}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Worst result</span>
|
||||
<strong class="negative">
|
||||
{% if losers %}
|
||||
{{ (losers | sort(attribute='net_cents') | first).net_cents | money }}
|
||||
{% else %}
|
||||
$0.00
|
||||
{% endif %}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Unpaid total</span>
|
||||
<strong class="{{ 'negative' if session.total_remaining_cents > 0 else 'positive' }}">
|
||||
{{ session.total_remaining_cents | money }}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
|
||||
Reference in new issue
Block a user