From bd79eebb44eaf4e38878a999561e9a4c4c96e7a7 Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Sat, 24 Sep 2022 08:13:39 +0800
Subject: [PATCH] refactor: submissions_list with bs5

---
 web/app/controllers/submissions_list.php | 42 ++++++++++++--
 web/app/libs/uoj-html-lib.php            | 36 ++++++++++--
 web/app/models/Paginator.php             | 71 +++++++++++++++++++++---
 web/css/uoj-bs5.css                      | 39 ++++++++++++-
 4 files changed, 170 insertions(+), 18 deletions(-)

diff --git a/web/app/controllers/submissions_list.php b/web/app/controllers/submissions_list.php
index 6ba48c1..974ef1a 100644
--- a/web/app/controllers/submissions_list.php
+++ b/web/app/controllers/submissions_list.php
@@ -37,6 +37,8 @@
 	} else {
 		$cond = '1';
 	}
+
+	$REQUIRE_LIB['bootstrap5'] = '';
 	?>
 <?php echoUOJPageHeader(UOJLocale::get('submissions')) ?>
 <div class="d-none d-sm-block">
@@ -46,21 +48,37 @@
 	</div>
 	<?php endif ?>
 	<form id="form-search" class="form-inline" method="get">
-		<div id="form-group-problem_id" class="form-group">
+		<div id="form-group-problem_id" class="form-group
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+d-inline-block
+<?php endif ?>
+		">
 			<label for="input-problem_id" class="control-label"><?= UOJLocale::get('problems::problem id')?>:</label>
 			<input type="text" class="form-control input-sm" name="problem_id" id="input-problem_id" value="<?= $q_problem_id ?>" maxlength="4" style="width:4em" />
 		</div>
-		<div id="form-group-submitter" class="form-group">
+		<div id="form-group-submitter" class="form-group
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+d-inline-block
+<?php endif ?>
+		">
 			<label for="input-submitter" class="control-label"><?= UOJLocale::get('username')?>:</label>
 			<input type="text" class="form-control input-sm" name="submitter" id="input-submitter" value="<?= $q_submitter ?>" maxlength="20" style="width:10em" />
 		</div>
-		<div id="form-group-score" class="form-group">
+		<div id="form-group-score" class="form-group
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+d-inline-block
+<?php endif ?>
+		">
 			<label for="input-min_score" class="control-label"><?= UOJLocale::get('score range')?>:</label>
 			<input type="text" class="form-control input-sm" name="min_score" id="input-min_score" value="<?= $q_min_score ?>" maxlength="3" style="width:4em" placeholder="0" />
 			<label for="input-max_score" class="control-label">~</label>
 			<input type="text" class="form-control input-sm" name="max_score" id="input-max_score" value="<?= $q_max_score ?>" maxlength="3" style="width:4em" placeholder="100" />
 		</div>
-		<div id="form-group-language" class="form-group">
+		<div id="form-group-language" class="form-group
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+d-inline-block
+<?php endif ?>
+		">
 			<label for="input-language" class="control-label"><?= UOJLocale::get('problems::language')?>:</label>
 			<input type="text" class="form-control input-sm" name="language" id="input-language" value="<?= $html_esc_q_language ?>" maxlength="10" style="width:8em" />
 		</div>
@@ -85,7 +103,21 @@
 	</script>
 	<div class="top-buffer-sm"></div>
 </div>
+
 <?php
-		echoSubmissionsList($cond, 'order by id desc', array('judge_time_hidden' => ''), $myUser);
+	echoSubmissionsList($cond,
+		'order by id desc',
+		array(
+			'judge_time_hidden' => '',
+			'table_config' => (isset($REQUIRE_LIB['bootstrap5']) 
+				? array(
+					'div_classes' => array('card', 'mb-3'),
+					'table_classes' => array('table', 'mb-0', 'uoj-submissions-table', 'text-center')
+				)
+				: array()
+			),
+		),
+		$myUser);
 	?>
+
 <?php echoUOJPageFooter() ?>
