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

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

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