piair/MyINPulse
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: using bootstrap..
Some checks failed
Format / formatting (push) Successful in 7s
Details
Build / build (push) Successful in 43s
Details
CI / build (push) Failing after 11s
Details
Format / formatting (pull_request) Successful in 6s
Details

Browse Source
This commit is contained in:
ALAMI Adnane
2025-04-11 19:42:38 +02:00
parent 60290956ec
commit f8991e90ab
5 changed files with 209 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="canvas">
<div class="canvas container-fluid">
<CanvasItem
v-for="(item, index) in items"
:key="index"
@ -7,13 +7,13 @@
:title_text="item.title_text"
:description="item.description"
:projectId="item.projectId"
:class="item.class"
:class="['canvas-item', item.class, 'card', 'shadow', 'p-3']"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, onMounted } from "vue";
import CanvasItem from "@/components/canvas/CanvasItem.vue";
const items = ref([
@ -28,6 +28,20 @@ const items = ref([
{ projectId: 1, title: 9, title_text: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
]);
onMounted(() => {
const bootstrapCss = document.createElement('link')
bootstrapCss.rel = 'stylesheet'
bootstrapCss.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'
bootstrapCss.integrity = 'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+Fpc+NC'
bootstrapCss.crossOrigin = 'anonymous'
document.head.appendChild(bootstrapCss)
const bootstrapJs = document.createElement('script')
bootstrapJs.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'
bootstrapJs.integrity = 'sha384-mQ93S0EhrF4Z1nM+fTflmYf0DyzsY5j7F5H3WlClDD6H3WUJh6kxBkF3GDW8n1j6'
bootstrapJs.crossOrigin = 'anonymous'
document.body.appendChild(bootstrapJs)
})
</script>
<style scoped>
@ -37,23 +51,27 @@ const items = ref([
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 10px;
padding: 10px;
max-width: 1200px;
margin: 20px auto;
background-color: #fff;
gap: 12px;
padding: 30px;
/*background-color: #f8f9fa;*/
position: relative;
height: 80vh;
height: 90vh;
overflow: auto;
}
.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; padding-top: 20px;}
.Segments { grid-column: 9 / 11; grid-row: 1 / 5; padding-top: 20px;}
.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; padding-top: 20px;}
.Solution { grid-column: 3 / 5; grid-row: 1 / 3; padding-top: 20px;}
.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; padding-top: 20px;}
.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; padding-top: 20px;}
.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; padding-top: 20px;}
.Couts { grid-column: 1 / 6; grid-row: 5 / 7; padding-top: 20px;}
.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; padding-top: 20px;}
.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; }
.Segments { grid-column: 9 / 11; grid-row: 1 / 5; }
.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; }
.Solution { grid-column: 3 / 5; grid-row: 1 / 3; }
.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; }
.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; }
.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
.Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }
.canvas-item {
/*background-color: white;*/
border: 1px solid #dee2e6;
border-radius: 0.5rem;
}
</style>