refactor: contest_inside page with bs5

2024-11-08 14:48:41 +00:00 · 2022-10-04 14:06:03 +08:00 · 2022-10-04 14:06:03 +08:00 · cbe9f77cca
commit cbe9f77cca
parent ddf5ec7413
8 changed files with 145 additions and 117 deletions
--- a/web/app/controllers/contest_inside.php
+++ b/web/app/controllers/contest_inside.php
@ -1,6 +1,7 @@
 <?php
 	requirePHPLib('form');

+	$REQUIRE_LIB['bootstrap5'] = '';
 	$REQUIRE_LIB['mathjax'] = '';

 	if (!Auth::check()) {
@ -83,7 +84,7 @@
 		} catch (Exception $e) {
 		}
 		global $myUser;
-		$result=DB::query("select * from contests_asks where contest_id='${contest['id']}' and username='${myUser['username']}' order by reply_time desc limit 10");
+		$result = DB::query("select * from contests_asks where contest_id='${contest['id']}' and username='${myUser['username']}' order by reply_time desc limit 10");
 		try {
 			while ($row = DB::fetch($result)) {
 				if (new DateTime($row['reply_time']) > new DateTime($_POST['last_time'])) {
@ -121,7 +122,7 @@
 				}
 				DB::query("update contests set status = 'testing' where id = {$contest['id']}");
 			};
-			$start_test_form->submit_button_config['class_str'] = 'btn btn-danger btn-block';
+			$start_test_form->submit_button_config['class_str'] = 'btn btn-danger d-block w-100';
 			$start_test_form->submit_button_config['smart_confirm'] = '';
 			if ($contest['cur_progress'] < CONTEST_TESTING) {
 				$start_test_form->submit_button_config['text'] = '开始最终测试';
@ -150,7 +151,7 @@
 				}
 				DB::query("update contests set status = 'finished' where id = {$contest['id']}");
 			};
-			$publish_result_form->submit_button_config['class_str'] = 'btn btn-danger btn-block';
+			$publish_result_form->submit_button_config['class_str'] = 'btn btn-danger d-block w-100';
 			$publish_result_form->submit_button_config['smart_confirm'] = '';
 			$publish_result_form->submit_button_config['text'] = '公布成绩';
 			
@ -338,7 +339,7 @@
 	}
 	
 	function echoDashboard() {
-		global $contest, $post_notice, $post_question, $reply_question;
+		global $contest, $post_notice, $post_question, $reply_question, $REQUIRE_LIB;
 		
 		$myname = Auth::id();
 		$contest_problems = DB::selectAll("select contests_problems.problem_id, best_ac_submissions.submission_id from contests_problems left join best_ac_submissions on contests_problems.problem_id = best_ac_submissions.problem_id and submitter = '{$myname}' where contest_id = {$contest['id']} order by contests_problems.dfn, contests_problems.problem_id");
@ -372,7 +373,8 @@
 			'contest_problems' => $contest_problems,
 			'post_question' => $post_question,
 			'my_questions_pag' => $my_questions_pag,
-			'others_questions_pag' => $others_questions_pag
+			'others_questions_pag' => $others_questions_pag,
+			'REQUIRE_LIB' => $REQUIRE_LIB,
 		]);
 	}
 	
@ -416,8 +418,13 @@
 		$show_all_submissions_status = Cookie::get('show_all_submissions') !== null ? 'checked="checked" ' : '';
 		$show_all_submissions = UOJLocale::get('contests::show all submissions');
 		echo <<<EOD
-			<div class="checkbox text-right">
-				<label for="input-show_all_submissions"><input type="checkbox" id="input-show_all_submissions" $show_all_submissions_status/> $show_all_submissions</label>
+			<div class="text-end">
+				<div class="form-check d-inline-block">
+					<input type="checkbox" class="form-check-input" id="input-show_all_submissions" $show_all_submissions_status />
+					<label class="form-check-label" for="input-show_all_submissions">
+						$show_all_submissions
+					</label>
+				</div>
 			</div>
 			<script type="text/javascript">
 				$('#input-show_all_submissions').click(function() {
@ -430,10 +437,19 @@
 				});
 			</script>
 EOD;
