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,
|
.leaderboard-layout,
|
||||||
|
.session-layout,
|
||||||
.admin-layout {
|
.admin-layout {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-layout {
|
.results-panel-full {
|
||||||
align-items: stretch;
|
display: block;
|
||||||
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-panel,
|
.table-scroll-open {
|
||||||
.chart-panel {
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 430px;
|
|
||||||
min-height: 430px;
|
|
||||||
max-height: 430px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-panel .table-scroll {
|
.chart-panel-compact .chart-frame-compact {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 220px;
|
||||||
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;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -838,8 +799,8 @@ td a:hover {
|
|||||||
|
|
||||||
.session-results-table th:last-child,
|
.session-results-table th:last-child,
|
||||||
.session-results-table td:last-child {
|
.session-results-table td:last-child {
|
||||||
min-width: 15rem;
|
min-width: 18rem;
|
||||||
width: 18rem;
|
width: 22rem;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -851,6 +812,24 @@ td a:hover {
|
|||||||
backdrop-filter: blur(6px);
|
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 {
|
.button-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
|
|||||||
+127
-57
@@ -39,75 +39,145 @@
|
|||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="grid two-col session-layout">
|
<section class="panel results-panel results-panel-full">
|
||||||
<div class="panel results-panel">
|
<div class="panel-header">
|
||||||
<div class="panel-header">
|
<div>
|
||||||
<div>
|
<p class="eyebrow">Results</p>
|
||||||
<p class="eyebrow">Results</p>
|
<h2>Player totals</h2>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</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 class="panel-header">
|
||||||
<div>
|
<div>
|
||||||
<p class="eyebrow">Breakdown</p>
|
<p class="eyebrow">Breakdown</p>
|
||||||
<h2>Net by player</h2>
|
<h2>Net by player</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-frame">
|
<div class="chart-frame chart-frame-compact">
|
||||||
<canvas id="sessionBreakdownChart"></canvas>
|
<canvas id="sessionBreakdownChart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<section class="panel">
|
<section class="panel">
|
||||||
|
|||||||
Reference in new issue
Block a user