diff --git a/web/app/libs/uoj-html-lib.php b/web/app/libs/uoj-html-lib.php
index 15ac39e..0a1b592 100644
--- a/web/app/libs/uoj-html-lib.php
+++ b/web/app/libs/uoj-html-lib.php
@@ -111,20 +111,36 @@ function getUserName($username, $realname = null) {
 
 
 function getProblemLink($problem, $problem_title = '!title_only') {
+	global $REQUIRE_LIB;
+
 	if ($problem_title == '!title_only') {
 		$problem_title = $problem['title'];
 	} elseif ($problem_title == '!id_and_title') {
 		$problem_title = "#${problem['id']}. ${problem['title']}";
 	}
-	return '<a href="/problem/'.$problem['id'].'">'.$problem_title.'</a>';
+	$result = '<a ';
+	if (isset($REQUIRE_LIB['bootstrap5'])) {
+		$result .= ' class="text-decoration-none" ';
+	}
+	$result .= ' href="/problem/'.$problem['id'].'">'.$problem_title.'</a>';
+
+	return $result;
 }
 function getContestProblemLink($problem, $contest_id, $problem_title = '!title_only') {
+	global $REQUIRE_LIB;
+
 	if ($problem_title == '!title_only') {
 		$problem_title = $problem['title'];
 	} elseif ($problem_title == '!id_and_title') {
 		$problem_title = "#{$problem['id']}. {$problem['title']}";
 	}
-	return '<a href="/contest/'.$contest_id.'/problem/'.$problem['id'].'">'.$problem_title.'</a>';
+	$result = '<a ';
+	if (isset($REQUIRE_LIB['bootstrap5'])) {
+		$result .= ' class="text-decoration-none" ';
+	}
+	$result .= ' href="/contest/'.$contest_id.'/problem/'.$problem['id'].'">'.$problem_title.'</a>';
+
+	return $result;
 }
 function getBlogLink($id) {
 	if (validateUInt($id) && $blog = queryBlog($id)) {
@@ -238,6 +254,8 @@ function getSubmissionStatusDetails($submission) {
 }
 
 function echoSubmission($submission, $config, $user) {
+	global $REQUIRE_LIB;
+
 	$problem = queryProblemBrief($submission['problem_id']);
 	$submitterLink = getUserLink($submission['submitter']);
 	
@@ -259,7 +277,11 @@ function echoSubmission($submission, $config, $user) {
 		echo '<tr class="warning">';
 	}
 	if (!isset($config['id_hidden'])) {
-		echo '<td><a href="/submission/', $submission['id'], '">#', $submission['id'], '</a></td>';
+		echo '<td><a ';
+		if (isset($REQUIRE_LIB['bootstrap5'])) {
+			echo ' class="text-decoration-none" ';
+		}
+		echo ' href="/submission/', $submission['id'], '">#', $submission['id'], '</a></td>';
 	}
 	if (!isset($config['problem_hidden'])) {
 		if ($submission['contest_id']) {
@@ -291,7 +313,11 @@ function echoSubmission($submission, $config, $user) {
 		echo '<td>', $used_memory_str, '</td>';
 	}
 
-	echo '<td>', '<a href="/submission/', $submission['id'], '">', $submission['language'], '</a>', '</td>';
+	echo '<td>', '<a ';
+	if (isset($REQUIRE_LIB['bootstrap5'])) {
+		echo ' class="text-decoration-none" ';
+	}
+	echo ' href="/submission/', $submission['id'], '">', $submission['language'], '</a>', '</td>';
 
 	if ($submission['tot_size'] < 1024) {
 		$size_str = $submission['tot_size'] . 'b';
@@ -358,6 +384,8 @@ function echoSubmissionsListOnlyOne($submission, $config, $user) {
 
 
 function echoSubmissionsList($cond, $tail, $config, $user) {
+	global $REQUIRE_LIB;
+
 	$header_row = '<tr>';
 	$col_names = array();
 	$col_names[] = 'submissions.status_details';
diff --git a/web/app/models/Paginator.php b/web/app/models/Paginator.php
index 325c874..7970771 100644
--- a/web/app/models/Paginator.php
+++ b/web/app/models/Paginator.php
@@ -76,16 +76,44 @@ class Paginator {
 	}
 	
 	public function pagination() {
+		global $REQUIRE_LIB;
+
 		if ($this->n_pages == 1) {
 			return '';
 		}
 		$html = '<ul class="pagination top-buffer-no bot-buffer-sm justify-content-center">';
 		if ($this->cur_page > 1) {
-			$html .= '<li class="page-item"><a class="page-link" href="'.$this->getPageUri(1).'"><span class="glyphicon glyphicon glyphicon-fast-backward"></span></a></li>';
-			$html .= '<li class="page-item"><a class="page-link" href="'.$this->getPageUri($this->cur_page - 1).'"><span class="glyphicon glyphicon glyphicon-backward"></span></a></li>';
+			$html .= '<li class="page-item">'
+				   . '<a class="page-link" href="'.$this->getPageUri(1).'">';
+			if (isset($REQUIRE_LIB['bootstrap5'])) {
+				$html .= '<i class="bi bi-chevron-double-left"></i>';
+			} else {
+				$html .= '<span class="glyphicon glyphicon glyphicon-fast-backward"></span>';
+			}
+			$html .= '</a></li>';
+			$html .= '<li class="page-item">'
+				   . '<a class="page-link" href="'.$this->getPageUri($this->cur_page - 1).'">';
+			if (isset($REQUIRE_LIB['bootstrap5'])) {
+				$html .= '<i class="bi bi-chevron-left"></i>';
+			} else {
+				$html .= '<span class="glyphicon glyphicon glyphicon-backward"></span>';
+			}
+			$html .= '</a></li>';
 		} else {
-			$html .= '<li class="page-item disabled"><a class="page-link"><span class="glyphicon glyphicon glyphicon-fast-backward"></span></a></li>';
-			$html .= '<li class="page-item disabled"><a class="page-link"><span class="glyphicon glyphicon glyphicon-backward"></span></a></li>';
+			$html .= '<li class="page-item disabled"><a class="page-link">';
+			if (isset($REQUIRE_LIB['bootstrap5'])) {
+				$html .= '<i class="bi bi-chevron-double-left"></i>';
+			} else {
+				$html .= '<span class="glyphicon glyphicon glyphicon-fast-backward"></span>';
+			}
+			$html .= '</a></li>';
+			$html .= '<li class="page-item disabled"><a class="page-link">';
+			if (isset($REQUIRE_LIB['bootstrap5'])) {
+				$html .= '<i class="bi bi-chevron-left"></i>';
+			} else {
+				$html .= '<span class="glyphicon glyphicon glyphicon-backward"></span>';
+			}
+			$html .= '</a></li>';
 		}
 			
 		for ($i = max($this->cur_page - $this->max_extend, 1); $i <= min($this->cur_page + $this->max_extend, $this->n_pages); $i++) {
@@ -96,11 +124,38 @@ class Paginator {
 			}
 		}
 		if ($this->cur_page < $this->n_pages) {
-			$html .= '<li class="page-item"><a class="page-link" href="'.$this->getPageUri($this->cur_page + 1).'"><span class="glyphicon glyphicon glyphicon-forward"></span></a></li>';
-			$html .= '<li class="page-item"><a class="page-link" href="'.$this->getPageUri($this->n_pages).'"><span class="glyphicon glyphicon glyphicon-fast-forward"></span></a></li>';
+			$html .= '<li class="page-item">'
+				   . '<a class="page-link" href="'.$this->getPageUri($this->cur_page + 1).'">';
+			if (isset($REQUIRE_LIB['bootstrap5'])) {
+				$html .= '<i class="bi bi-chevron-right"></i>';
+			} else {
+				$html .= '<span class="glyphicon glyphicon glyphicon-forward"></span>';
+			}
+			$html .= '</a></li>';
+
+			$html .= '<li class="page-item">'
+				   . '<a class="page-link" href="'.$this->getPageUri($this->n_pages).'">';
+			if (isset($REQUIRE_LIB['bootstrap5'])) {
+				$html .= '<i class="bi bi-chevron-double-right"></i>';
+			} else {
+				$html .= '<span class="glyphicon glyphicon glyphicon-fast-forward"></span>';
+			}
+			$html .= '</a></li>';
 		} else {
-			$html .= '<li class="page-item disabled"><a class="page-link"><span class="glyphicon glyphicon glyphicon-forward"></span></a></li>';
-			$html .= '<li class="page-item disabled"><a class="page-link"><span class="glyphicon glyphicon glyphicon-fast-forward"></span></a></li>';
+			$html .= '<li class="page-item disabled"><a class="page-link">';
+			if (isset($REQUIRE_LIB['bootstrap5'])) {
+				$html .= '<i class="bi bi-chevron-right"></i>';
+			} else {
+				$html .= '<span class="glyphicon glyphicon glyphicon-forward"></span>';
+			}
+			$html .= '</a></li>';
+			$html .= '<li class="page-item disabled"><a class="page-link">';
+			if (isset($REQUIRE_LIB['bootstrap5'])) {
+				$html .= '<i class="bi bi-chevron-double-right"></i>';
+			} else {
+				$html .= '<span class="glyphicon glyphicon glyphicon-fast-forward"></span>';
+			}
+			$html .= '</a></li>';
 		}
 		$html .= '</ul>';
 		return $html;
diff --git a/web/css/uoj-bs5.css b/web/css/uoj-bs5.css
index fa1bd74..2a01b3d 100644
--- a/web/css/uoj-bs5.css
+++ b/web/css/uoj-bs5.css
@@ -1,11 +1,48 @@
+/* S2OJ Bootstrap 5 Theme */
+
 body {
 	overflow-y: scroll;
 }
 
-.uoj-username {
+.uoj-username,
+.uoj-score {
 	font-weight: 800;
 	text-decoration: none;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
 		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
+
+.form-group {
+	margin-bottom: 1rem;
+}
+
+.form-inline .form-control {
+	display: inline-block;
+	width: auto;
+	vertical-align: middle;
+}
+
+.form-row {
+	display: flex;
+	flex-wrap: wrap;
+	margin-right: -5px;
+	margin-left: -5px;
+}
+
+.form-row > .col {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+label {
+	margin-bottom: 0.5rem;
+}
+
+.float-right {
+	float: right;
+}
+
+.uoj-submissions-table > tbody > tr:last-child {
+	border-bottom-color: transparent;
+}