Skip to content

Commit cf1322e

Browse files
carlosejimenezcarlosejimenez
committed
Update mobile view
1 parent fb46bb1 commit cf1322e

17 files changed

+340
-204
lines changed

‎css/components.css‎

Lines changed: 153 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/**
2-
* Component styles for SWE-bench Website
3-
*/
4-
51
/* Buttons */
62
button,
73
.button {
@@ -223,6 +219,19 @@ button:focus,
223219
white-space: nowrap;
224220
}
225221

222+
/* Sticky header styles - consolidated */
223+
.scrollable thead th,
224+
.table-responsive thead th {
225+
background-color: var(--table-header-bg);
226+
box-shadow: 0 1px 0 var(--table-border);
227+
}
228+
229+
.dark-mode .scrollable thead th,
230+
.dark-mode .table-responsive thead th {
231+
background-color: var(--table-header-bg);
232+
box-shadow: 0 1px 0 var(--table-border);
233+
}
234+
226235
.table tbody tr {
227236
background-color: var(--color-background);
228237
transition: background-color var(--transition-fast);
@@ -267,23 +276,69 @@ button:focus,
267276
table-layout: fixed;
268277
}
269278

279+
/* Sticky header styles for standalone scrollable */
280+
.scrollable thead {
281+
position: sticky;
282+
top: 0;
283+
z-index: 10;
284+
}
285+
286+
/* Shadow for sticky headers */
287+
.scrollable thead::after {
288+
content: '';
289+
position: absolute;
290+
left: 0;
291+
right: 0;
292+
bottom: 0;
293+
height: 2px;
294+
background: rgba(0, 0, 0, 0.05);
295+
}
296+
297+
.dark-mode .scrollable thead::after {
298+
background: rgba(255, 255, 255, 0.05);
299+
}
300+
270301
.data-table {
271302
width: 100%;
272303
table-layout: auto;
273304
}
274305

275306
.data-table th,
276307
.data-table td {
277-
white-space: nowrap;
308+
white-space: normal;
309+
}
310+
311+
/* Model name and leaderboard specific styles */
312+
.model-name {
313+
display: inline-block;
314+
white-space: normal;
315+
word-wrap: break-word;
316+
line-height: 1.4;
317+
hyphens: auto;
318+
overflow-wrap: break-word;
319+
}
320+
321+
.model-badges {
322+
display: flex;
323+
flex-wrap: wrap;
324+
gap: 2px;
325+
margin-right: 5px;
278326
}
279327

280-
/* Make the model column (first column) expand to fill available space */
328+
.model-badges span {
329+
line-height: 1;
330+
}
331+
332+
/* Column sizing for tables */
281333
.table th:first-child,
282334
.table td:first-child {
283-
width: 100%;
335+
width: 40%;
336+
min-width: 180px;
337+
max-width: 350px;
338+
white-space: normal;
339+
word-wrap: break-word;
284340
}
285341

286-
/* Set fixed widths for other columns to prevent them from expanding */
287342
.table th:not(:first-child),
288343
.table td:not(:first-child) {
289344
width: 1%;
@@ -495,12 +550,91 @@ button:focus,
495550
}
496551

