Unify task subcategory dropdown width and remove submission UI code
Browse files- app.js +1 -10
- styles.css +5 -9
app.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
| 1 |
'use strict';
|
| 2 |
(() => {
|
| 3 |
-
|
| 4 |
const CITATIONS = JSON.parse(document.getElementById('citation-data').textContent);
|
| 5 |
const $ = (selector) => document.querySelector(selector);
|
| 6 |
const $$ = (selector) => [...document.querySelectorAll(selector)];
|
|
@@ -63,8 +63,6 @@
|
|
| 63 |
function renderResources() {
|
| 64 |
const b=benchmark();
|
| 65 |
$('#hero-links').innerHTML=[['Paper','paper'],['Dataset','data'],['Outputs','outputs'],['Code','github']].map(([label,key])=>`<a href="${esc(b.links[key])}" target="_blank" rel="noopener noreferrer">${label} <span aria-hidden="true">↗</span></a>`).join('');
|
| 66 |
-
const submitLink=$('#submit-results-link');
|
| 67 |
-
if(submitLink){submitLink.href='submit.html?'+new URLSearchParams({benchmark:state.benchmark,language:languageCode()});submitLink.setAttribute('aria-label','Submit results to '+b.name);}
|
| 68 |
$('#board-options').hidden=b.available_result_languages.length<2;
|
| 69 |
$$('[data-language]').forEach(button=>button.setAttribute('aria-pressed',button.dataset.language===languageCode()));
|
| 70 |
$('#group-filters').innerHTML=isPlus()?['all','closed','open','agentic'].map(g=>`<button data-group="${g}" aria-pressed="${state.group===g}">${g==='all'?'All models':groupLabels[g]}<span>${g==='all'?b.models.length:b.models.filter(m=>m.group===g).length}</span></button>`).join(''):'<span class="caption-text">All models</span>';
|
|
@@ -248,11 +246,4 @@
|
|
| 248 |
}
|
| 249 |
});
|
| 250 |
switchBenchmark(state.benchmark);
|
| 251 |
-
if($('#submit-results-link')&&location.protocol!=='file:')fetch('/api/leaderboard',{cache:'no-store'}).then(r=>r.ok?r.json():null).then(data=>{
|
| 252 |
-
if(!data?.benchmarks)return;
|
| 253 |
-
DATA=data;
|
| 254 |
-
state.selected=state.selected.filter(id=>modelById(id));
|
| 255 |
-
renderResources();renderTable();
|
| 256 |
-
$('#json-download').href='/api/leaderboard';
|
| 257 |
-
}).catch(()=>{});
|
| 258 |
})();
|
|
|
|
| 1 |
'use strict';
|
| 2 |
(() => {
|
| 3 |
+
const DATA = JSON.parse(document.getElementById('leaderboard-data').textContent);
|
| 4 |
const CITATIONS = JSON.parse(document.getElementById('citation-data').textContent);
|
| 5 |
const $ = (selector) => document.querySelector(selector);
|
| 6 |
const $$ = (selector) => [...document.querySelectorAll(selector)];
|
|
|
|
| 63 |
function renderResources() {
|
| 64 |
const b=benchmark();
|
| 65 |
$('#hero-links').innerHTML=[['Paper','paper'],['Dataset','data'],['Outputs','outputs'],['Code','github']].map(([label,key])=>`<a href="${esc(b.links[key])}" target="_blank" rel="noopener noreferrer">${label} <span aria-hidden="true">↗</span></a>`).join('');
|
|
|
|
|
|
|
| 66 |
$('#board-options').hidden=b.available_result_languages.length<2;
|
| 67 |
$$('[data-language]').forEach(button=>button.setAttribute('aria-pressed',button.dataset.language===languageCode()));
|
| 68 |
$('#group-filters').innerHTML=isPlus()?['all','closed','open','agentic'].map(g=>`<button data-group="${g}" aria-pressed="${state.group===g}">${g==='all'?'All models':groupLabels[g]}<span>${g==='all'?b.models.length:b.models.filter(m=>m.group===g).length}</span></button>`).join(''):'<span class="caption-text">All models</span>';
|
|
|
|
| 246 |
}
|
| 247 |
});
|
| 248 |
switchBenchmark(state.benchmark);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 249 |
})();
|
styles.css
CHANGED
|
@@ -47,10 +47,6 @@ main { padding-bottom: 48px; }
|
|
| 47 |
.board-section { scroll-margin-top: 24px; }
|
| 48 |
.benchmark-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 22px; }
|
| 49 |
.benchmark-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 24px; max-width: 100%; margin-left: auto; }
|
| 50 |
-
.submit-results-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 12px 22px; border: 1px solid #34577d; border-radius: 11px; background: #3b6088; color: #fff; font-size: 16px; font-weight: 650; white-space: nowrap; box-shadow: 0 4px 12px #2d527923; transition: background .15s, box-shadow .15s; }
|
| 51 |
-
.submit-results-button:hover { background: #2d4e74; color: #fff; box-shadow: 0 6px 16px #2d52792b; }
|
| 52 |
-
.submit-results-button:focus-visible { outline-color: #456c99; }
|
| 53 |
-
.submit-results-button .button-icon { width: 20px; height: 20px; }
|
| 54 |
.benchmark-tabs { display: inline-flex; gap: 6px; padding: 6px; background: #eaf0f0; border: 1px solid #dde6e7; border-radius: 14px; }
|
| 55 |
.benchmark-tabs button { display: flex; align-items: center; justify-content: center; padding: 10px 22px; min-height: 50px; border: 1px solid transparent; border-radius: 10px; font-size: 20px; font-weight: 650; color: #637982; letter-spacing: -.5px; transition: background .15s, color .15s; }
|
| 56 |
.benchmark-tabs button:hover { color: var(--ink); }
|
|
@@ -261,7 +257,6 @@ dialog::backdrop { background: #15384070; backdrop-filter: blur(5px); }
|
|
| 261 |
.benchmark-bar { display: block; padding-bottom: 18px; }
|
| 262 |
.benchmark-actions { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; }
|
| 263 |
.benchmark-actions .board-options { margin-top: 0; }
|
| 264 |
-
.submit-results-button { width: 100%; }
|
| 265 |
.benchmark-tabs { width: 100%; gap: 4px; padding: 5px; }
|
| 266 |
.benchmark-tabs button { flex: 1; padding: 9px 10px; min-height: 48px; font-size: 19px; }
|
| 267 |
.board-card { border-radius: 13px; }
|
|
@@ -322,8 +317,10 @@ dialog::backdrop { background: #15384070; backdrop-filter: blur(5px); }
|
|
| 322 |
.dimension-tabs button { padding: 7px 12px; min-height: 38px; border-radius: 7px; font-size: 14px; font-weight: 550; color: #718197; border: 1px solid transparent; }
|
| 323 |
.dimension-tabs button:hover { background: #eef2f8; color: #315778; }
|
| 324 |
.dimension-tabs button[aria-pressed=true] { background: #e8eef8; border-color: #cfdcef; color: #345980; }
|
| 325 |
-
.subcategory-filter { display:
|
| 326 |
-
.subcategory-filter select { color: #3f5771; background: white; border: 1px solid #d0dce7; border-radius: 8px; padding: 8px
|
|
|
|
|
|
|
| 327 |
.context-separator { padding: 0 10px; color: #a6b3bf; }
|
| 328 |
.column-popover { max-height: min(65vh, 540px); overflow-y: auto; width: 300px; }
|
| 329 |
.column-popover label { font-size: 14px; line-height: 1.5; }
|
|
@@ -377,8 +374,7 @@ dialog::backdrop { background: #15384070; backdrop-filter: blur(5px); }
|
|
| 377 |
.breakdown-controls { padding: 14px; gap: 14px; }
|
| 378 |
.dimension-tabs { gap: 4px; }
|
| 379 |
.dimension-tabs button { padding-inline: 9px; font-size: 13px; }
|
| 380 |
-
.subcategory-filter { width: 100%; gap: 6px; }
|
| 381 |
-
.subcategory-filter select { width: 100%; }
|
| 382 |
.footer-actions { flex-wrap: wrap; gap: 2px; }
|
| 383 |
.footer-actions .quiet-button { padding-inline: 8px; font-size: 12px; }
|
| 384 |
.section-heading { gap: 12px; margin-bottom: 20px; }
|
|
|
|
| 47 |
.board-section { scroll-margin-top: 24px; }
|
| 48 |
.benchmark-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 22px; }
|
| 49 |
.benchmark-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 24px; max-width: 100%; margin-left: auto; }
|
|
|
|
|
|
|
|
|
|
|
|
|
| 50 |
.benchmark-tabs { display: inline-flex; gap: 6px; padding: 6px; background: #eaf0f0; border: 1px solid #dde6e7; border-radius: 14px; }
|
| 51 |
.benchmark-tabs button { display: flex; align-items: center; justify-content: center; padding: 10px 22px; min-height: 50px; border: 1px solid transparent; border-radius: 10px; font-size: 20px; font-weight: 650; color: #637982; letter-spacing: -.5px; transition: background .15s, color .15s; }
|
| 52 |
.benchmark-tabs button:hover { color: var(--ink); }
|
|
|
|
| 257 |
.benchmark-bar { display: block; padding-bottom: 18px; }
|
| 258 |
.benchmark-actions { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; }
|
| 259 |
.benchmark-actions .board-options { margin-top: 0; }
|
|
|
|
| 260 |
.benchmark-tabs { width: 100%; gap: 4px; padding: 5px; }
|
| 261 |
.benchmark-tabs button { flex: 1; padding: 9px 10px; min-height: 48px; font-size: 19px; }
|
| 262 |
.board-card { border-radius: 13px; }
|
|
|
|
| 317 |
.dimension-tabs button { padding: 7px 12px; min-height: 38px; border-radius: 7px; font-size: 14px; font-weight: 550; color: #718197; border: 1px solid transparent; }
|
| 318 |
.dimension-tabs button:hover { background: #eef2f8; color: #315778; }
|
| 319 |
.dimension-tabs button[aria-pressed=true] { background: #e8eef8; border-color: #cfdcef; color: #345980; }
|
| 320 |
+
.subcategory-filter { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; width: 540px; max-width: 100%; flex: 0 0 auto; font-size: 13px; color: #78899d; }
|
| 321 |
+
.subcategory-filter select { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 44px; color: #3f5771; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%2378899d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center; border: 1px solid #d0dce7; border-radius: 8px; padding: 8px 46px 8px 14px; font-size: 14px; }
|
| 322 |
+
.subcategory-filter select:hover { border-color: #9eb2ca; }
|
| 323 |
+
.subcategory-filter select:focus-visible { outline: 2px solid #dce6f3; outline-offset: 2px; border-color: #8aa4c7; }
|
| 324 |
.context-separator { padding: 0 10px; color: #a6b3bf; }
|
| 325 |
.column-popover { max-height: min(65vh, 540px); overflow-y: auto; width: 300px; }
|
| 326 |
.column-popover label { font-size: 14px; line-height: 1.5; }
|
|
|
|
| 374 |
.breakdown-controls { padding: 14px; gap: 14px; }
|
| 375 |
.dimension-tabs { gap: 4px; }
|
| 376 |
.dimension-tabs button { padding-inline: 9px; font-size: 13px; }
|
| 377 |
+
.subcategory-filter { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 6px; }
|
|
|
|
| 378 |
.footer-actions { flex-wrap: wrap; gap: 2px; }
|
| 379 |
.footer-actions .quiet-button { padding-inline: 8px; font-size: 12px; }
|
| 380 |
.section-heading { gap: 12px; margin-bottom: 20px; }
|