refactor: problem page with bs5
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Baoshuo Ren 2022-09-25 18:28:43 +08:00
parent 3a3d99cdc0
commit 3a26ee7092
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
7 changed files with 189 additions and 15 deletions

View File

@ -122,7 +122,7 @@ EOD;
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
</div>
<aside class="col">
<aside class="col mt-3 mt-md-0">
<?php
uojIncludeView('sidebar', array());
?>

View File

@ -55,6 +55,10 @@
}
}
if (!isset($_COOKIE['bootstrap4']) && !$contest) {
$REQUIRE_LIB['bootstrap5'] = '';
}
$submission_requirement = json_decode($problem['submission_requirement'], true);
$problem_extra_config = getProblemExtraConfig($problem);
$custom_test_requirement = getProblemCustomTestRequirement($problem);
@ -227,6 +231,13 @@ EOD
$problem_uploader = $limit['poster'] ?: $problem['uploader'];
?>
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
<div class="row">
<div class="col-sm-12 col-md-9">
<?php endif ?>
<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
<div class="row d-flex justify-content-center">
<span class="badge badge-secondary mr-1">时间限制:<?=$time_limit!=null?"$time_limit s":"N/A"?></span>
<span class="badge badge-secondary mr-1">空间限制:<?=$memory_limit!=null?"$memory_limit MB":"N/A"?></span>
@ -235,6 +246,12 @@ EOD
<div class="float-right">
<?= getClickZanBlock('P', $problem['id'], $problem['zan']) ?>
</div>
<?php endif ?>
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
<div class="card card-default mb-2">
<div class="card-body">
<?php endif ?>
<?php if ($contest): ?>
<div class="page-header row">
@ -253,14 +270,37 @@ $('#contest-countdown').countdown(<?= $contest['end_time']->getTimestamp() - UOJ
</script>
<?php endif ?>
<?php else: ?>
<h1 class="page-header text-center">#<?= $problem['id']?>. <?= $problem['title'] ?></h1>
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
<h1 class="h2 card-title text-center">
<?php else: ?>
<h1 class="page-header text-center">
<?php endif ?>
#<?= $problem['id']?>. <?= $problem['title'] ?>
</h1>
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
<div class="text-center small">
时间限制: <?= $time_limit != null ? "$time_limit s" : "N/A" ?>
&emsp;
空间限制: <?= $memory_limit != null ? "$memory_limit MB" : "N/A" ?>
&emsp;
上传者: <?= getUserLink($problem_uploader ?: "root") ?>
</div>
<hr>
<?php endif ?>
<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
<div class="btn-group float-right" role="group">
<a role="button" class="btn btn-primary" href="<?= HTML::url("/download.php?type=problem&id={$problem['id']}") ?>"><span class="glyphicon glyphicon-tasks"></span> 测试数据</a>
<a role="button" class="btn btn-primary" href="<?= HTML::url("/download.php?type=attachment&id={$problem['id']}") ?>"><span class="glyphicon glyphicon-download-alt"></span> 附件下载</a>
<a role="button" class="btn btn-info" href="/problem/<?= $problem['id'] ?>/statistics"><span class="glyphicon glyphicon-stats"></span> <?= UOJLocale::get('problems::statistics') ?></a>
</div>
<?php endif ?>
<?php endif ?>
<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" href="#tab-statement" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-book"></span> <?= UOJLocale::get('problems::statement') ?></a></li>
<li class="nav-item"><a class="nav-link" href="#tab-submit-answer" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-upload"></span> <?= UOJLocale::get('problems::submit') ?></a></li>
@ -274,7 +314,12 @@ $('#contest-countdown').countdown(<?= $contest['end_time']->getTimestamp() - UOJ
<li class="nav-item"><a class="nav-link" href="/contest/<?= $contest['id'] ?>" role="tab"><?= UOJLocale::get('contests::back to the contest') ?></a></li>
<?php endif ?>
</ul>
<?php endif ?>
<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
<link rel="stylesheet" type="text/css" href="<?= HTML::url('/css/markdown.css') ?>">
<?php endif ?>
<div class="tab-content">
<div class="tab-pane active" id="tab-statement">
<article class="mt-3 markdown-body"><?= $problem_content['statement'] ?></article>
@ -295,4 +340,85 @@ $('#contest-countdown').countdown(<?= $contest['end_time']->getTimestamp() - UOJ
</div>
<?php endif ?>
</div>
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
</div>
</div>
<?php endif ?>
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
</div>
<aside class="col">
<div class="card card-default mb-2">
<ul class="nav nav-pills nav-fill flex-column" role="tablist">
<li class="nav-item text-start">
<a href="#tab-statement" class="nav-link active" role="tab" data-bs-toggle="pill" data-bs-target="#tab-statement">
<i class="bi bi-journal-text"></i>
<?= UOJLocale::get('problems::statement') ?>
</a>
</li>
<li class="nav-item text-start">
<a href="#tab-submit-answer" class="nav-link" role="tab" data-bs-toggle="pill" data-bs-target="#tab-submit-answer">
<i class="bi bi-upload"></i>
<?= UOJLocale::get('problems::submit') ?>
</a>
</li>
<?php if ($custom_test_requirement): ?>
<li class="nav-item text-start">
<a class="nav-link" href="#tab-custom-test" role="tab" data-bs-toggle="pill" data-bs-target="#tab-custom-test">
<i class="bi bi-braces"></i>
<?= UOJLocale::get('problems::custom test') ?>
</a>
</li>
<?php endif ?>
<?php if (hasProblemPermission($myUser, $problem)): ?>
<li class="nav-item text-start">
<a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">
<i class="bi bi-sliders"></i>
<?= UOJLocale::get('problems::manage') ?>
</a>
</li>
<?php endif ?>
<?php if ($contest): ?>
<li class="nav-item">
<a class="nav-link" href="/contest/<?= $contest['id'] ?>" role="tab">
<i class="bi bi-arrow-90deg-left"></i>
<?= UOJLocale::get('contests::back to the contest') ?>
</a>
</li>
<?php endif ?>
</ul>
</div>
<div class="card card-default mb-2">
<ul class="nav nav-fill flex-column">
<li class="nav-item text-start">
<a class="nav-link" href="<?= HTML::url("/download.php?type=problem&id={$problem['id']}") ?>">
<i class="bi bi-hdd-stack"></i>
测试数据
</a>
</li>
<li class="nav-item text-start">
<a class="nav-link" href="<?= HTML::url("/download.php?type=attachment&id={$problem['id']}") ?>">
<i class="bi bi-download"></i>
附件下载
</a>
</li>
<li class="nav-item text-start">
<a class="nav-link" href="/problem/<?= $problem['id'] ?>/statistics">
<i class="bi bi-graph-up"></i>
<?= UOJLocale::get('problems::statistics') ?>
</a>
</li>
</ul>
</div>
<?php uojIncludeView('sidebar', array()); ?>
</aside>
</div>
<?php endif ?>
<?php echoUOJPageFooter() ?>

View File

@ -151,7 +151,7 @@ EOD;
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
</div>
<aside class="col">
<aside class="col mt-3 mt-md-0">
<?php
uojIncludeView('sidebar', array());
?>

View File

@ -151,7 +151,7 @@ EOD;
$pag = new Paginator($pag_config);
$div_classes = isset($REQUIRE_LIB['bootstrap5'])
? array('card', 'mb-3')
? array('card', 'mb-3', 'overflow-auto')
: array('table-responsive');
$table_classes = isset($REQUIRE_LIB['bootstrap5'])
? array('table', 'uoj-table', 'mb-0')
@ -284,7 +284,7 @@ $('#input-show_submit_mode').click(function() {
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
</div>
<aside class="col">
<aside class="col mt-3 mt-md-0">
<?php
uojIncludeView('sidebar', array());
?>

View File

@ -829,15 +829,29 @@ class JudgementDetailsPrinter {
$test_time = $node->getAttribute('time');
$test_memory = $node->getAttribute('memory');
echo '<div class="card ', $this->styler->getTestInfoClass($test_info), ' mb-3">';
echo '<div class="card ', $this->styler->getTestInfoClass($test_info);
if (isset($REQUIRE_LIB['bootstrap5'])) {
} else {
}
echo ' 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" data-toggle="collapse" data-parent="#', $accordion_parent, '" data-target="#', $accordion_collapse, '">';
} else {
echo '<div class="card-header">';
echo '<div class="card-header ';
if (isset($REQUIRE_LIB['bootstrap5'])) {
echo ' uoj-submission-result-item bg-transparent rounded-0 border-0 ';
}
echo '" ';
if (!$this->styler->shouldFadeDetails($test_info)) {
if (isset($REQUIRE_LIB['bootstrap5'])) {
echo ' data-bs-toggle="collapse" data-bs-parent="#', $accordion_parent, '" data-bs-target="#', $accordion_collapse, '" ';
} else {
echo ' data-toggle="collapse" data-parent="#', $accordion_parent, '" data-target="#', $accordion_collapse, '" ';
}
}
echo '>';
echo '<div class="row">';
echo '<div class="col-sm-2">';
echo '<h4 class="card-title">', 'Custom Test: ', '</h4>';

View File

@ -111,3 +111,37 @@ label {
.card-uoj-wrong .uoj-status-text {
color: #ff4f4f;
}
.markdown-body h1 {
font-size: 2em;
margin-bottom: 1rem;
}
.markdown-body h2 {
font-size: 1.5em;
margin-bottom: 1rem;
}
.markdown-body h3 {
font-size: 1.25em;
}
.markdown-body h4 {
font-size: 1em;
}
.markdown-body h5 {
font-size: 0.875em;
}
.markdown-body h6 {
font-size: 0.85em;
}
.markdown-body img {
max-width: 100%;
}
.markdown-body pre {
padding: 1em;
background-color: rgba(var(--bs-light-rgb));
}

View File

@ -677,7 +677,7 @@ $.fn.source_code_form_group = function(name, text, langs_options_html) {
var help_file_id = 'help-' + name + '_file';
var input_language =
$('<select id="' + input_language_id + '" name="' + input_language_name + '" class="form-control input-sm"/>')
$('<select id="' + input_language_id + '" name="' + input_language_name + '" class="form-control input-sm form-select"/>')
.html(langs_options_html);
var input_upload_type_editor = $('<input type="radio" name="' + input_upload_type_name + '" value="editor" />');
var input_upload_type_file = $('<input type="radio" name="' + input_upload_type_name + '" value="file" />');
@ -801,8 +801,8 @@ $.fn.source_code_form_group = function(name, text, langs_options_html) {
$(this)
.append($('<div class="row col-sm-12"/>')
.append($('<label class="col-sm-2 control-label"><div class="text-left">' + text + '</div></label>'))
.append($('<label class="col-sm-1 control-label" for="' + input_language_name + '">'+uojLocale('editor::language')+'</label>'))
.append($('<label class="col-sm-2 control-label"><div class="'+(isBootstrap5Page ? ' text-start ' : ' text-left ')+'">' + text + '</div></label>'))
.append($('<label class="col-sm-1 control-label '+ (isBootstrap5Page ? ' px-1 ' : '') +' " for="' + input_language_name + '">'+uojLocale('editor::language')+'</label>'))
.append($('<div class="col-sm-2"/>')
.append(input_language)
)