fix: css updating for better lisibilty
Some checks failed
Format / formatting (push) Successful in 6s
Build / build (push) Successful in 38s
CI / build (push) Failing after 8s
Format / formatting (pull_request) Successful in 5s

This commit is contained in:
Mohamed Maoulainine Maoulainine 2025-04-21 15:43:35 +02:00
parent 8b863ee4b1
commit 7c8f3ba36a
6 changed files with 204 additions and 158 deletions

View File

@ -42,7 +42,6 @@
import { postApi } from "@/services/api.ts"; import { postApi } from "@/services/api.ts";
const project = ref({ const project = ref({
idProject: 0,
projectName: "", projectName: "",
creationDate: "", creationDate: "",
logo: "to be discussed not yet fixed", logo: "to be discussed not yet fixed",
@ -54,6 +53,15 @@
</script> </script>
<style scoped> <style scoped>
h2{
font-size: 1.5rem;
color: #333;
margin-bottom: 1.2rem;
border-bottom: 2px solid #ddd;
padding-bottom: 0.5rem;
}
.add-project-form { .add-project-form {
max-width: 500px; max-width: 500px;
margin: 0 auto; margin: 0 auto;

View File

@ -2,12 +2,22 @@
<div id="agenda"> <div id="agenda">
<h3>Rendez-vous</h3> <h3>Rendez-vous</h3>
<table> <table>
<thead>
<tr>
<th>Projet</th>
<th>Date</th>
<th>Lieu</th>
</tr>
</thead>
<tbody> <tbody>
<tr v-for="(p, index) in projectRDV" :key="index"> <tr v-for="(p, index) in projectRDV" :key="index">
<td>{{ p.projectName }} </td> <td>{{ p.date }}</td> <td>{{ p.lieu }}</td> <td>{{ p.projectName }}</td>
<td>{{ p.date }}</td>
<td>{{ p.lieu }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</template> </template>
@ -26,10 +36,23 @@
</script> </script>
<style scoped> <style scoped>
h3{
font-size: 1.5rem;
color: #333;
margin-bottom: 1.2rem;
border-bottom: 2px solid #ddd;
padding-bottom: 0.5rem;
}
#agenda { #agenda {
padding: 20px; padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
} }
/* Table Styling */ /* Table Styling */
table { table {
width: 100%; width: 100%;
@ -40,14 +63,14 @@
border: 1px solid #ccc; border: 1px solid #ccc;
} }
/* Header Row (if exists) */
th { th {
background-color: #f4f4f4; background-color: #f0f2f5;
padding: 12px; padding: 12px;
font-weight: bold; font-weight: 600;
border: 1px solid #ccc; color: #333;
} }
/* Table Body Rows */ /* Table Body Rows */
tbody tr { tbody tr {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;

View File

@ -23,14 +23,24 @@ onMounted(() => {
if (roles.includes("MyINPulse-admin")) { if (roles.includes("MyINPulse-admin")) {
router.push("/"); router.push("/");
} else if (roles.includes("entrepreneur")) { } else if (roles.includes("MyINPulse-entrepreneur")) {
router.push("/entrepreneur"); router.push("/leanCanva");
} }
} catch (err) { } catch (err) {
console.error("Failed to decode token", err); console.error("Failed to decode token", err);
} }
} }
}); });
const loading = ref(false);
const callApiWithLoading = async (path: string) => {
loading.value = true;
await callApi(path);
loading.value = false;
};
</script> </script>
@ -170,4 +180,19 @@ h1 {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 6px; border-radius: 6px;
} }
/*
.status {
padding: 0.5rem 1rem;
border-radius: 8px;
display: inline-block;
background-color: #e0f7e9;
color: #2e7d32;
}
*/
.status.error {
background-color: #ffe2e2;
color: #c62828;
}
</style> </style>

View File

