renjianzhexuejia commited on
Commit
027d464
·
verified ·
1 Parent(s): 5b76229

Unify task subcategory dropdown width and remove submission UI code

Browse files
Files changed (2) hide show
  1. app.js +1 -10
  2. styles.css +5 -9
app.js CHANGED
@@ -1,6 +1,6 @@
1
  'use strict';
2
  (() => {
3
- let 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,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: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #78899d; }
326
- .subcategory-filter select { color: #3f5771; background: white; border: 1px solid #d0dce7; border-radius: 8px; padding: 8px 32px 8px 12px; min-height: 40px; max-width: 100%; font-size: 14px; }
 
 
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; }