This commit is contained in:
Charles Le Maux 2024-08-05 18:39:23 +02:00
commit 01ba3fa200
6 changed files with 220 additions and 96 deletions

View File

@ -38,8 +38,8 @@ const App = () => {
<Route path="*" element={<NotFoundPage />} />
</Routes>
<ToastContainer
position="top-center"
autoClose={2500}
position="top-right"
autoClose={3500}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
@ -47,7 +47,7 @@ const App = () => {
pauseOnFocusLoss
draggable
pauseOnHover
theme="colored"
theme="light"
/>
</div>
</Router>

View File

@ -102,7 +102,7 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
<option>Version</option>
<option value="1.21">1.21</option>
</select>
<div>
<div className={styles.buttonContainer}>
<button className={styles.btnServCreate} onClick={handleCreateServer}>
Créer
</button>

View File

@ -46,7 +46,6 @@
margin-right: 1rem;
}
.containerNoserveur {
display: flex;
justify-content: center;
@ -85,7 +84,7 @@
cursor: pointer;
}
.btnServCreate{
.btnServCreate {
width: 15rem;
height: 3.5rem;
margin-top: 2.5rem;
@ -93,10 +92,9 @@
font-weight: 900;
border-radius: 1rem;
background-color: #090325;
}
.mainCardCreateServ{
.mainCardCreateServ {
margin-top: 5rem;
display: flex;
justify-content: center;
@ -107,7 +105,7 @@
padding: 2rem;
}
.mainCardSubdomain{
.mainCardSubdomain {
background-color: #1D1836;
padding: 3rem;
margin-top: 5rem;
@ -115,7 +113,7 @@
width: 55rem;
}
.subtitle{
.subtitle {
font-size: 1.2rem;
color: #AAA6C3;
font-weight: 600;
@ -123,7 +121,7 @@
margin-bottom: 2rem;
}
.inputsubdomain{
.inputsubdomain {
width: 50rem;
padding: 1rem;
margin-top: 1rem;
@ -133,3 +131,83 @@
color: white;
font-size: 1rem;
}
@media (max-width: 800px) {
.buttonContainer{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.title {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.subtitle {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.input, .select {
width: 100%;
padding: 0.75rem;
font-size: 0.875rem;
}
.btnSubCreate, .btnServCreate {
margin-top: 2rem;
padding: 1rem 2.5rem;
font-size: 1rem;
margin-right: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.mainCardNoserveur {
padding: 2rem;
margin-top: 3rem;
}
.nsTitle {
font-size: 2rem;
}
.nsSubTitle {
font-size: 1.2rem;
}
.btnnoServCreate {
width: 100%;
height: 3.5rem;
font-size: 1.5rem;
margin-top: 3rem;
}
.btnServCreate {
width: 100%;
height: 2.5rem;
font-size: 1.25rem;
}
.mainCardCreateServ {
margin-top: 3rem;
padding: 1.5rem;
width: 35rem;
}
.mainCardSubdomain {
padding: 2rem;
margin-top: 3rem;
width: 100%;
}
.inputsubdomain {
width: 100%;
padding: 0.75rem;
font-size: 0.875rem;
}
}

View File

@ -30,7 +30,7 @@
background-color: #008d5f;
color: white;
border: none;
padding: 10px 20px;
padding: 1rem 1.6rem;
border-radius: 0.6rem;
outline: none;
cursor: pointer;
@ -42,7 +42,7 @@
background-color: #8d213e;
color: white;
border: none;
padding: 10px 20px;
padding: 1rem 1.6rem;
border-radius: 0.6rem;
outline: none;
cursor: pointer;

View File

@ -1,4 +1,3 @@
/* ServerDetails.module.scss */
.serverDetailsContainer {
padding-top: var(--navbar-height);
background-color: var(--main-bg-color);
@ -6,33 +5,37 @@
flex-direction: column;
align-items: center;
color: var(--text-color);
}
width: 100%;
box-sizing: border-box;
}
.details {
.details {
margin-top: 5rem;
padding: 3rem;
padding-top: 0rem;
padding-top: 0;
background-color: var(--card-bg-color);
width: 60rem;
width: 100%;
max-width: 60rem;
border-radius: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
box-sizing: border-box;
}
.formGroup {
.formGroup {
margin-bottom: 2.5rem;
display: flex;
flex-direction: column;
}
}
.formGroup label {
.formGroup label {
font-weight: bold;
margin-bottom: 1.2rem;
font-size: 1.4rem;
}
}
.formGroup input,
.formGroup select {
width: calc(100% - 2px);
.formGroup input,
.formGroup select {
width: 100%;
padding: 1.2rem;
height: 3.5rem;
background-color: var(--input-bg-color);
@ -40,44 +43,74 @@
border-radius: 0.5rem;
color: var(--text-color);
font-size: 1.2rem;
line-height: 1.4rem;
box-sizing: border-box;
}
}
.saveButton {
.saveButton,
.quitButton {
padding: 1.2rem 2.5rem;
color: var(--button-text-color);
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.3s;
font-size: 1.2rem;
margin-top: 1rem;
}
.saveButton {
background-color: var(--button-bg-color);
color: var(--button-text-color);
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.3s;
font-size: 1.2rem;
align-self: flex-start;
}
}
.quitButton{
padding: 1.2rem 2.5rem;
.quitButton {
background-color: gray;
color: var(--button-text-color);
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.3s;
font-size: 1.2rem;
align-self: flex-start;
margin-left: 3rem;
}
margin-left: 1rem;
}
.saveButton:hover {
.saveButton:hover {
background-color: var(--button-bg-hover-color);
}
}
.error {
.error {
color: red;
font-size: 1.2rem;
}
.details h1 {
font-size: 2.5rem;
margin-bottom: 3rem;
}
@media (max-width: 768px) {
.details {
width: 90%;
padding: 2rem;
}
.formGroup input,
.formGroup select {
height: 3rem;
font-size: 1rem;
padding: 1rem;
}
.saveButton,
.quitButton {
padding: 1rem 2rem;
font-size: 1rem;
}
.details h1 {
font-size: 2.5rem;
margin-bottom: 3rem;
font-size: 2rem;
margin-bottom: 2rem;
}
}
.formGroup input[type="number"],
.formGroup input[type="text"],
.formGroup select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

View File

@ -1,5 +1,5 @@
import { getAuth } from 'firebase/auth';
import {Bounce, toast} from "react-toastify";
import { Bounce, toast } from "react-toastify";
const apiUrl: string = 'https://www.servii.fr/api';
@ -69,17 +69,30 @@ class serviiApi {
}
return { return_code: status, message: json };
}
toast.info(json.message, {
position: "top-center",
autoClose: 2500,
let toastType: 'success' | 'error' | 'info';
let toastColor: string;
if (status >= 200 && status < 300) {
toastType = 'success';
} else if (status >= 400 && status < 600) {
toastType = 'error';
} else {
toastType = 'info';
}
toast[toastType](json.message, {
position: "top-right",
autoClose: 3500,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
theme: "light",
transition: Bounce,
});
return { return_code: status, message: json.message };
}