mirror of
https://github.com/renbaoshuo/S2OJ.git
synced 2024-11-21 21:08:42 +00:00
refactor(submission): use bs5 accordion
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
41a02e6f2d
commit
009113a79a
GPG Key ID:
00CB9680AB29F51A
@ -441,7 +441,11 @@ class JudgmentDetailsPrinter {
|
||||
if ($node->hasAttribute("errcode")) {
|
||||
echo "<pre>", "Judgment Failed. Error Code: ", $node->getAttribute("errcode"), ".</pre>";
|
||||
}
|
||||
echo '<div id="', $this->name, '_details_accordion">';
|
||||
if ($this->styler->accordion_flush) {
|
||||
echo '<div id="', $this->name, '_details_accordion" class="accordion accordion-flush">';
|
||||
} else {
|
||||
echo '<div id="', $this->name, '_details_accordion" class="accordion">';
|
||||
}
|
||||
$this->_print_c($node);
|
||||
if ($this->styler->show_small_tip) {
|
||||
echo '<div class="my-2 px-2 text-end text-muted">', '小提示：点击横条可展开更详细的信息', '</div>';
|
||||
@ -458,19 +462,22 @@ class JudgmentDetailsPrinter {
|
||||
$subtask_type = $this->_get_attr($node, 'type', 'packed');
|
||||
$subtask_used_time_type = $this->_get_attr($node, 'used-time-type', 'sum');
|
||||
|
||||
echo '<div class="card border-0 rounded-0 border-bottom ', $this->styler->getTestInfoClass($subtask_info), '">';
|
||||
echo '<div class="accordion accordion-flush border-bottom">';
|
||||
echo '<div class="accordion-item ', $this->styler->getTestInfoClass($subtask_info), '">';
|
||||
|
||||
$accordion_parent = "{$this->name}_details_accordion";
|
||||
$accordion_collapse = "{$accordion_parent}_collapse_subtask_{$subtask_num}";
|
||||
$accordion_collapse_accordion = "{$accordion_collapse}_accordion";
|
||||
echo '<div class="card-header uoj-submission-result-item bg-transparent rounded-0 border-0" data-bs-toggle="collapse" data-bs-parent="#', $accordion_parent, '" data-bs-target="#', $accordion_collapse, '">';
|
||||
|
||||
echo '<div class="row">';
|
||||
echo '<div class="accordion-header">';
|
||||
echo '<button type="button" class="accordion-button py-2 px-3 collapsed uoj-submission-result-item" data-bs-toggle="collapse" data-bs-parent="#', $accordion_parent, '" data-bs-target="#', $accordion_collapse, '">';
|
||||
|
||||
echo '<div class="row w-100">';
|
||||
echo '<div class="col-sm-4">';
|
||||
if ($subtask_title !== '') {
|
||||
echo '<h3 class="fs-5">', $subtask_title, ': ', '</h3>';
|
||||
echo '<h3 class="fs-5 mb-0">', $subtask_title, ': ', '</h3>';
|
||||
} else {
|
||||
echo '<h3 class="fs-5">', 'Subtask #', $subtask_num, ': ', '</h3>';
|
||||
echo '<h3 class="fs-5 mb-0">', 'Subtask #', $subtask_num, ': ', '</h3>';
|
||||
}
|
||||
echo '</div>';
|
||||
|
||||
@ -502,12 +509,13 @@ class JudgmentDetailsPrinter {
|
||||
}
|
||||
|
||||
echo '</div>';
|
||||
echo '</button>';
|
||||
echo '</div>';
|
||||
|
||||
echo '<div id="', $accordion_collapse, '" class="card-collapse collapse">';
|
||||
echo '<div class="card-body pt-0">';
|
||||
echo '<div id="', $accordion_collapse, '" class="accordion-collapse collapse" data-bs-parent="#', $accordion_parent, '">';
|
||||
echo '<div class="accordion-body">';
|
||||
|
||||
echo '<div id="', $accordion_collapse_accordion, '" class="border rounded overflow-hidden">';
|
||||
echo '<div id="', $accordion_collapse_accordion, '" class="accordion uoj-subtask-test-item">';
|
||||
$this->subtask_num = $subtask_num;
|
||||
$this->_print_c($node);
|
||||
$this->subtask_num = null;
|
||||
@ -516,6 +524,7 @@ class JudgmentDetailsPrinter {
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
} elseif ($node->nodeName == 'test') {
|
||||
$test_info = $node->getAttribute('info');
|
||||
$test_num = $node->getAttribute('num');
|
||||
@ -523,7 +532,7 @@ class JudgmentDetailsPrinter {
|
||||
$test_time = $this->_get_attr($node, 'time', -1);
|
||||
$test_memory = $this->_get_attr($node, 'memory', -1);
|
||||
|
||||
echo '<div class="card border-0 rounded-0 border-bottom ', $this->styler->getTestInfoClass($test_info), '">';
|
||||
echo '<div class="accordion-item ', $this->styler->getTestInfoClass($test_info), '">';
|
||||
|
||||
$accordion_parent = "{$this->name}_details_accordion";
|
||||
if ($this->subtask_num != null) {
|
||||
@ -534,16 +543,18 @@ class JudgmentDetailsPrinter {
|
||||
$accordion_collapse .= "_in_subtask_{$this->subtask_num}";
|
||||
}
|
||||
if (!$this->styler->shouldFadeDetails($test_info)) {
|
||||
echo '<div class="card-header uoj-submission-result-item bg-transparent rounded-0 border-0" data-bs-toggle="collapse" data-bs-parent="#', $accordion_parent, '" data-bs-target="#', $accordion_collapse, '">';
|
||||
echo '<div class="accordion-header">';
|
||||
echo '<button class="accordion-button py-2 px-3 collapsed uoj-submission-result-item" data-bs-toggle="collapse" data-bs-parent="#', $accordion_parent, '" data-bs-target="#', $accordion_collapse, '">';
|
||||
} else {
|
||||
echo '<div class="card-header uoj-submission-result-item bg-transparent rounded-0 border-0">';
|
||||
echo '<div class="accordion-header">';
|
||||
echo '<button type="button" class="accordion-button py-2 px-3 collapsed uoj-submission-result-item">';
|
||||
}
|
||||
echo '<div class="row">';
|
||||
echo '<div class="row w-100">';
|
||||
echo '<div class="col-sm-4">';
|
||||
if ($test_num > 0) {
|
||||
echo '<h4 class="fs-5">', 'Test #', $test_num, ': ', '</h4>';
|
||||
echo '<h4 class="fs-5 mb-0">', 'Test #', $test_num, '</h4>';
|
||||
} else {
|
||||
echo '<h4 class="fs-5">', 'Extra Test:', '</h4>';
|
||||
echo '<h4 class="fs-5 mb-0">', 'Extra Test', '</h4>';
|
||||
}
|
||||
echo '</div>';
|
||||
|
||||
@ -575,15 +586,16 @@ class JudgmentDetailsPrinter {
|
||||
}
|
||||
|
||||
echo '</div>';
|
||||
echo '</button>';
|
||||
echo '</div>';
|
||||
|
||||
if (!$this->styler->shouldFadeDetails($test_info)) {
|
||||
$accordion_collapse_class = 'card-collapse collapse';
|
||||
$accordion_collapse_class = 'accordion-collapse collapse';
|
||||
if ($this->styler->collapse_in) {
|
||||
$accordion_collapse_class .= ' in';
|
||||
}
|
||||
echo '<div id="', $accordion_collapse, '" class="uoj-testcase ', $accordion_collapse_class, '" data-test=' . $test_num . '>';
|
||||
echo '<div class="card-body">';
|
||||
echo '<div id="', $accordion_collapse, '" class="uoj-testcase ', $accordion_collapse_class, '" data-test="', $test_num, '" data-bs-parent="#', $accordion_parent, '">';
|
||||
echo '<div class="accordion-body">';
|
||||
|
||||
$this->_print_c($node);
|
||||
|
||||
@ -597,18 +609,20 @@ class JudgmentDetailsPrinter {
|
||||
$test_time = $this->_get_attr($node, 'time', -1);
|
||||
$test_memory = $this->_get_attr($node, 'memory', -1);
|
||||
|
||||
echo '<div class="card ', $this->styler->getTestInfoClass($test_info), ' mb-3">';
|
||||
echo '<div class="accordion-item ', $this->styler->getTestInfoClass($test_info), ' mb-3">';
|
||||
|
||||
$accordion_parent = "{$this->name}_details_accordion";
|
||||
$accordion_collapse = "{$accordion_parent}_collapse_custom_test";
|
||||
if (!$this->styler->shouldFadeDetails($test_info)) {
|
||||
echo '<div class="card-header uoj-submission-result-item bg-transparent rounded-0 border-0" data-bs-toggle="collapse" data-bs-parent="#', $accordion_parent, '" data-bs-target="#', $accordion_collapse, '">';
|
||||
echo '<div class="accordion-header">';
|
||||
echo '<button type="button" class="accordion-button py-2 px-3 collapsed uoj-submission-result-item" data-bs-toggle="collapse" data-bs-parent="#', $accordion_parent, '" data-bs-target="#', $accordion_collapse, '">';
|
||||
} else {
|
||||
echo '<div class="card-header uoj-submission-result-item bg-transparent rounded-0 border-0">';
|
||||
echo '<div class="accordion-header">';
|
||||
echo '<button class="accordion-button py-2 px-3 collapsed uoj-submission-result-item">';
|
||||
}
|
||||
echo '<div class="row">';
|
||||
echo '<div class="row w-100">';
|
||||
echo '<div class="col-sm-4">';
|
||||
echo '<h4 class="card-title">', 'Custom Test: ', '</h4>';
|
||||
echo '<h4 class="card-title">', 'Custom Test', '</h4>';
|
||||
echo '</div>';
|
||||
|
||||
echo '<div class="col-sm-4 uoj-status-text">';
|
||||
@ -629,15 +643,16 @@ class JudgmentDetailsPrinter {
|
||||
}
|
||||
|
||||
echo '</div>';
|
||||
echo '</button>';
|
||||
echo '</div>';
|
||||
|
||||
if (!$this->styler->shouldFadeDetails($test_info)) {
|
||||
$accordion_collapse_class = 'card-collapse collapse';
|
||||
$accordion_collapse_class = 'accordion-collapse collapse';
|
||||
if ($this->styler->collapse_in) {
|
||||
$accordion_collapse_class .= ' in';
|
||||
}
|
||||
echo '<div id="', $accordion_collapse, '" class="', $accordion_collapse_class, '">';
|
||||
echo '<div class="card-body">';
|
||||
echo '<div id="', $accordion_collapse, '" class="', $accordion_collapse_class, '" data-bs-parent="#', $accordion_parent, '">';
|
||||
echo '<div class="accordion-body">';
|
||||
|
||||
$this->_print_c($node);
|
||||
|
||||
@ -647,22 +662,22 @@ class JudgmentDetailsPrinter {
|
||||
echo '</div>';
|
||||
}
|
||||
} elseif ($node->nodeName == 'in') {
|
||||
echo '<h4 class="fs-6"><span>input: </span></h4>';
|
||||
echo '<h4 class="fs-6 fw-bold">输入文件</h4>';
|
||||
echo '<pre class="bg-light p-3 rounded">', "\n";
|
||||
$this->_print_c($node);
|
||||
echo "\n</pre>";
|
||||
} elseif ($node->nodeName == 'out') {
|
||||
echo '<h4 class="fs-6"><span>output: </span></h4>';
|
||||
echo '<h4 class="fs-6 fw-bold">程序输出</h4>';
|
||||
echo '<pre class="bg-light p-3 rounded">', "\n";
|
||||
$this->_print_c($node);
|
||||
echo "\n</pre>";
|
||||
} elseif ($node->nodeName == 'ans') {
|
||||
echo '<h4 class="fs-6"><span>answer: </span></h4>';
|
||||
echo '<h4 class="fs-6 fw-bold">答案文件</h4>';
|
||||
echo '<pre class="bg-light p-3 rounded">', "\n";
|
||||
$this->_print_c($node);
|
||||
echo "\n</pre>";
|
||||
} elseif ($node->nodeName == 'res') {
|
||||
echo '<h4 class="fs-6"><span>result: </span></h4>';
|
||||
echo '<h4 class="fs-6 fw-bold"><span>检查器信息</span></h4>';
|
||||
echo '<pre class="bg-light p-3 rounded">', "\n";
|
||||
if ($node->hasChildNodes()) {
|
||||
$this->_print_c($node);
|
||||
@ -725,17 +740,18 @@ function echoJudgementDetails($raw_details, $styler, $name) {
|
||||
class SubmissionDetailsStyler {
|
||||
public $show_score = true;
|
||||
public $show_small_tip = true;
|
||||
public $accordion_flush = true;
|
||||
public $collapse_in = false;
|
||||
public $fade_all_details = false;
|
||||
public function getTestInfoClass($info) {
|
||||
if ($info == 'Accepted' || $info == 'Extra Test Passed') {
|
||||
return 'card-uoj-accepted';
|
||||
return 'uoj-status-accepted';
|
||||
} elseif ($info == 'Time Limit Exceeded') {
|
||||
return 'card-uoj-tle';
|
||||
return 'uoj-status-tle';
|
||||
} elseif ($info == 'Acceptable Answer') {
|
||||
return 'card-uoj-acceptable-answer';
|
||||
return 'uoj-status-acceptable-answer';
|
||||
} else {
|
||||
return 'card-uoj-wrong';
|
||||
return 'uoj-status-wrong';
|
||||
}
|
||||
}
|
||||
public function getTestInfoIcon($test_info) {
|
||||
@ -758,18 +774,18 @@ class SubmissionDetailsStyler {
|
||||
class CustomTestSubmissionDetailsStyler {
|
||||
public $show_score = true;
|
||||
public $show_small_tip = false;
|
||||
public $accordion_flush = false;
|
||||
public $collapse_in = true;
|
||||
public $fade_all_details = false;
|
||||
public $ioi_contest_is_running = false;
|
||||
public function getTestInfoClass($info) {
|
||||
if ($info == 'Success') {
|
||||
return 'card-uoj-accepted';
|
||||
return 'uoj-status-accepted';
|
||||
} elseif ($info == 'Time Limit Exceeded') {
|
||||
return 'card-uoj-tle';
|
||||
return 'uoj-status-tle';
|
||||
} elseif ($info == 'Acceptable Answer') {
|
||||
return 'card-uoj-acceptable-answer';
|
||||
return 'uoj-status-acceptable-answer';
|
||||
} else {
|
||||
return 'card-uoj-wrong';
|
||||
return 'uoj-status-wrong';
|
||||
}
|
||||
}
|
||||
public function getTestInfoIcon($test_info) {
|
||||
@ -793,16 +809,17 @@ class HackDetailsStyler {
|
||||
public $show_score = false;
|
||||
public $show_small_tip = false;
|
||||
public $collapse_in = true;
|
||||
public $accordion_flush = false;
|
||||
public $fade_all_details = false;
|
||||
public function getTestInfoClass($info) {
|
||||
if ($info == 'Accepted' || $info == 'Extra Test Passed') {
|
||||
return 'card-uoj-accepted';
|
||||
return 'uoj-status-accepted';
|
||||
} elseif ($info == 'Time Limit Exceeded') {
|
||||
return 'card-uoj-tle';
|
||||
return 'uoj-status-tle';
|
||||
} elseif ($info == 'Acceptable Answer') {
|
||||
return 'card-uoj-acceptable-answer';
|
||||
return 'uoj-status-acceptable-answer';
|
||||
} else {
|
||||
return 'card-uoj-wrong';
|
||||
return 'uoj-status-wrong';
|
||||
}
|
||||
}
|
||||
public function getTestInfoIcon($test_info) {
|
||||
|
||||
@ -149,26 +149,115 @@ h6,
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-uoj-accepted > .card-header:hover,
|
||||
.card-uoj-accepted > div.card-header > div > .uoj-status-text {
|
||||
.uoj-submission-result-item.accordion-button:not(.collapsed)::after {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.uoj-submission-result-item.accordion-button:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.uoj-status-accepted > .accordion-header > .accordion-button:hover,
|
||||
.uoj-status-accepted > .accordion-header > .accordion-button:not(.collapsed),
|
||||
.uoj-status-accepted
|
||||
> .accordion-header
|
||||
> .accordion-button
|
||||
> div
|
||||
> .uoj-status-text {
|
||||
color: #25ad40;
|
||||
}
|
||||
|
||||
.card-uoj-acceptable-answer > .card-header:hover,
|
||||
.card-uoj-acceptable-answer > div.card-header > div > .uoj-status-text {
|
||||
.uoj-status-accepted > .accordion-header > .accordion-button:not(.collapsed) {
|
||||
background-color: #25ad4020;
|
||||
}
|
||||
|
||||
.uoj-status-acceptable-answer > .accordion-header > .accordion-button:hover,
|
||||
.uoj-status-acceptable-answer
|
||||
> .accordion-header
|
||||
> .accordion-button:not(.collapsed),
|
||||
.uoj-status-acceptable-answer
|
||||
> .accordion-header
|
||||
> .accordion-button
|
||||
> div
|
||||
> .uoj-status-text {
|
||||
color: #01bab2;
|
||||
}
|
||||
|
||||
.card-uoj-tle > .card-header:hover,
|
||||
.card-uoj-tle > div.card-header > div > .uoj-status-text {
|
||||
.uoj-status-acceptable-answer
|
||||
> .accordion-header
|
||||
> .accordion-button:not(.collapsed) {
|
||||
background-color: #01bab220;
|
||||
}
|
||||
|
||||
.uoj-status-tle > .accordion-header > .accordion-button:hover,
|
||||
.uoj-status-tle > .accordion-header > .accordion-button::not(.collapsed),
|
||||
.uoj-status-tle
|
||||
> .accordion-header
|
||||
> .accordion-button
|
||||
> div
|
||||
> .uoj-status-text {
|
||||
color: #f4a460;
|
||||
}
|
||||
|
||||
.card-uoj-wrong > .card-header:hover,
|
||||
.card-uoj-wrong > div.card-header > div > .uoj-status-text {
|
||||
.uoj-status-tle > .accordion-header > .accordion-button:not(.collapsed) {
|
||||
background-color: #f4a46020;
|
||||
}
|
||||
|
||||
.uoj-status-wrong > .accordion-header > .accordion-button:hover,
|
||||
.uoj-status-wrong > .accordion-header > .accordion-button:not(.collapsed),
|
||||
.uoj-status-wrong
|
||||
> .accordion-header
|
||||
> .accordion-button
|
||||
> div
|
||||
> .uoj-status-text {
|
||||
color: #ff4f4f;
|
||||
}
|
||||
|
||||
.uoj-status-wrong > .accordion-header > .accordion-button:not(.collapsed) {
|
||||
background-color: #ff4f4f20;
|
||||
}
|
||||
|
||||
.uoj-subtask-test-item.accordion:not(.accordion-flush) .accordion-item {
|
||||
border-left: var(--bs-accordion-border-width) solid
|
||||
var(--bs-accordion-border-color);
|
||||
border-right: var(--bs-accordion-border-width) solid
|
||||
var(--bs-accordion-border-color);
|
||||
}
|
||||
|
||||
.uoj-subtask-test-item.accordion:not(.accordion-flush)
|
||||
.accordion-item:first-child {
|
||||
border-top: var(--bs-accordion-border-width) solid
|
||||
var(--bs-accordion-border-color);
|
||||
}
|
||||
|
||||
.uoj-subtask-test-item.accordion:not(.accordion-flush)
|
||||
.accordion-item:last-child {
|
||||
border-bottom: var(--bs-accordion-border-width) solid
|
||||
var(--bs-accordion-border-color);
|
||||
}
|
||||
|
||||
.uoj-subtask-test-item.accordion:not(.accordion-flush)
|
||||
.accordion-item:first-of-type,
|
||||
.uoj-subtask-test-item.accordion:not(.accordion-flush)
|
||||
.accordion-item:first-of-type
|
||||
.accordion-button {
|
||||
border-top-left-radius: var(--bs-accordion-border-radius);
|
||||
border-top-right-radius: var(--bs-accordion-border-radius);
|
||||
}
|
||||
|
||||
.uoj-subtask-test-item.accordion:not(.accordion-flush)
|
||||
.accordion-item:last-of-type,
|
||||
.uoj-subtask-test-item.accordion:not(.accordion-flush)
|
||||
.accordion-item:last-of-type
|
||||
.accordion-button {
|
||||
border-bottom-left-radius: var(--bs-accordion-border-radius);
|
||||
border-bottom-right-radius: var(--bs-accordion-border-radius);
|
||||
}
|
||||
|
||||
.accordion-button.no-collapse::after {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
/* Markdown */
|
||||
|
||||
.markdown-body h1 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user