@ -5,7 +5,7 @@
<h2>{{ projectName }}</h2> <h2>{{ projectName }}</h2>
<p>Projet mis le: {{ creationDate }}</p> <p>Projet mis le: {{ creationDate }}</p>
</div> </div>
<div class="project-button"> <div class="project-buttons">
<button id="accept" @click="acceptProject">Accepter</button> <button id="accept" @click="acceptProject">Accepter</button>
<button id="refus" @click="refuseProject">Refuser</button> <button id="refus" @click="refuseProject">Refuser</button>
</div> </div>
@ -56,20 +56,26 @@ const refuseProject = () => sendDecision("false");
<style scoped> <style scoped>
.project { .project {
background: linear-gradient(to right, #f4f4f4, #ffffff); background: linear-gradient(to right, #f8f9fb, #ffffff);
border: 1px solid #ddd; border: 1px solid #e0e0e0;
border-radius: 10px; border-radius: 16px;
padding: 20px; padding: 1.5rem;
margin: 20px 0; margin: 1.5rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
transition: box-shadow 0.3s ease;
}
.project:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
} }
/* Header Styling */
.project-header { .project-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
flex-wrap: wrap;
gap: 1rem;
} }
.project-title { .project-title {
@ -78,72 +84,50 @@ const refuseProject = () => sendDecision("false");
} }
.project-title h2 { .project-title h2 {
font-size: 20px; font-size: 1.25rem;
color: #333; color: #222;
margin: 0; margin: 0;
font-weight: 600;
} }
.project-title p { .project-title p {
font-size: 14px; font-size: 0.9rem;
color: #777; color: #666;
margin-top: 4px; margin-top: 0.25rem;
} }
/* Button Container */
.project-buttons { .project-buttons {
display: flex; display: flex;
gap: 10px; gap: 0.75rem;
}
#accept {
background-color: #45a049;
}
#refus {
background-color: red;
} }
button { button {
padding: 10px 15px; padding: 0.5rem 1.1rem;
color: white; color: white;
border: none; border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer; cursor: pointer;
border-radius: 5px; transition: background-color 0.2s ease, transform 0.2s ease;
} }
button:hover { #accept {
transform: scale(1.05); background-color: #4CAF50;
} }
#accept:hover { #accept:hover {
background-color: #3e8e41; background-color: #3e8e41;
transform: translateY(-2px);
}
#refus {
background-color: #e74c3c;
} }
#refus:hover { #refus:hover {
background-color: darkred; background-color: #c0392b;
} transform: translateY(-2px);
/* Project Body (unchanged) */
.project-body {
margin-top: 15px;
}
.project-body p {
font-size: 16px;
color: #555;
margin-bottom: 10px;
}
.project-body ul {
list-style-type: disc;
margin: 0;
padding-left: 20px;
}
.project-body ul li {
font-size: 14px;
color: #666;
line-height: 1.6;
} }
</style> </style>

View File

@ -40,91 +40,70 @@ const goToLink = () => {
<style scoped> <style scoped>
.project { .project {
background: linear-gradient(to right, #f4f4f4, #ffffff); background: linear-gradient(to right, #f8f9fb, #ffffff);
border: 1px solid #ddd; border: 1px solid #e0e0e0;
border-radius: 10px; border-radius: 16px;
padding: 20px; padding: 1.5rem;
margin: 20px 0; margin: 1.5rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
font-family: Arial, sans-serif; transition: box-shadow 0.3s ease;
cursor: pointer;
}
.project:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
} }
/* Header Styling */
.project-header { .project-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
} }
.project-header h2 { .project-header h2 {
font-size: 20px; font-size: 1.25rem;
color: #333; color: #222;
margin: 0; margin: 0;
font-weight: 600;
} }
/* Button Container */
.project-buttons { .project-buttons {
display: flex; display: flex;
gap: 10px; gap: 0.5rem;
}
.info-btn {
background-color: #4CAF50;
color: #fff;
}
.info-btn:hover {
background-color: #45a049;
transform: scale(1.05);
} }
.contact-btn { .contact-btn {
background-color: #007BFF; background-color: #007bff;
color: #fff; color: #fff;
padding: 0.5rem 1rem;
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
transition: background-color 0.2s ease, transform 0.2s ease;
} }
.contact-btn:hover { .contact-btn:hover {
background-color: #0056b3; background-color: #0056b3;
transform: scale(1.05); transform: translateY(-2px);
} }
.project-body { .project-body {
margin-top: 15px; margin-top: 1rem;
}
.project-body p {
font-size: 16px;
color: #555;
margin-bottom: 10px;
} }
.project-body ul { .project-body ul {
list-style-type: disc; list-style-type: disc;
padding-left: 1.25rem;
margin: 0; margin: 0;
padding-left: 20px;
} }
.project-body ul li { .project-body ul li {
font-size: 14px; font-size: 0.95rem;
color: #666; color: #555;
line-height: 1.6; line-height: 1.6;
} }
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
</style> </style>

View File

@ -118,10 +118,28 @@ const rendezVous = ref([
<style scoped> <style scoped>
#container { #container {
margin: 0;
display: grid; display: grid;
grid-template-columns: 3fr 1fr; /* Main body takes 3/4, agenda 1/4 */ grid-template-columns: 3fr 1fr;
height: 100vh; /* Full viewport height */ gap: 2rem;
padding: 2rem;
background-color: #f4f6f9;
min-height: 100vh;
box-sizing: border-box;
}
#main {
background-color: #fff;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
h3 {
font-size: 1.5rem;
color: #333;
margin-bottom: 1.2rem;
border-bottom: 2px solid #ddd;
padding-bottom: 0.5rem;
} }
button { button {
@ -130,10 +148,19 @@ button {
color: white; color: white;
border: none; border: none;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 6px;
font-weight: 500;
transition: background-color 0.2s ease;
} }
button:hover { button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
/* Add spacing between project sections */
#main > * + * {
margin-top: 2rem;
}
</style> </style>