497552
/* Responsive adjustments */
553+
@media (min-width: 992px) {
554+
/* On desktop */
555+
.table-responsive {
556+
overflow-x: visible;
557+
overflow-y: auto;
558+
max-height: 60vh;
559+
}
560+
561+
/* Convert scrollable to normal table when inside table-responsive */
562+
.table-responsive .scrollable {
563+
display: table;
564+
overflow: visible;
565+
max-height: none;
566+
}
567+
568+
/* Sticky headers for table-responsive */
569+
.table-responsive thead {
570+
position: sticky;
571+
top: 0;
572+
z-index: 10;
573+
}
574+
575+
/* Shadow for table-responsive sticky headers */
576+
.table-responsive thead::after {
577+
content: '';
578+
position: absolute;
579+
left: 0;
580+
right: 0;
581+
bottom: 0;
582+
height: 2px;
583+
background: rgba(0, 0, 0, 0.05);
584+
}
585+
586+
.dark-mode .table-responsive thead::after {
587+
background: rgba(255, 255, 255, 0.05);
588+
}
589+
590+
/* Allow table to take full width on desktop */
591+
.data-table {
592+
min-width: auto;
593+
}
594+
595+
/* Ensure first column doesn't take too much space on desktop */
596+
.table th:first-child,
597+
.table td:first-child {
598+
max-width: 40%;
599+
}
600+
}
601+
602+
@media (max-width: 992px) {
603+
/* On mobile and tablets */
604+
.table-responsive {
605+
overflow-x: auto;
606+
overflow-y: auto;
607+
max-height: 60vh;
608+
margin-bottom: 1rem;
609+
-webkit-overflow-scrolling: touch;
610+
}
611+
612+
/* Convert scrollable to normal table when inside table-responsive */
613+
.table-responsive .scrollable {
614+
display: table;
615+
overflow: visible;
616+
max-height: none;
617+
}
618+
619+
/* Sticky headers for table-responsive */
620+
.table-responsive thead {
621+
position: sticky;
622+
top: 0;
623+
z-index: 10;
624+
}
625+
}
626+
498627
@media (max-width: 576px) {
628+
/* Small mobile devices */
499629
.table {
500630
display: block;
501631
overflow-x: auto;
502632
}
503633

634+
.model-name {
635+
font-size: 0.85rem;
636+
}
637+
504638
.tabs {
505639
flex-direction: column;
506640
border-bottom: none;
@@ -660,8 +794,7 @@ button:focus,
660794
.info-section,
661795
.post-info,
662796
.info-box,
663-
.benchmark-info,
664-
.leaderboard-notes {
797+
.benchmark-info {
665798
background-color: var(--color-background-alt);
666799
border-radius: var(--radius-md);
667800
padding: 1.25rem;
@@ -673,16 +806,24 @@ button:focus,
673806
.dark-mode .info-section,
674807
.dark-mode .post-info,
675808
.dark-mode .info-box,
676-
.dark-mode .benchmark-info,
677-
.dark-mode .leaderboard-notes {
809+
.dark-mode .benchmark-info {
678810
background-color: var(--gray-800);
679811
border-color: var(--gray-700);
680812
}
681813

682814
/* Leaderboard specific styles */
683815
.leaderboard-notes {
816+
background-color: var(--color-background-alt);
817+
border-radius: var(--radius-md);
684818
padding: 1.5rem;
685819
margin: 1.5rem 0;
820+
border: 1.5px solid var(--color-border);
821+
transition: background-color 0.3s ease, border-color 0.3s ease;
822+
}
823+
824+
.dark-mode .leaderboard-notes {
825+
background-color: var(--gray-800);
826+
border-color: var(--gray-700);
686827
}
687828

688829
.leaderboard-notes p {

‎css/core.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/**
2-
* Core styles for SWE-bench Website
3-
*/
4-
51
/* Normalize (from vendors) */
62
@import 'vendors/normalize.css';
73

‎css/layout.css‎

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/**
2-
* Layout styles for SWE-bench Website
3-
*/
4-
51
/* Container */
62
.container {
73
width: 100%;
@@ -168,9 +164,24 @@
168164
justify-content: center;
169165
padding: 0.5rem;
170166
transition: color var(--transition-fast);
167+
z-index: calc(var(--z-fixed) + 1);
171168
}
172169

173-
.mobile-nav-toggle:hover {
170+
.sidebar-opener {
171+
display: none;
172+
background: none;
173+
border: none;
174+
font-size: 1.5rem;
175+
cursor: pointer;
176+
color: var(--color-text);
177+
align-items: center;
178+
justify-content: center;
179+
padding: 0.5rem;
180+
transition: color var(--transition-fast);
181+
z-index: calc(var(--z-fixed) + 1);
182+
}
183+
184+
.mobile-nav-toggle:hover, .sidebar-opener:hover {
174185
color: var(--color-text-secondary);
175186
}
176187

@@ -282,6 +293,23 @@
282293
color: var(--blue-300);
283294
}
284295

296+
.sidebar-nav a i.fa-external-link-alt {
297+
color: var(--color-link);
298+
transition: color var(--transition-fast);
299+
}
300+
301+
.sidebar-nav a:hover i.fa-external-link-alt {
302+
color: var(--color-link-hover);
303+
}
304+
305+
.dark-mode .sidebar-nav a i.fa-external-link-alt {
306+
color: var(--color-link);
307+
}
308+
309+
.dark-mode .sidebar-nav a:hover i.fa-external-link-alt {
310+
color: var(--color-link-hover);
311+
}
312+
285313
.nav-section-title {
286314
font-weight: var(--weight-bold);
287315
color: var(--color-text);
@@ -430,25 +458,38 @@
430458
margin-left: 0;
431459
padding-left: 0;
432460
width: 100%;
461+
padding-top: calc(var(--header-height) + 1rem);
433462
}
434463

435464
.sidebar {
436465
transform: translateX(-100%);
437466
box-shadow: var(--shadow-lg);
467+
width: 80%;
438468
}
439469

440470
.sidebar.open {
441471
transform: translateX(0);
442472
}
443473

444474
.mobile-header,
445-
.mobile-nav-toggle {
475+
.mobile-nav-toggle,
476+
.sidebar-opener {
446477
display: flex;
447478
}
448479

480+
.mobile-header .mobile-nav-toggle,
481+
.mobile-header .sidebar-opener {
482+
display: flex;
483+
position: static;
484+
}
485+
486+
.mobile-nav-toggle:not(.sidebar .mobile-nav-toggle) {
487+
position: static;
488+
}
489+
449490
.content-wrapper {
450-
padding-top: calc(var(--header-height) + 1rem);
451491
padding: 1rem;
492+
padding-top: calc(var(--header-height) + 1rem);
452493
}
453494

454495
.sidebar-nav {

‎css/main.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/**
2-
* Main CSS file for SWE-bench Website
3-
*/
4-
51
/* Core styles */
62
@import 'core.css';
73

0 commit comments

Comments
 (0)