Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add responsiveness

Browse Source
This commit is contained in:
Laux Dev
2026-03-13 14:38:46 +08:00
parent 4478a74ece
commit f44258d134
28 changed files with 617 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/projects/add/styles.module.css
View File

@@ -14,10 +14,12 @@
align-items: center;
gap: 24px;
border-radius: 8px;
width: min(100%, 500px);
}
.inputGroup {
display: flex;
width: 500px;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 12px;

137
frontend/src/app/projects/page.jsx
View File

@@ -8,8 +8,11 @@ import SuccessToast from "../components/toast/success/successToast";
import DeleteIcon from "../components/icons/delete";
import ViewIcon from "../components/icons/view";
import ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./project-card/Card";
const ProjectsPage = () => {
const router = useRouter();
const isMobile = useIsMobile();
const sampleData = [
{
name: "DOKS One Cooperative Bank Backend Develop",
@@ -177,67 +180,81 @@ const ProjectsPage = () => {
topbarTitle="Project"
requiredButtons={["title", "add", "search"]}
/>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>CPU Used/Limit</th>
<th>Memory Used/Limit</th>
<th>Storage Used/Limit</th>
<th>Date Created</th>
<th></th>
</tr>
</thead>
<tbody>
{sampleData.map((project, index) => {
return (
<tr
key={index}
onClick={() => router.push("/projects/view")}
>
<td>{project.name}</td>
<td style={{ textAlign: "center" }}>{project.version}</td>
<td>
<span className={styles.used}>{project.cpuUsed}</span> /{" "}
<span className={styles.limit}>{project.cpuLimit}</span>
</td>
<td>
<span className={styles.used}>
{project.memoryUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.memoryLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.storageUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.storageLimit}
</span>
</td>
<td>{project.dateCreated}</td>
<td>
<div className={styles.actions}>
<div>
<ActionButton icon={<ViewIcon />} />
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
</div>
) : (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>CPU Used/Limit</th>
<th>Memory Used/Limit</th>
<th>Storage Used/Limit</th>
<th>Date Created</th>
<th></th>
</tr>
</thead>
<tbody>
{sampleData.map((project, index) => {
return (
<tr
key={index}
onClick={() => router.push("/projects/view")}
>
<td>{project.name}</td>
<td style={{ textAlign: "center" }}>
{project.version}
</td>
<td>
<span className={styles.used}>{project.cpuUsed}</span>{" "}
/{" "}
<span className={styles.limit}>
{project.cpuLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.memoryUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.memoryLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.storageUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.storageLimit}
</span>
</td>
<td>{project.dateCreated}</td>
<td>
<div className={styles.actions}>
<div>
<ActionButton icon={<ViewIcon />} />
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
</div>
</div>

46
frontend/src/app/projects/project-card/Card.jsx Normal file
View File

@@ -0,0 +1,46 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = () => {
return (
<div className={styles.cardContainer}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>DOKS One Cooperative Bank Backend Develop</p>
</div>
<div className={styles.list}>
<p>CPU Used/Limit</p>
<p>
<span className={styles.used}>13500</span> /{" "}
<span className={styles.limit}>20000</span>
</p>
</div>
<div className={styles.list}>
<p>Memory Used/Limit</p>
<p>
<span className={styles.used}>13500</span> /{" "}
<span className={styles.limit}>20000</span>
</p>
</div>
<div className={styles.list}>
<p>Storage Used/Limit</p>
<p>
<span className={styles.used}>10000</span> /{" "}
<span className={styles.limit}>1000000</span>
</p>
</div>
<div className={styles.list}>
<p>Date Created</p>
<p>2025-11-07 01:43:18.313 +0000 UTC</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

48
frontend/src/app/projects/project-card/styles.module.css Normal file
View File

@@ -0,0 +1,48 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list p {
color: #85869b;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.list p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 16px;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}
.used {
color: #50d85f;
}
.limit {
color: #85869b;
}

23
frontend/src/app/projects/styles.module.css
View File

@@ -19,7 +19,7 @@
}
.tableContainer > table > thead > tr > th {
text-wrap: nowrap;
text-wrap: wrap;
}
.tableContainer > table > thead > tr > th,
@@ -36,7 +36,7 @@
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -52,7 +52,7 @@
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -67,7 +67,8 @@
.used {
color: #50d85f;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -75,8 +76,20 @@
.limit {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
}

4
frontend/src/app/projects/view/add-from-scratch/page.jsx
View File

@@ -17,7 +17,7 @@ const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
const {
register,
@@ -55,7 +55,7 @@ const AddServices = () => {
{triggerAddVolume && (
<AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
)}
{triggeAddConfigMap && (
{triggerAddConfigMap && (
<AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
)}
<div className={globalStyle.mainContainer}>

2
frontend/src/app/projects/view/page.jsx
View File

@@ -116,7 +116,7 @@ const AddProject = () => {
<th>Version</th>
<th>Health</th>
<th>Status</th>
<th width="15%">Image</th>
<th width="10%">Image</th>
<th>Ingress</th>
<th>Port</th>
<th>Actions</th>

10
frontend/src/app/projects/view/styles.module.css
View File

@@ -18,7 +18,8 @@
text-wrap: nowrap;
color: #85869b;
font-family: Inter;
font-size: 13px;
z-index: 5;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -39,7 +40,8 @@
color: #eeeffd;
font-family: Inter;
overflow-wrap: anywhere;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -56,8 +58,9 @@
.servicesHealth,
.servicesStatus {
display: flex;
align-items: center;
align-items: start;
gap: 4px;
width: 100%;
align-self: stretch;
}
.servicesHealth > div,
@@ -128,6 +131,7 @@
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.iconButton {

2
frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx
View File

@@ -69,7 +69,7 @@ const AddConfigMapModal = (props) => {
</div>
</div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
<PrimaryButton text=" Add " icon={<AddIcon />} />
</div>
</div>
</div>

2
frontend/src/app/projects/view/variableModals/AddVolumes/AddVolumeModal.jsx
View File

@@ -61,7 +61,7 @@ const AddVolumeModal = (props) => {
</div>
</div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
<PrimaryButton text=" Add " icon={<AddIcon />} />
</div>
</div>
</div>