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

web/template/syzoj/header.php

@@ -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>
 

web/template/syzoj/problemset.php

@@ -2,12 +2,121 @@
 <?php include("template/$OJ_TEMPLATE/header.php"); ?>
 <div class="padding">
 
-  <div class="ui grid" style="margin-bottom: 10px; ">
+  <style>
-    <div class="row" style="white-space: nowrap; ">
+    .problemset-toolbar {
-      <div class="seven wide column">
+      display: flex;
-        <form action="" method="get">
+      flex-wrap: wrap;
-          <div class="ui search"
+      align-items: center;
-            style="width: 160px; height: 28px; margin-top: -5.3px; float:left; margin-right: 10px;">
+      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="problemset-toolbar-right">
-      <div class="nine wide right aligned column">
 
       <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 "<div class=\"show_tag_controled problemset-tags\">";
-        //echo "<span class=\"ui header\">";
         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>";