added github links and styled dropdowns
This commit is contained in:
@@ -6,26 +6,61 @@
|
||||
|
||||
<div class="table-controls">
|
||||
<form id="sortForm" method="get" action="">
|
||||
<input type="hidden" name="sort" id="sortInput" value="{{ current_sort }}">
|
||||
<input type="hidden" name="order" id="orderInput" value="{{ current_order }}">
|
||||
|
||||
<div class="control-group">
|
||||
<label for="sort">Sort by:</label>
|
||||
<select name="sort" onchange="this.form.submit()">
|
||||
<option value="score" {% if current_sort == "score" %}selected{% endif %}>Score</option>
|
||||
<option value="single" {% if current_sort == "single" %}selected{% endif %}>Single Thread</option>
|
||||
<option value="multi" {% if current_sort == "multi" %}selected{% endif %}>Multi Thread</option>
|
||||
<option value="ram" {% if current_sort == "ram" %}selected{% endif %}>RAM Amount</option>
|
||||
<option value="threads" {% if current_sort == "threads" %}selected{% endif %}>Thread Count</option>
|
||||
<option value="time" {% if current_sort == "time" %}selected{% endif %}>Time Ago</option>
|
||||
</select>
|
||||
<label>Sort by:</label>
|
||||
<div class="dropdown" id="sortDropdown">
|
||||
<button class="dropdown-trigger select-styled" type="button" onclick="toggleSortDropdown(event)">
|
||||
<span>
|
||||
{% if current_sort == "score" %}Score
|
||||
{% elif current_sort == "single" %}Single Thread
|
||||
{% elif current_sort == "multi" %}Multi Thread
|
||||
{% elif current_sort == "ram" %}RAM Amount
|
||||
{% elif current_sort == "threads" %}Thread Count
|
||||
{% elif current_sort == "time" %}Time Ago
|
||||
{% endif %}
|
||||
</span>
|
||||
<i class="fa-solid fa-chevron-down chevron"></i>
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-header">Sort Benchmarks By</div>
|
||||
<a href="javascript:void(0)" onclick="selectSort('score')">
|
||||
<span class="link-title"><i class="fa-solid fa-award fa-fw"></i> Score</span>
|
||||
<span class="link-desc">(Singlethread + Multithread) / 2</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" onclick="selectSort('single')">
|
||||
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> Singlethread</span>
|
||||
<span class="link-desc">Single-core efficiency</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" onclick="selectSort('multi')">
|
||||
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> Multithread</span>
|
||||
<span class="link-desc">Multi-core efficiency</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" onclick="selectSort('ram')">
|
||||
<span class="link-title"><i class="fa-solid fa-memory fa-fw"></i> RAM Amount</span>
|
||||
<span class="link-desc">System memory capacity</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" onclick="selectSort('threads')">
|
||||
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> Thread Count</span>
|
||||
<span class="link-desc">Total logical cores</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" onclick="selectSort('time')">
|
||||
<span class="link-title"><i class="fa-solid fa-clock fa-fw"></i> Time Ago</span>
|
||||
<span class="link-desc">Newest reports first</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<input type="hidden" name="order" value="{{ current_order }}">
|
||||
<button type="button" class="order-toggle" onclick="toggleOrder()">
|
||||
{% if current_order == "desc" %}
|
||||
Descending ↓
|
||||
{% else %}
|
||||
Ascending ↑
|
||||
{% endif %}
|
||||
<span>
|
||||
{% if current_order == "desc" %}Descending{% else %}Ascending{% endif %}
|
||||
</span>
|
||||
<i class="fa-solid {% if current_order == 'desc' %}fa-arrow-down-wide-short{% else %}fa-arrow-up-short-wide{% endif %}"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -66,12 +101,28 @@
|
||||
</table>
|
||||
|
||||
<script>
|
||||
function toggleOrder() {
|
||||
const form = document.getElementById('sortForm');
|
||||
const orderInput = form.querySelector('input[name="order"]');
|
||||
orderInput.value = orderInput.value === 'desc' ? 'asc' : 'desc';
|
||||
form.submit();
|
||||
function toggleSortDropdown(event) {
|
||||
event.stopPropagation();
|
||||
document.getElementById('sortDropdown').classList.toggle('open');
|
||||
}
|
||||
|
||||
function selectSort(value) {
|
||||
document.getElementById('sortInput').value = value;
|
||||
document.getElementById('sortForm').submit();
|
||||
}
|
||||
|
||||
function toggleOrder() {
|
||||
const orderInput = document.getElementById('orderInput');
|
||||
orderInput.value = orderInput.value === 'desc' ? 'asc' : 'desc';
|
||||
document.getElementById('sortForm').submit();
|
||||
}
|
||||
|
||||
window.addEventListener('click', function(event) {
|
||||
if (!event.target.closest('#sortDropdown')) {
|
||||
const dropdown = document.getElementById('sortDropdown');
|
||||
if (dropdown) dropdown.classList.remove('open');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -144,43 +195,58 @@ function toggleOrder() {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: white;
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
.select-styled {
|
||||
min-width: 160px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.order-toggle {
|
||||
background: var(--primary-soft);
|
||||
border: 1px solid var(--primary-border);
|
||||
color: var(--primary-text);
|
||||
padding: 0.4rem 0.8rem;
|
||||
.select-styled, .order-toggle {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
height: 38px;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.order-toggle:hover {
|
||||
background: var(--primary-border);
|
||||
.select-styled:hover {
|
||||
background: var(--bg-main);
|
||||
}
|
||||
|
||||
.sub-scores {
|
||||
font-size: 0.65rem;
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
margin-top: 2px;
|
||||
.select-styled .chevron {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.5;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.dropdown.open .chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.order-toggle {
|
||||
white-space: nowrap;
|
||||
background: white;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.select-styled:hover, .order-toggle:hover {
|
||||
background: var(--bg-main);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.table-controls form {
|
||||
/* flex-direction: column; */
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user