From 9efb352f15e0f2ccd0d3037587f4468410d029d0 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 6 Jul 2021 01:11:52 +0800
Subject: fix: Fix #650.

---
 FrontEnd/src/views/admin/Admin.tsx     |  2 +-
 FrontEnd/src/views/admin/AdminNav.tsx  |  3 ++-
 FrontEnd/src/views/admin/UserAdmin.tsx | 16 ++++++++--------
 FrontEnd/src/views/admin/index.css     | 20 +++++++++++++++++---
 FrontEnd/src/views/common/index.css    |  4 ++++
 5 files changed, 32 insertions(+), 13 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/views/admin/Admin.tsx b/FrontEnd/src/views/admin/Admin.tsx
index 9393a61f..e750621c 100644
--- a/FrontEnd/src/views/admin/Admin.tsx
+++ b/FrontEnd/src/views/admin/Admin.tsx
@@ -29,7 +29,7 @@ const Admin: React.FC<AdminProps> = ({ user }) => {
             const name = match.params["name"];
             return (
               <div className="container">
-                <AdminNav />
+                <AdminNav className="mt-2" />
                 {(() => {
                   if (name === "users") {
                     return <UserAdmin user={user} />;
diff --git a/FrontEnd/src/views/admin/AdminNav.tsx b/FrontEnd/src/views/admin/AdminNav.tsx
index 8b4c5fda..821c9b0a 100644
--- a/FrontEnd/src/views/admin/AdminNav.tsx
+++ b/FrontEnd/src/views/admin/AdminNav.tsx
@@ -3,13 +3,14 @@ import { useRouteMatch } from "react-router";
 
 import Tabs from "../common/tab/Tabs";
 
-const AdminNav: React.FC = () => {
+const AdminNav: React.FC<{ className?: string }> = ({ className }) => {
   const match = useRouteMatch<{ name: string }>();
 
   const name = match.params.name;
 
   return (
     <Tabs
+      className={className}
       activeTabName={name}
       tabs={[
         {
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 4ceff8ab..f713b8b7 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -206,19 +206,19 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
   return (
     <div className="admin-user-item">
       <i
-        className="bi-pencil-square float-end icon-button cru-color-warning"
+        className="bi-pencil-square cru-float-right icon-button cru-color-primary-enhance"
         onClick={() => setEditMaskVisible(true)}
       />
-      <h4 className="cru-color-primary">{user.username}</h4>
-      <div className="cru-color-secondary">
+      <h5 className="cru-color-primary">{user.username}</h5>
+      <small className="d-block cru-color-secondary">
         {t("admin:user.nickname")}
         {user.nickname}
-      </div>
-      <div className="cru-color-secondary">
+      </small>
+      <small className="d-block cru-color-secondary">
         {t("admin:user.uniqueId")}
         {user.uniqueId}
-      </div>
-      <div className="cru-color-secondary">
+      </small>
+      <small className="d-block cru-color-secondary">
         {t("admin:user.permissions")}
         {user.permissions.map((permission) => {
           return (
@@ -227,7 +227,7 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
             </span>
           );
         })}
-      </div>
+      </small>
       <div
         className={classnames("edit-mask", !editMaskVisible && "d-none")}
         onClick={() => setEditMaskVisible(false)}
diff --git a/FrontEnd/src/views/admin/index.css b/FrontEnd/src/views/admin/index.css
index 00917600..17e24586 100644
--- a/FrontEnd/src/views/admin/index.css
+++ b/FrontEnd/src/views/admin/index.css
@@ -1,19 +1,33 @@
 .admin-user-item {
   position: relative;
+  border: var(--cru-primary-color) solid;
+  border-width: 1px 1px 0;
+  padding: 1em;
 }
+
+.admin-user-item:last-of-type {
+  border-bottom-width: 1px;
+}
+
 .admin-user-item .edit-mask {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  background: #ffffffc5;
+  background: rgba(255, 255, 255, 0.9);
   position: absolute;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
-  flex-direction: column;
 }
+
+@media (max-width: 576px) {
+  .admin-user-item .edit-mask {
+    flex-direction: column;
+  }
+}
+
 .admin-user-item .edit-mask button {
   margin: 0.5em 2em;
 }
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index b21ec896..05fdce04 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -198,6 +198,10 @@
   color: var(--cru-primary-color);
 }
 
+.cru-color-primary-enhance {
+  color: var(--cru-primary-enhance-color);
+}
+
 .cru-color-secondary {
   color: var(--cru-secondary-color);
 }
-- 
cgit v1.2.3