Contract details as modals

package-lock.json

@@ -936,6 +936,11 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -8,6 +8,7 @@
     "@11ty/eleventy-plugin-rss": "^1.0.7",
     "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
     "@tbranyen/jsdom": "^13.0.0",
+    "bootstrap": "^5.1.3",
     "concurrently": "^4.1.2",
     "copyfiles": "^2.4.1",
     "html-minifier": "^4.0.0",
@@ -38,8 +39,8 @@
     "sass:tokens": "npx json-to-scss src/_data/tokens.json src/scss/_tokens.scss",
     "sass:lint": "npx stylelint src/scss/**/*.scss",
     "sass:process": "npm run sass:tokens && npm run sass:lint && sass src/scss/global.scss src/_includes/assets/css/global.css --style=compressed",
-    "vendor:css": "copyfiles node_modules/leaflet/dist/leaflet.css -f dist/vendor/css",
+    "vendor:css": "copyfiles node_modules/leaflet/dist/leaflet.css node_modules/bootstrap/dist/css/bootstrap.min.css -f dist/vendor/css",
-    "vendor:js": "copyfiles node_modules/leaflet/dist/leaflet.js -f dist/vendor/js",
+    "vendor:js": "copyfiles node_modules/leaflet/dist/leaflet.js node_modules/bootstrap/dist/js/bootstrap.min.js -f dist/vendor/js",
     "vendor": "npm run vendor:css && npm run vendor:js",
     "start": "concurrently \"npm run vendor\" \"npm run sass:process -- --watch\" \"npm run serve\"",
     "serve": "cross-env ELEVENTY_ENV=development npx eleventy --serve",

src/_includes/layouts/base.njk

@@ -8,6 +8,7 @@
   {% include "partials/global/meta-info.njk" %}
   <script>document.documentElement.classList.remove('no-js');</script>
   <link rel = "stylesheet" href="/vendor/css/leaflet.css"/>
+  <link rel = "stylesheet" href="/vendor/css/bootstrap.min.css"/>
   <style>{% include "assets/css/global.css" %}</style>
   {% block head %}
   {% endblock %}
@@ -20,6 +21,7 @@
   {% block foot %}
   {% endblock %}
   <script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
+  <script type="text/javascript" src="/vendor/js/bootstrap.min.js" async defer></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {

src/_includes/layouts/team.njk

@@ -8,7 +8,7 @@
       <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
       {{ content | safe }}
       <h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2>
-      <ul class="tag-list mt-1">
+      <ul class="tag-list mt-3">
         {% for skill in collections.skillsList %}
           <li class="tag-item"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
         {% endfor %}

src/_includes/partials/components/map.njk

@@ -1,5 +1,5 @@
 <div class="[ wrapper ]">
-  <h2 class="mt-2">Où sommes-nous ?</h2>
+  <h2 class="mt-4">Où sommes-nous ?</h2>
 </div>
 <div id = "map" style = "width: 100%; height: 500px"></div>
 <script type="text/javascript" src="/vendor/js/leaflet.js"></script>

src/pages/nous-rejoindre.md

@@ -30,7 +30,8 @@ eleventyExcludeFromCollections: true
   - Ouverture des droits allocation chômage si rémunération
   - Attention, ce n’est pas un contrat de travail
   
-  [Voir le contrat CAPE en détail]()
+  <!-- [Voir le contrat CAPE en détail]() -->
+  <a type=button data-bs-toggle="modal" data-bs-target="#modalCAPE">Voir le contrat CAPE en détail</a>
   </div>
   </article>
   <article class="process-cae__block">
@@ -57,7 +58,8 @@ eleventyExcludeFromCollections: true
   - Ouverture des droits allocation chômage
   - Mutuelle santé
   
-  [Voir le contrat CESA en détail]()
+  <!-- [Voir le contrat CESA en détail]() -->
+  <a type=button data-bs-toggle="modal" data-bs-target="#modalCESA">Voir le contrat CESA en détail</a>
   </div>
 
   <img src="/images/crew.svg" alt="Equipage Astrolabe" style="width: 32rem; margin-bottom: 2rem;">
@@ -78,3 +80,39 @@ eleventyExcludeFromCollections: true
   <img id="small-boat" src="/images/small-boat.svg" alt="Petit bateau à voile">
   </article>
 </section>
+
+<!-- Modal for CAPE -->
+<div class="modal fade" id="modalCAPE" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Le CAPE en détails</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Contenu
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal for CESA -->
+<div class="modal fade" id="modalCESA" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Le CESA en détails</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Contenu
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+      </div>
+    </div>
+  </div>
+</div>

src/scss/_theme.scss

@@ -74,14 +74,6 @@ a:not([class]):visited {
   justify-content: flex-end;
 }
 
-.mt-1 {
-  margin-top: 1rem;
-}
-
-.mt-2 {
-  margin-top: 2rem;
-}
-
 .ml-1 {
   margin-left: 1rem;
 }