diff options
| -rw-r--r-- | FrontEnd/src/views/admin/Admin.tsx | 2 | ||||
| -rw-r--r-- | FrontEnd/src/views/admin/AdminNav.tsx | 3 | ||||
| -rw-r--r-- | FrontEnd/src/views/admin/UserAdmin.tsx | 16 | ||||
| -rw-r--r-- | FrontEnd/src/views/admin/index.css | 20 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/index.css | 4 |
5 files changed, 32 insertions, 13 deletions
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);
}
|