Handle articles

index.html

@@ -38,16 +38,18 @@
           <div class="columns is-multiline p-3">
             {{#data}}
               <div class="column is-one-third">
-                <div class="card">
+                <div class="card" onclick="openModalFromTemplate()"
+                  hx-target=".modal-request"
+                  hx-get="http://localhost:1337/api/articles/{{id}}?populate=couverture,fichiers">
                   <div class="card-image">
-                    <figure class="image is-square">
+                    <figure id="info-details" class="image is-3by2">
                       <img src="http://localhost:1337{{attributes.couverture.data.attributes.url}}" alt="{{attributes.couverture.data.attributes.alternativeText}}">
                     </figure>
                   </div>
                   <div class="card-content">
                     <div class="content">
                       <h2 class="title">{{attributes.titre}}</h2>
-                      {{{attributes.chapeau}}}
+                      <p class="is-italic">{{{attributes.chapeau}}}</p>
                     </div>
                   </div>
                   <footer class="card-footer">
@@ -793,6 +795,28 @@
         </footer>
       </div>
     </div>
+    <div id="modal-article" class="modal">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p id="article-titre" class="modal-card-title"></p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section id="modal-card-render" class="modal-card-body">
+          <figure class="image is-3by2 mx-auto mb-3">
+            <img id="article-couverture">
+          </figure>
+          <p id="article-chapeau" class="mb-5 is-italic subtitle"></p>
+          <p id="article-contenu"></p>
+          <hr>
+          <div id="article-fichiers"></div>
+        </section>
+        <section class="modal-request"></section>
+        <footer class="modal-card-foot">
+          <button class="button">Fermer</button>
+        </footer>
+      </div>
+    </div>
     <footer class="footer">
       <div class="content has-text-centered">
         <q>
@@ -805,7 +829,7 @@
         <br>
         <small>Serge GLAUDE (Co-fondateur du GONG)</small>
       </div>
-    </footer>    
+    </footer>
     <script src="./js/main.js"></script>
     <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>