+
+		$config = array(
+			'judge_time_hidden' => '',
+			'table_config' => array(
+				'div_classes' => array('card', 'mb-3', 'overflow-auto'),
+				'table_classes' => array('table', 'mb-0', 'uoj-table', 'text-center')
+			),
+		);
+
 		if (Cookie::get('show_all_submissions') !== null) {
-			echoSubmissionsList("contest_id = {$contest['id']}", 'order by id desc', array('judge_time_hidden' => ''), $myUser);
+			echoSubmissionsList("contest_id = {$contest['id']}", 'order by id desc', $config, $myUser);
 		} else {
-			echoSubmissionsList("submitter = '{$myUser['username']}' and contest_id = {$contest['id']}", 'order by id desc', array('judge_time_hidden' => ''), $myUser);
+			echoSubmissionsList("submitter = '{$myUser['username']}' and contest_id = {$contest['id']}", 'order by id desc', $config, $myUser);
 		}
 	}
 	
@ -466,75 +482,26 @@ EOD;
 		]);
 	}
 	
-	function echoContestCountdown() {
-		global $contest;
-		$rest_second = $contest['end_time']->getTimestamp() - UOJTime::$time_now->getTimestamp();
-		$time_str = UOJTime::$time_now_str;
-		$contest_ends_in = UOJLocale::get('contests::contest ends in');
-		echo <<<EOD
- 		<div class="card border-info">
- 			<div class="card-header bg-info">
- 				<h3 class="card-title">$contest_ends_in</h3>
- 			</div>
- 			<div class="card-body text-center countdown" data-rest="$rest_second"></div>
- 		</div>
-		<script type="text/javascript">
-			checkContestNotice({$contest['id']}, '$time_str');
-		</script>
-EOD;
-	}
-	
-	function echoContestJudgeProgress() {
-		global $contest;
-		if ($contest['cur_progress'] < CONTEST_TESTING) {
-			$rop = 0;
-			$title = UOJLocale::get('contests::contest pending final test');
-		} else {
-			$total = DB::selectCount("select count(*) from submissions where contest_id = {$contest['id']}");
-			$n_judged = DB::selectCount("select count(*) from submissions where contest_id = {$contest['id']} and status = 'Judged'");
-			$rop = $total == 0 ? 100 : (int)($n_judged / $total * 100);
-			$title = UOJLocale::get('contests::contest final testing');
-		}
-		echo <<<EOD
- 		<div class="card border-info">
- 			<div class="card-header bg-info">
- 				<h3 class="card-title">$title</h3>
- 			</div>
- 			<div class="card-body">
-				<div class="progress bot-buffer-no">
-					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="$rop" aria-valuemin="0" aria-valuemax="100" style="width: {$rop}%; min-width: 20px;">{$rop}%</div>
-				</div>
-			</div>
- 		</div>
-EOD;
-	}
-	
-	function echoContestFinished() {
-		$title = UOJLocale::get('contests::contest ended');
-		echo <<<EOD
- 		<div class="card border-info">
- 			<div class="card-header bg-info">
- 				<h3 class="card-title">$title</h3>
- 			</div>
- 		</div>
-EOD;
-	}
-	
 	$page_header = HTML::stripTags($contest['name']) . ' - ';
 	?>
 <?php echoUOJPageHeader(HTML::stripTags($contest['name']) . ' - ' . $tabs_info[$cur_tab]['name'] . ' - ' . UOJLocale::get('contests::contest')) ?>
-<div class="text-center">
-	<h1><?= $contest['name'] ?></h1>
-	<?= getClickZanBlock('C', $contest['id'], $contest['zan']) ?>
+
+<div class="text-center d-md-none">
+	<h1 class="h2"><?= $contest['name'] ?></h1>
 </div>
+
+
 <div class="row">
 	<?php if ($cur_tab == 'standings' || $cur_tab == 'after_contest_standings' || $cur_tab == 'self_reviews'): ?>
-	<div class="col-sm-12">
+	<div class="col-12">
 	<?php else: ?>
-	<div class="col-sm-9">
+	<div class="col-md-9">
 	<?php endif ?>
