jbah.skp/PasswordBox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend

Browse Source
This commit is contained in:
Jesper 2024-10-09 19:56:04 +02:00
parent f6b25a1a20
commit ed6985c670
2 changed files with 92 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/pages/Admin/index.tsx
View File

@ -143,7 +143,8 @@ export function Admin() {
<div className="admin-dashboard">
<h1>Admin Dashboard</h1>
<div className="section users-section">
<div className="grid-container">
<div className="section">
<h2>Users</h2>
<ul>
{users.map(user => (
@ -155,7 +156,7 @@ export function Admin() {
</ul>
</div>
<div className="section groups-section">
<div className="section">
<h2>Groups</h2>
<ul>
{groups.map(group => (
@ -167,7 +168,7 @@ export function Admin() {
</ul>
</div>
<div className="section add-to-group-section">
<div className="section">
<h2>Add User to Group</h2>
<form onSubmit={(e) => {
e.preventDefault();
@ -193,7 +194,7 @@ export function Admin() {
</form>
</div>
<div className="section register-section">
<div className="section">
<h2>Register New User</h2>
<form onSubmit={registerUser}>
<input
@ -221,7 +222,7 @@ export function Admin() {
</form>
</div>
<div className="section create-group-section">
<div className="section">
<h2>Create New Group</h2>
<form onSubmit={createGroup}>
<input
@ -235,5 +236,6 @@ export function Admin() {
</form>
</div>
</div>
</div>
);
}

15
frontend/src/pages/Admin/style.css
View File

@ -14,12 +14,11 @@
color: #b682ff;
}
/* Flexbox Layout */
.grid-container {
display: flex;
flex-wrap: wrap; /* Wrap the sections into the next row when needed */
flex-wrap: wrap;
gap: 20px;
justify-content: space-between; /* Distribute the sections horizontally with space between */
justify-content: space-between;
}
.section {
@ -27,8 +26,8 @@
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
flex: 1 1 30%; /* Make the section take up approximately 30% of the row */
min-width: 280px; /* Ensure each section has a minimum width */
flex: 1 1 30%;
min-width: 280px;
box-sizing: border-box;
transition: transform 0.2s ease;
}
@ -43,7 +42,6 @@ h2 {
margin-bottom: 15px;
}
/* List Styles */
ul {
list-style: none;
padding: 0;
@ -102,15 +100,14 @@ button:hover {
background-color: #9b50ff;
}
/* Responsive Adjustments */
@media (max-width: 900px) {
.section {
flex: 1 1 45%; /* For medium screens, display 2 sections per row */
flex: 1 1 45%;
}
}
@media (max-width: 600px) {
.section {
flex: 1 1 100%; /* For small screens, each section takes full width */
flex: 1 1 100%;
}
}