css

index.html

@@ -14,9 +14,9 @@
     </header>
     <main>
         <div id="intro">
-            <p>Cet espace est dédié à la coopération des projets de la Forge des Communs Numériques Éducatifs.</p>
-            <p>J'ai un besoin, je le décris pour qu'un-e collègue s'en saisisse et le développe.</p>
-            <p>Je développe, j'ai besoin de : scénarios, textes, illustrations, vidéos, rédaction de documentation ... je lance un appel à contribution. </p>
+            <p>Cet espace est dédié à la coopération au sein de la Forge des Communs Numériques Éducatifs.</p>
+            <p>▶️ J'ai une idée d'application qui n'existe pas encore, je le décris (précisément, ne pas hésiter à joindre un schéma...) pour qu'un-e collègue s'en saisisse et le développe. Je participe à la discussion et aux tests.</p>
+            <p>▶️ Je développe, j'ai besoin de : scénarios, textes, illustrations, vidéos, rédaction de documentation ... je lance un appel à contributions. </p>
         </div>
 
         <div id="boutons">

script.js

@@ -21,11 +21,21 @@ function displayIssues(issues) {
 
     issues.forEach(issue => {
         const row = document.createElement("tr");
-        console.log(issue);
+        let description = issue.description;
+
+        if (description.lenght > 50) {
+            description = `${description.slice(0, 50)} ...`;
+        }        
+
         row.innerHTML = `
-            <td title="${issue.description}"><a href="${issue.web_url}" target="_blank">${issue.title}</a></td>
+            <td><a href="${issue.web_url}" target="_blank">${issue.title}</a>
+            <br>
+            ${description}
+            <br>
+            <a class="bouton" href="${issue.web_url}" target="_blank">Lire en entier et répondre</a>            
+            </td>
             <td>${issue.upvotes} 👍</td>
-            <td>${issue.author.name}</td>
+            <td><img class="avatar" src="${issue.author.avatar_url}"> ${issue.author.name}</td>
             <td>${new Date(issue.updated_at).toLocaleDateString()}</td>
         `;
         tableBody.appendChild(row);

style.css

@@ -6,7 +6,7 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #f4f4f9;
+    background: linear-gradient(to bottom, rgb(102, 181, 255), white);
     color: #333;
     min-height: 100vh;
     padding-bottom: 60px;
@@ -16,7 +16,7 @@ body {
 
 /* Header styles */
 header {
-    background-color: #6c63ff;
+    background-color: #6b63ff83;
     color: white;
     padding: 1rem;
     text-align: center;
@@ -54,7 +54,7 @@ main {
     padding: 1rem;
     border-radius: 8px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    margin-bottom: 2rem;
+    margin-bottom: 0;
     font-size: 1rem;
 }
 
@@ -65,7 +65,7 @@ main {
 
 /* Buttons */
 #boutons {
-    margin: 2rem 0;
+    margin: 1rem 0;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
@@ -93,13 +93,37 @@ main {
 }
 
 /* Table styles */
+
+.table-container {
+    background-color: transparent;
+}
+
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 1rem;
-    background-color: white;
+    background-color: transparent;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     font-size: 1rem;
+    border-radius: 1em 1em 0em 0em;
+}
+
+table a.bouton {
+    display: inline-block;
+    padding: 2px;
+    text-decoration: none;
+    color: white;
+    background-color: #007bff;
+    border: 1px solid #0056b3;
+    border-radius: 3px;
+    font-size: 0.8rem;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+table a.bouton:hover {
+    background-color: #0056b3;
 }
 
 th, td {
@@ -113,8 +137,33 @@ th {
     color: white;
 }
 
+th:first-child {
+    border-radius: 1em 0em 0em 0em;
+}
+
+th:last-child {
+    border-radius: 0em 1em 0em 0em;
+}
+
+tr {
+    background-color: rgb(255, 255, 255);
+    transition: background-color linear 0.1s;
+}
+
 tr:hover {
-    background-color: #f1f1f1;
+    background-color: rgb(208, 255, 249);
+}
+
+thead>tr, thead>tr:hover {
+    background-color: transparent;
+}
+
+
+.avatar {
+    border-radius: 50%;
+    vertical-align: middle;
+    max-width: 2em;
+    max-height: 2em;
 }
 
 /* Footer */
@@ -173,12 +222,15 @@ footer p {
         overflow-x: auto;
         margin: 0 -0.5rem;
         padding: 0 0.5rem;
+
     }
 
     table {
         font-size: 1.1rem;
     }
 
+
+
     th, td {
         padding: 0.8rem;
         min-width: 120px;