klarkxy/hustoj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 优化问题页面工具栏样式和标签显示

Browse Source
This commit is contained in:
klarkxy
2026-04-12 12:55:45 +08:00
parent e5aadba7fd
commit 7334f3a368
2 changed files with 284 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
web/template/syzoj/header.php
View File

@@ -107,6 +107,82 @@
/*filter: brightness(1.1);*/
}
.label {
display: inline-block;
line-height: 1;
vertical-align: baseline;
padding: 0.45em 0.7em;
border-radius: .28571429rem;
font-size: .85714286rem;
font-weight: 700;
white-space: nowrap;
background-color: #e8e8e8;
color: rgba(0, 0, 0, .6);
}
a.label {
color: inherit;
}
a.label:hover {
color: inherit;
text-decoration: none;
filter: brightness(.96);
}
.label.label-default,
.ui.label.label-default,
.label-default,
.label.label-gray,
.label.label-grey,
.label.gray,
.label.grey,
.label.lable-gray,
.label-gray,
.label-grey,
.lable-gray {
background-color: #767676 !important;
color: #fff !important;
}
.label.label-primary,
.ui.label.label-primary,
.label-primary {
background-color: #2185d0 !important;
color: #fff !important;
}
.label.label-info,
.ui.label.label-info,
.label-info {
background-color: #00b5ad !important;
color: #fff !important;
}
.label.label-success,
.ui.label.label-success,
.label-success {
background-color: #21ba45 !important;
color: #fff !important;
}
.label.label-warning,
.ui.label.label-warning,
.label-warning {
background-color: #f2711c !important;
color: #fff !important;
}
.label.label-danger,
.ui.label.label-danger,
.label-danger,
.label.label-important,
.ui.label.label-important,
.label-important {
background-color: #db2828 !important;
color: #fff !important;
}
</style>
<script src="<?php echo "$OJ_CDN_URL/include/"?>jquery-latest.js"></script>

142
web/template/syzoj/problemset.php
View File

