From 3a26ee7092f8fdcd89da369ee938210502e41aec Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Sun, 25 Sep 2022 18:28:43 +0800
Subject: [PATCH] refactor: problem page with bs5

---
 web/app/controllers/groups.php        |   2 +-
 web/app/controllers/problem.php       | 130 +++++++++++++++++++++++++-
 web/app/controllers/problem_lists.php |   2 +-
 web/app/controllers/problem_set.php   |   4 +-
 web/app/libs/uoj-html-lib.php         |  26 ++++--
 web/css/uoj-bs5.css                   |  34 +++++++
 web/js/uoj.js                         |   6 +-
 7 files changed, 189 insertions(+), 15 deletions(-)

diff --git a/web/app/controllers/groups.php b/web/app/controllers/groups.php
index 75953e1..41b1f23 100644
--- a/web/app/controllers/groups.php
+++ b/web/app/controllers/groups.php
@@ -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());
 ?>
diff --git a/web/app/controllers/problem.php b/web/app/controllers/problem.php
index 46e3dfe..eb13488 100644
--- a/web/app/controllers/problem.php
+++ b/web/app/controllers/problem.php
@@ -9,7 +9,7 @@
 	if (!validateUInt($_GET['id']) || !($problem = queryProblemBrief($_GET['id']))) {
 		become404Page();
 	}
-	
+
 	$problem_content = queryProblemContent($problem['id']);
 	
 	$contest = validateUInt($_GET['contest_id']) ? queryContest($_GET['contest_id']) : null;
@@ -54,6 +54,10 @@
 			become403Page();
 		}
 	}
+	
+	if (!isset($_COOKIE['bootstrap4']) && !$contest) {
+		$REQUIRE_LIB['bootstrap5'] = '';
+	}
 
 	$submission_requirement = json_decode($problem['submission_requirement'], true);
 	$problem_extra_config = getProblemExtraConfig($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() ?>
diff --git a/web/app/controllers/problem_lists.php b/web/app/controllers/problem_lists.php
index 47202f0..5929ab7 100644
--- a/web/app/controllers/problem_lists.php
+++ b/web/app/controllers/problem_lists.php
@@ -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());
 ?>
diff --git a/web/app/controllers/problem_set.php b/web/app/controllers/problem_set.php
index eabcc6b..dc104fb 100644
--- a/web/app/controllers/problem_set.php
+++ b/web/app/controllers/problem_set.php
@@ -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());
 ?>
diff --git a/web/app/libs/uoj-html-lib.php b/web/app/libs/uoj-html-lib.php
index ea3664a..583c6b9 100644
--- a/web/app/libs/uoj-html-lib.php
+++ b/web/app/libs/uoj-html-lib.php
@@ -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>';
diff --git a/web/css/uoj-bs5.css b/web/css/uoj-bs5.css
index 91fc096..39f2851 100644
--- a/web/css/uoj-bs5.css
+++ b/web/css/uoj-bs5.css
@@ -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));
+}
diff --git a/web/js/uoj.js b/web/js/uoj.js
index a05bdc7..8d97f35 100644
--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@@ -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)
 			)