-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Leaderboard optimization and and blog 7&8 optimization (#224)
This PR contains two parts. 1. Leaderboard optimization by @HuanzhiMao , including adding the summary table, support expand/collapse, add vote feature, and style fix. 2. Blog 7&8 optimization by @CharlieJCJ , including formatting and grammar fix --------- Co-authored-by: Charlie Cheng-Jie Ji <[email protected]>
- Loading branch information
1 parent
63b88ca
commit 42c325e
Showing
10 changed files
with
1,467 additions
and
524 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| #model_info_dashboard { | ||
| width: 90%; | ||
| border-collapse: collapse; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| #model_info_dashboard th, | ||
| #model_info_dashboard td { | ||
| border: 1px solid #ddd; | ||
| padding: 8px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| #model_info_dashboard tbody tr:nth-child(1), | ||
| #model_info_dashboard tbody tr:nth-child(2), | ||
| #model_info_dashboard tbody tr:nth-child(4), | ||
| #model_info_dashboard tbody tr:nth-child(5), | ||
| #model_info_dashboard tbody tr:nth-child(6), | ||
| #model_info_dashboard tbody tr:nth-child(7), | ||
| #model_info_dashboard tbody tr:nth-child(8), | ||
| #model_info_dashboard tbody tr:nth-child(9), | ||
| #model_info_dashboard tbody tr:nth-child(10), | ||
| #model_info_dashboard tbody tr:nth-child(13), | ||
| #model_info_dashboard tbody tr:nth-child(14){ | ||
| background-color: white; | ||
| /* Lightest yellow for rank 1 */ | ||
| } | ||
|
|
||
|
|
||
| #model_info_dashboard tbody tr:nth-child(3), | ||
| #model_info_dashboard tbody tr:nth-child(11), | ||
| #model_info_dashboard tbody tr:nth-child(12), | ||
| #model_info_dashboard tbody tr:nth-child(15), | ||
| #model_info_dashboard tbody tr:nth-child(16), | ||
| #model_info_dashboard tbody tr:nth-child(17), | ||
| #model_info_dashboard tbody tr:nth-child(18){ | ||
| background-color: #DFEBEB; | ||
| /* Darker yellow for rank 3 */ | ||
| } | ||
|
|
||
| /* #model_info_dashboard td:nth-child(2) { | ||
| background-color: white; | ||
| } */ | ||
|
|
||
| /* #model_info_dashboard td:nth-child(6), | ||
| #model_info_dashboard td:nth-child(7), | ||
| #model_info_dashboard td:nth-child(8), | ||
| #model_info_dashboard td:nth-child(9) { | ||
| background-color: white; | ||
| } | ||
| #model_info_dashboard td:nth-child(10), | ||
| #model_info_dashboard td:nth-child(11), | ||
| #model_info_dashboard td:nth-child(12), | ||
| #model_info_dashboard td:nth-child(13) { | ||
| background-color:white; | ||
| } | ||
| #model_info_dashboard td:nth-child(14) { | ||
| background-color: white; | ||
| } */ | ||
|
|
||
|
|
||
|
|
||
| /* Ensure the table uses the full width of its container */ | ||
| table { | ||
| width: 100%; | ||
| table-layout: fixed; | ||
| border-collapse: collapse; | ||
| width: auto; /* Allows the table to expand naturally based on content */ | ||
| border-collapse: collapse; | ||
| table-layout: auto; /* Default layout for the table */ | ||
| } | ||
|
|
||
|
|
||
|
|
||
| #model_info_dashboard td, #model_info_dashboard th { | ||
| word-wrap: break-word; /* Allows words to break and wrap to the next line */ | ||
| overflow-wrap: break-word; /* Ensures wrapping at break points */ | ||
| padding: 8px; /* Adjust padding as needed */ | ||
| text-align: center; /* Keeps text centered, adjust as needed */ | ||
| border: 1px solid #ddd; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| .table-container { | ||
| overflow-x: auto; /* Enable horizontal scrolling */ | ||
| overflow-y: auto; /* Enable vertical scrolling */ | ||
| -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS devices */ | ||
| width: 100%; /* Full width of the parent */ | ||
| max-width: 100%; /* Ensure the container does not exceed the width of the parent */ | ||
| max-height: 500px; /* Set the maximum height of the table to 8 rows */ | ||
| display: block; | ||
| border: 1px solid #ddd; /* Optional: Adds a border for better visibility */ | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| .group1 col { | ||
| width: 5px; | ||
| } | ||
|
|
||
|
|
||
| .group2 col, .group3 col, .group4 col, .group5 col, .group6 col, .group7 col, .group8 col { | ||
| width: auto; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| #myChart { | ||
| display: block; | ||
| margin: auto; /* Center the canvas */ | ||
| width: 80%; /* Adjust the width to your preference */ | ||
| height: auto; /* This will maintain the aspect ratio */ | ||
| max-height: 600px; /* Optional: to ensure it doesn't get too tall */ | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
|
|
||
| @media only screen and (max-width: 768px) { | ||
| #myChart { | ||
| width: 100%; /* Adjust the width to your preference */ | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.