@@ -2,12 +2,121 @@
<?php include("template/$OJ_TEMPLATE/header.php"); ?>
<div class="padding">
<div class="ui grid" style="margin-bottom: 10px; ">
<div class="row" style="white-space: nowrap; ">
<div class="seven wide column">
<form action="" method="get">
<div class="ui search"
style="width: 160px; height: 28px; margin-top: -5.3px; float:left; margin-right: 10px;">
<style>
.problemset-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
margin-bottom: 10px;
}
.problemset-toolbar-left,
.problemset-toolbar-right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
min-width: 0;
margin: 0;
}
.problemset-toolbar-left {
flex: 1 1 320px;
}
.problemset-toolbar-right {
flex: 1 1 420px;
justify-content: flex-end;
}
.problemset-toolbar .ui.search {
margin-top: -5.3px;
}
.problemset-title-search {
width: 160px;
height: 28px;
}
.problemset-user-search {
width: 120px;
height: 28px;
}
.problemset-toolbar #hardness_select {
width: 120px;
min-height: 32px;
line-height: 32px;
margin-left: 0;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}
.problemset-title-cell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.problemset-title-link {
flex: 1 1 auto;
min-width: 0;
}
.problemset-tags {
flex: 0 1 auto;
max-width: 55%;
text-align: right;
}
.problemset-tags .label,
.problemset-tags .ui.label {
margin-bottom: 4px;
}
@media (max-width: 991px) {
.problemset-toolbar-right {
justify-content: flex-start;
}
}
@media (max-width: 767px) {
.problemset-toolbar-left,
.problemset-toolbar-right {
flex-basis: 100%;
}
.problemset-title-search,
.problemset-user-search,
.problemset-toolbar #hardness_select {
width: 100% !important;
}
.problemset-toolbar .ui.search {
width: 100% !important;
}
.problemset-title-cell {
flex-direction: column;
align-items: flex-start;
}
.problemset-tags {
width: 100%;
max-width: 100%;
text-align: left;
}
}
</style>
<div class="problemset-toolbar">
<form action="" method="get" class="problemset-toolbar-left">
<div class="ui search problemset-title-search">
<div class="ui left icon input" style="width: 100%; ">
<input class="prompt" style="width: 100%; " type="text" placeholder="<?php echo $MSG_TITLE; ?> …"
name="search" value="<?php if (isset($_GET['search']))
@@ -18,7 +127,7 @@
</div>
<?php if (isset($_SESSION[$OJ_NAME . '_' . 'administrator'])): ?>
<div class="ui search" style="width: 120px; height: 28px; margin-top: -5.3px; display: inline-block;">
<div class="ui search problemset-user-search">
<div class="ui icon input" style="width: 100%; ">
<input class="prompt" style="width: 100%; " type="text" placeholder="用户ID" name="query_user_id" value="<?php if (isset($_GET['query_user_id']))
echo htmlentities($_GET['query_user_id'], ENT_QUOTES, 'UTF-8') ?>">
@@ -30,10 +139,8 @@
<button type="submit" class="ui mini button" style="display: none;">搜索</button>
</form>
</div>
<div class="nine wide right aligned column">
<div class="problemset-toolbar-right">
<div class="ui toggle checkbox" id="show_tag">
<style id="show_tag_style"></style>
@@ -64,7 +171,7 @@
</div>
<div class="ui toggle checkbox" id="show_solved" style="margin-left: 10px;">
<div class="ui toggle checkbox" id="show_solved">
<style id="show_solved_style"></style>
<script>
if (localStorage.getItem('show_solved') != '0') {
@@ -83,13 +190,11 @@
localStorage.setItem('show_solved', checked ? '1' : '0');
if (checked) {
document.getElementById('show_solved_style').innerHTML = '';
// 显示所有题目
document.querySelectorAll('.solved-problem').forEach(function (row) {
row.style.display = '';
});
} else {
document.getElementById('show_solved_style').innerHTML = '.solved-problem { display: none; }';
// 隐藏已解决的题目
document.querySelectorAll('.solved-problem').forEach(function (row) {
row.style.display = 'none';
});
@@ -108,7 +213,7 @@
$selected_hardness = 0;
}
?>
<select id="hardness_select" class="ui dropdown" style="width: 120px; min-height: 32px; line-height: 32px; margin-left: 10px; vertical-align: middle; padding-top: 0; padding-bottom: 0;">
<select id="hardness_select" class="ui dropdown">
<option value="0" <?php if ($selected_hardness == 0)
echo 'selected'; ?>>全部难度</option>
<?php for ($h = 1; $h <= 8; $h++) {
@@ -117,7 +222,6 @@
</select>
</div>
</div>
</div>
<script>
$(function () {
@@ -233,17 +337,19 @@
echo "<td><b>" . $row['problem_id'] . "</b></td>";
echo "<td class=\"left aligned\">";
echo "<div class=\"problemset-title-cell\">";
echo "<div class=\"problemset-title-link\">";
echo "<a style=\"vertical-align: middle; \" href=\"problem.php?id=" . $row['problem_id'] . "\">";
echo $row['title'];
echo "</a>";
if ($row['defunct'] == 'Y') {
echo "<a href=admin/problem_df_change.php?id=" . $row['problem_id'] . "&getkey=" . $_SESSION[$OJ_NAME . '_' . 'getkey'] . ">" . ("<span class=\"ui tiny red label\">未公开</span>") . "</a>";
}
echo "</div>";
echo "<div class=\"show_tag_controled\" style=\"float: right; \">";
//echo "<span class=\"ui header\">";
echo "<div class=\"show_tag_controled problemset-tags\">";
echo $view_problemset[$i][3];
//echo "</span></div>";
echo "</div>";
echo "</div>";
echo "</td>";
echo "<td><a href=\"status.php?problem_id=" . $row['problem_id'] . "&jresult=4\">" . $row['accepted'] . "/" . $row['submit'] . "</a></td>";