-		<?= HTML::tablist($tabs_info, $cur_tab) ?>
-		<div class="top-buffer-md">
+		<?= HTML::tablist($tabs_info, $cur_tab, 'nav-pills') ?>
+		<?php if ($cur_tab == 'standings' || $cur_tab == 'after_contest_standings' || $cur_tab == 'self_reviews'): ?>
+		<h1 class="h2 text-center d-none d-md-block mt-2"><?= $contest['name'] ?></h1>
+		<?php endif ?>
+		<div class="mt-3">
 		<?php
 				if ($cur_tab == 'dashboard') {
 					echoDashboard();
@ -553,71 +520,98 @@ EOD;
 		</div>
 	</div>
 	
-	<?php if ($cur_tab == 'standings' || $cur_tab == 'after_contest_standings' || $cur_tab == 'self_reviews'): ?>
-	<div class="col-sm-12">
+	<?php if ($cur_tab == 'standings' || $cur_tab == 'after_contest_standings'): ?>
+	<?php elseif ($cur_tab == 'self_reviews'): ?>
+		<?php if (isset($self_reviews_update_form)) : ?>
+		<hr />
+
+		<div class="col-md-6">
+			<h4>修改我的赛后总结</h4>
+			<?php $self_reviews_update_form->printHTML(); ?>
+		</div>
+		<?php endif ?>	
+	<?php else: ?>
+	<div class="d-md-none">
 		<hr />
 	</div>
-	<?php endif ?>
-
-	<div class="col-sm-3">
-	<?php
-		if ($contest['cur_progress'] <= CONTEST_IN_PROGRESS) {
-			echoContestCountdown();
-		} elseif ($contest['cur_progress'] <= CONTEST_TESTING) {
-			echoContestJudgeProgress();
-		} else {
-			echoContestFinished();
-		}
-	?>
-		<?php if ($cur_tab == 'standings' || $cur_tab == 'after_contest_standings' || $cur_tab == 'self_reviews'): ?>
+	<div class="col-md-3">
+		<div class="card card-default mb-2">
+			<div class="card-body">
+				<h3 class="h5 card-title text-center">
+					<a class="text-decoration-none text-body" href="/contest/<?= $contest['id'] ?>">
+						<?= $contest['name'] ?>
+					</a>
+				</h3>
+				<div class="card-text text-center text-muted">
+				<?php if ($contest['cur_progress'] <= CONTEST_IN_PROGRESS): ?>
+					<span id="contest-countdown"></span>
+					<script type="text/javascript">
+						$('#contest-countdown').countdown(<?= $contest['end_time']->getTimestamp() - UOJTime::$time_now->getTimestamp() ?>, function(){}, '1.75rem', false);
+						checkContestNotice(<?= $contest['id'] ?>, '<?= UOJTime::$time_now_str ?>');
+					</script>
+				<?php elseif ($contest['cur_progress'] <= CONTEST_TESTING): ?>
+					<?php if ($contest['cur_progress'] < CONTEST_TESTING): ?>
+						<?= UOJLocale::get('contests::contest pending final test') ?>
+					<?php else: ?>
+						<?php
+							$total = DB::selectCount("select count(*) from submissions where contest_id = {$contest['id']}");
+						$n_judged = DB::selectCount("select count(*) from submissions where contest_id = {$contest['id']} and status = 'Judged'");
+						$rop = $total == 0 ? 100 : (int)($n_judged / $total * 100);
+						?>
+						<?= UOJLocale::get('contests::contest final testing') ?>
+						(<?= $rop ?>%)
+					<?php endif ?>
+				<?php else: ?>
+					<?= UOJLocale::get('contests::contest ended') ?>
+				<?php endif ?>
+				</div>
 			</div>
-			<div class="col-sm-3">
-		<?php endif ?>
-		<?php if (!isset($contest['extra_config']['contest_type']) || $contest['extra_config']['contest_type']=='OI'):?>
-			<p>此次比赛为OI赛制。</p>
+			<div class="card-footer bg-transparent">
+				比赛评价：<?= getClickZanBlock('C', $contest['id'], $contest['zan']) ?>
+			</div>
+		</div>
+
+		<?php if (!isset($contest['extra_config']['contest_type']) || $contest['extra_config']['contest_type'] == 'OI'): ?>
+			<p>此次比赛为 OI 赛制。</p>
 			<p><strong>注意：比赛时只显示测样例的结果。</strong></p>
 		<?php elseif ($contest['extra_config']['contest_type'] == 'IOI'): ?>
-			<p>此次比赛为IOI赛制。</p>
+			<p>此次比赛为 IOI 赛制。</p>
 			<p><strong>注意：比赛时显示测试所有数据的结果，但无法看到详细信息。</strong></p>
-		<?php endif?>
+		<?php endif ?>
 	
-		<a href="/contest/<?=$contest['id']?>/registrants" class="btn btn-info btn-block"><?= UOJLocale::get('contests::contest registrants') ?></a>
+		<a href="/contest/<?= $contest['id'] ?>/registrants" class="btn btn-info d-block mt-2">
+			<?= UOJLocale::get('contests::contest registrants') ?>
+		</a>
 		<?php if (isSuperUser($myUser)): ?>
-			<a href="/contest/<?=$contest['id']?>/manage" class="btn btn-primary btn-block">管理</a>
+			<a href="/contest/<?=$contest['id']?>/manage" class="btn btn-primary d-block mt-2">
+				管理
+			</a>
 		<?php endif ?>
 		<?php if (isset($start_test_form)): ?>
-		<div class="top-buffer-sm">
+		<div class="mt-2">
 			<?php $start_test_form->printHTML(); ?>
 		</div>
 		<?php endif ?>
 		<?php if (isset($publish_result_form)): ?>
-		<div class="top-buffer-sm">
+		<div class="mt-2">
 			<?php $publish_result_form->printHTML(); ?>
 		</div>
 		<?php endif ?>
-		<?php if (isset($self_reviews_update_form)) { ?>
 	</div>
-	<div class="col-sm-6">
-			<h4>修改我的赛后总结</h4>
-			<?php $self_reviews_update_form->printHTML(); ?>
-		<?php } elseif ($contest['extra_config']['links'] && $cur_tab != 'self_reviews') { ?>
-			<?php if ($cur_tab == 'standings'): ?>
-	</div>
-	<div class="col-sm-3">
-		<div class="card border-info">
-			<?php else: ?>
-				<div class="card border-info top-buffer-lg">
-			<?php endif ?>
+		<?php if ($contest['extra_config']['links']): ?>
+			<div class="card border-info top-buffer-lg">
 				<div class="card-header bg-info">
 					<h3 class="card-title">比赛资料</h3>
 				</div>
 				<div class="list-group">
-				<?php foreach ($contest['extra_config']['links'] as $link) { ?>
+				<?php foreach ($contest['extra_config']['links'] as $link): ?>
 					<a href="/blogs/<?=$link[1]?>" class="list-group-item"><?=$link[0]?></a>
-				<?php } ?>
+				<?php endforeach ?>
 				</div>
 			</div>
-		<?php } ?>
-	</div>
+		</div>
+		<?php endif ?>
+	<?php endif ?>
 </div>
+
 <?php echoUOJPageFooter() ?>
--- a/web/app/libs/uoj-html-lib.php
+++ b/web/app/libs/uoj-html-lib.php
@ -36,6 +36,7 @@ function uojFilePreview($file_name, $output_limit, $file_type = 'text') {
 }

 function uojIncludeView($name, $view_params = array()) {
+	global $REQUIRE_LIB;
 	extract($view_params);
 	include $_SERVER['DOCUMENT_ROOT'].'/app/views/'.$name.'.php';
 }
--- a/web/app/views/contest-backstage.php
+++ b/web/app/views/contest-backstage.php
@ -1,11 +1,11 @@

 <ul class="nav nav-pills float-right" role="tablist">
-	<li class="nav-item"><a class="nav-link active" href="#tab-question" role="tab" data-toggle="tab">提问</a></li>
+	<li class="nav-item"><a class="nav-link active" href="#tab-question" role="tab" data-bs-toggle="tab" data-bs-target="#tab-question">提问</a></li>
 	<?php if ($post_notice): ?>
-		<li class="nav-item"><a class="nav-link" href="#tab-notice" role="tab" data-toggle="tab">公告</a></li>
+		<li class="nav-item"><a class="nav-link" href="#tab-notice" role="tab" data-bs-toggle="tab" data-bs-target="#tab-notice">公告</a></li>
 	<?php endif ?>
 	<?php if ($standings_data): ?>
-		<li class="nav-item"><a class="nav-link" href="#tab-standings" role="tab" data-toggle="tab">终榜</a></li>
+		<li class="nav-item"><a class="nav-link" href="#tab-standings" role="tab" data-bs-toggle="tab" data-bs-target="#tab-standings">终榜</a></li>
 	<?php endif ?>
 </ul>
 <div class="tab-content">
--- a/web/app/views/contest-dashboard.php
+++ b/web/app/views/contest-dashboard.php
@ -1,5 +1,10 @@
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+<div class="card card-default mb-3">
+	<table class="table uoj-table text-center mb-0">
+<?php else: ?>
 <div class="table-responsive">
 	<table class="table table-bordered table-hover table-striped table-text-center">
+<?php endif ?>
 		<thead>
 			<tr>
 				<th style="width:5em">#</th>
@ -22,8 +27,13 @@
 </div>

 <h3><?= UOJLocale::get('contests::contest notice') ?></h3>
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+<div class="card card-default mb-3">
+	<table class="table uoj-table text-center mb-0">
+<?php else: ?>
 <div class="table-responsive">
 	<table class="table table-bordered table-hover table-vertical-middle table-text-center">
+<?php endif ?>
 		<thead>
 			<tr>
 				<th style="width:10em"><?= UOJLocale::get('title') ?></th>
--- a/web/app/views/contest-question-table.php
+++ b/web/app/views/contest-question-table.php
@ -6,8 +6,13 @@ if (!isset($can_reply)) {
 }

 ?>
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+<div class="card card-default mb-3">
+	<table class="table uoj-table text-center mb-0">
+<?php else: ?>
 <div class="table-responsive">
 	<table class="table table-bordered table-hover table-vertical-middle table-text-center">
+<?php endif ?>
 		<thead>
 			<tr>
 				<th style="width:10em">提问者</th>
--- a/web/app/views/contest-standings.php
+++ b/web/app/views/contest-standings.php
@ -1,4 +1,4 @@
-<div id="standings"></div>
+<div class="card card-default" id="standings"></div>

 <div class="table-responsive">
 	<table id="standings-table" class="table table-bordered table-striped table-text-center table-vertical-middle"></table>
--- a/web/css/uoj-bs5.css
+++ b/web/css/uoj-bs5.css
@ -342,3 +342,21 @@ form.uoj-form-compressed button {

 	text-align: left;
 }
+
+.uoj-standings-table tr td:first-child,
+.uoj-standings-table tr th:first-child {
+	border-left-width: 0px;
+}
+
+.uoj-standings-table tr td:last-child,
+.uoj-standings-table tr th:last-child {
+	border-right-width: 0px;
+}
+
+.uoj-standings-table > thead > tr:first-child {
+	border-top-width: 0px;
+}
+
+.uoj-standings-table > tbody > tr:last-child {
+	border-bottom-width: 0px;
+}
--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@ -1157,10 +1157,10 @@ function showStandings() {
 			col_tr += '</tr>';
 			return col_tr;
 		}, {
-			table_classes: ['table', 'table-bordered', 'table-striped', 'table-text-center', 'table-vertical-middle', 'table-condensed'],
+			table_classes: ['table', 'table-bordered', 'overflow-auto', 'text-center', 'uoj-table', 'uoj-standings-table', 'mb-0'],
 			page_len: 100,
 			print_after_table: function() {
-				return '<div class="text-right text-muted">' + uojLocale("contests::n participants", standings.length) + '</div><script>if (window.MathJax) window.MathJax.typeset();</scr' + 'ipt>';
+				return '<div class="card-footer bg-transparent text-end text-muted">' + uojLocale("contests::n participants", standings.length) + '</div><script>if (window.MathJax) window.MathJax.typeset();</scr' + 'ipt>';
 			}
 		}
 	);