215 lines
11 KiB
HTML
215 lines
11 KiB
HTML
@include(snippets/header)
|
|
<div class="pagewrapper">
|
|
<div id="main" class="ranking-page">
|
|
<style>
|
|
/* Ranking: style guide (square, flat, theme colours, no glow). Scoped to .ranking-page so it also
|
|
applies inside the page modal, which lifts this #main (styles included) over the current page. */
|
|
.ranking-page {
|
|
--rk-accent: var(--accent, #0096ff);
|
|
--rk-text: var(--text-color, var(--white, #fff));
|
|
--rk-muted: var(--text-muted, #8a8f98);
|
|
--rk-surface: rgba(255, 255, 255, 0.04);
|
|
--rk-border: rgba(255, 255, 255, 0.1);
|
|
--rk-gold: #ffd700; --rk-silver: #c0c0c0; --rk-bronze: #cd7f32;
|
|
}
|
|
.ranking-page *, .ranking-page *::before, .ranking-page *::after { border-radius: 0 !important; }
|
|
|
|
/* Podium: flat tiles, medal colour as frame + label, no bounce, no glow */
|
|
.ranking-page .ranking-podium { background: none; gap: 16px; margin: 0 0 20px; padding: 0; align-items: stretch; }
|
|
.ranking-page .podium-item {
|
|
flex: 1 1 0; max-width: 240px; padding: 22px 14px 16px; box-sizing: border-box;
|
|
background: var(--rk-surface); border: 1px solid var(--rk-border); border-top: 3px solid var(--medal, var(--rk-accent));
|
|
justify-content: flex-start; transition: border-color 0.15s, background 0.15s;
|
|
}
|
|
.ranking-page .podium-item:hover { transform: none; background: rgba(255, 255, 255, 0.06); border-color: var(--medal, var(--rk-accent)); }
|
|
.ranking-page .podium-item.rank-1 { --medal: var(--rk-gold); transform: none; padding-top: 40px; }
|
|
.ranking-page .podium-item.rank-1:hover { transform: none; }
|
|
.ranking-page .podium-item.rank-2 { --medal: var(--rk-silver); }
|
|
.ranking-page .podium-item.rank-3 { --medal: var(--rk-bronze); }
|
|
.ranking-page .podium-avatar,
|
|
.ranking-page :is(.rank-1, .rank-2, .rank-3) .podium-avatar {
|
|
width: 96px; height: 96px; border: 2px solid var(--medal, var(--rk-accent)); box-shadow: none; background: #000;
|
|
}
|
|
.ranking-page .rank-1 .podium-avatar { width: 120px; height: 120px; }
|
|
.ranking-page .podium-crown { top: -34px; filter: none; transform: translateX(-50%); font-size: 1.6em; }
|
|
.ranking-page .podium-avatar-wrapper { margin-bottom: 18px; }
|
|
.ranking-page .podium-rank-label,
|
|
.ranking-page :is(.rank-1, .rank-2, .rank-3) .podium-rank-label {
|
|
bottom: -11px; padding: 2px 10px; font-size: 0.85em; font-weight: 800; letter-spacing: 0.06em;
|
|
background: var(--medal, var(--rk-accent)); color: #000; box-shadow: none;
|
|
}
|
|
.ranking-page .podium-name { font-size: 1.15em; text-shadow: none; color: var(--rk-text); overflow-wrap: anywhere; }
|
|
.ranking-page .podium-count,
|
|
.ranking-page :is(.rank-1, .rank-2, .rank-3) .podium-count {
|
|
color: var(--rk-muted); font-size: 0.72em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* Tables */
|
|
.ranking-page .clean-table { background: transparent; border: 1px solid var(--rk-border); border-collapse: collapse; }
|
|
.ranking-page .clean-table th {
|
|
padding: 10px 12px; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
|
|
color: var(--rk-muted); background: var(--rk-surface); border-bottom: 1px solid var(--rk-border);
|
|
}
|
|
.ranking-page .clean-table td { padding: 10px 12px; border-bottom: 1px solid var(--rk-border); color: var(--rk-text); line-height: 1.4; }
|
|
.ranking-page .clean-table tbody tr { transition: background 0.12s; }
|
|
.ranking-page .clean-table tbody tr:hover { background: var(--rk-surface); }
|
|
.ranking-page .rank-cell { color: var(--rk-accent) !important; font-variant-numeric: tabular-nums; }
|
|
.ranking-page .count-cell, .ranking-page .stats-table td:last-child, .ranking-page .f0cks-table td:last-child { font-variant-numeric: tabular-nums; }
|
|
.ranking-page .rank-avatar { border: 1px solid var(--rk-border); }
|
|
|
|
/* Side panels */
|
|
.ranking-page .section-small { gap: 20px; }
|
|
.ranking-page .stats-box-simple {
|
|
background: var(--rk-surface); border: 1px solid var(--rk-border); box-shadow: none; padding: 16px; box-sizing: border-box;
|
|
}
|
|
.ranking-page .stats-box-simple h3 {
|
|
display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0 0 10px;
|
|
font-size: 0.78em; font-weight: 800; letter-spacing: 0.12em; color: var(--rk-muted);
|
|
border-bottom: 1px solid var(--rk-border);
|
|
}
|
|
.ranking-page .stats-box-simple h3::before { content: ''; width: 3px; height: 10px; background: var(--rk-accent); flex-shrink: 0; }
|
|
.ranking-page .stats-box-simple .clean-table { border: 0; margin-top: 0; }
|
|
.ranking-page .stats-box-simple .clean-table td { padding: 8px 0; }
|
|
.ranking-page .stats-box-simple .clean-table tbody tr:hover { background: transparent; }
|
|
.ranking-page .stats-box-simple .clean-table tbody tr:last-child td { border-bottom: 0; }
|
|
/* Both columns start on the same top line */
|
|
.ranking-page .ranking-wrapper { gap: 28px; margin-top: 0; align-items: flex-start; }
|
|
.ranking-page .section-big > .clean-table:first-child { margin-top: 0; }
|
|
|
|
@media (max-width: 992px) {
|
|
.ranking-page .ranking-podium { flex-direction: row; align-items: stretch; gap: 10px; padding-top: 0; }
|
|
.ranking-page .podium-item { padding: 18px 8px 12px; }
|
|
.ranking-page .podium-item.rank-1 { padding-top: 34px; }
|
|
.ranking-page .podium-avatar, .ranking-page :is(.rank-1, .rank-2, .rank-3) .podium-avatar { width: 64px; height: 64px; }
|
|
.ranking-page .rank-1 .podium-avatar { width: 80px; height: 80px; }
|
|
.ranking-page .podium-item.rank-1 { order: 2 !important; }
|
|
.ranking-page .podium-item.rank-2 { order: 1 !important; }
|
|
.ranking-page .podium-item.rank-3 { order: 3 !important; }
|
|
.ranking-page .podium-name { font-size: 0.95em; }
|
|
}
|
|
@media (max-width: 420px) {
|
|
.ranking-page .ranking-podium { flex-direction: column; align-items: stretch; gap: 26px; }
|
|
.ranking-page .podium-item { max-width: none; order: unset !important; }
|
|
}
|
|
</style>
|
|
|
|
<div class="ranking-wrapper">
|
|
<div class="section-big">
|
|
@if(list.length >= 3)
|
|
<div class="ranking-podium">
|
|
@for(let i = 0; i < 3; i++)
|
|
<div class="podium-item rank-{{ i + 1 }}">
|
|
@if(i === 0)<div class="podium-crown">👑</div>@endif
|
|
<div class="podium-avatar-wrapper">
|
|
@if(list[i].avatar_file)
|
|
<a href="/user/{{ list[i].user }}"><img class="podium-avatar" src="/a/{{ list[i].avatar_file }}" alt="{{ list[i].user }}"></a>
|
|
@elseif(list[i].avatar)
|
|
<a href="/user/{{ list[i].user }}"><img class="podium-avatar" src="/t/{{ list[i].avatar }}.webp" alt="{{ list[i].user }}"></a>
|
|
@else
|
|
<a href="/user/{{ list[i].user }}"><img class="podium-avatar" src="/a/default.png" alt="{{ list[i].user }}"></a>
|
|
@endif
|
|
<div class="podium-rank-label">#{{ i + 1 }}</div>
|
|
</div>
|
|
<div class="podium-info">
|
|
<a href="/user/{{ list[i].user }}" class="podium-name">{!! list[i].display_name || list[i].user !!}</a>
|
|
<span class="podium-count">{{ list[i].count }} Tags</span>
|
|
</div>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
@endif
|
|
|
|
<table class="ranking-table clean-table" id="ranking-list">
|
|
<thead>
|
|
<tr>
|
|
<th class="rank-col">{{ t('ranking.col_rank') }}</th>
|
|
<th class="avatar-col">{{ t('ranking.col_avatar') }}</th>
|
|
<th class="user-col">{{ t('ranking.col_username') }}</th>
|
|
<th class="count-col">{{ t('ranking.col_tagged') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for(let i = (list.length >= 3 ? 3 : 0); i < list.length; i++)
|
|
<tr>
|
|
<td class="rank-cell">#{{ i + 1 }}</td>
|
|
<td class="avatar-cell">
|
|
@if(list[i].avatar_file)
|
|
<a href="/user/{{ list[i].user }}"><img class="rank-avatar" src="/a/{{ list[i].avatar_file }}" alt="{{ list[i].user }}"></a>
|
|
@elseif(list[i].avatar)
|
|
<a href="/user/{{ list[i].user }}"><img class="rank-avatar" src="/t/{{ list[i].avatar }}.webp" alt="{{ list[i].user }}"></a>
|
|
@else
|
|
<a href="/user/{{ list[i].user }}"><img class="rank-avatar" src="/a/default.png" alt="{{ list[i].user }}"></a>
|
|
@endif
|
|
</td>
|
|
<td class="user-cell">
|
|
@if(list[i].admin)<span class="admin-icon" title="Administrator">⚡</span>@endif
|
|
<a href="/user/{{ list[i].user }}">{!! list[i].display_name || list[i].user !!}</a>
|
|
</td>
|
|
<td class="count-cell">{{ list[i].count }}</td>
|
|
</tr>
|
|
@endfor
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="section-small">
|
|
<div class="stats-box-simple" id="tag-statistics">
|
|
<h3>{{ t('ranking.tag_stats') }}</h3>
|
|
<table class="stats-table clean-table">
|
|
<tbody>
|
|
<tr><td>{{ t('ranking.stat_total') }}</td><td>{{ stats.total }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_comments') }}</td><td>{{ totalComments }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_users') }}</td><td>{{ totalUsers }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_anon_users') }}</td><td>{{ totalAnonUsers }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_favs') }}</td><td>{{ totalFavs }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_tagged') }}</td><td>{{ stats.tagged }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_untagged') }}</td><td>{{ stats.untagged }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_sfw') }}</td><td>{{ stats.sfw }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_nsfw') }}</td><td>{{ stats.nsfw }}</td></tr>
|
|
@if(enable_nsfl)
|
|
<tr><td>{{ t('ranking.stat_nsfl') }}</td><td>{{ stats.nsfl }}</td></tr>
|
|
@endif
|
|
<tr><td>{{ t('ranking.stat_deleted') }}</td><td>{{ stats.deleted }}</td></tr>
|
|
<tr><td>{{ t('ranking.stat_disk_usage') }}</td><td>{{ diskSize }}</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="stats-box-simple" id="top-f0cks">
|
|
<h3>{{ t('ranking.most_favorited') }}</h3>
|
|
<table class="f0cks-table clean-table">
|
|
<tbody>
|
|
@each(favotop as favo)
|
|
<tr>
|
|
<td><a href="/{{ (enable_item_slugs && favo.slug) ? favo.slug : favo.id }}">#{{ (enable_item_slugs && favo.slug) ? favo.slug : favo.id }}</a></td>
|
|
<td>{{ favo.favs }} <span style="opacity: 0.5; font-size: 0.8em;">{{ t('ranking.favs') }}</span></td>
|
|
</tr>
|
|
@endeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if(enable_xd_score && xdtop.length > 0)
|
|
<div class="stats-box-simple" id="top-xd-scores">
|
|
<h3>{{ t('ranking.top_xd') }}</h3>
|
|
<table class="xd-scores-table clean-table">
|
|
<tbody>
|
|
@each(xdtop as item)
|
|
<tr>
|
|
<td><a href="/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}">#{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}</a></td>
|
|
<td>
|
|
<span class="xd-score-badge xd-tier-{{ item.xd_tier }}" tooltip="xD Score: {{ item.xd_score }} pts" flow="up">
|
|
{{ item.xd_label }} <span class="xd-score-num">{{ item.xd_score }}</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@endeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@include(snippets/footer) |