f

.vscode/settings.json

@@ -7,7 +7,7 @@
     "terminal.background": "#1f1f1f",
     "terminal.ansiYellow": "#b38210" //BROWN UNIX ANSI
   },
-  "workbench.colorTheme": "Default Dark Modern",
+  "workbench.colorTheme": "Mr Pink",
   // ---------------------------------------------------------
   "[ruby]": {
     "editor.defaultFormatter": "Shopify.ruby-lsp", // Use the Ruby LSP as the default formatter
@@ -53,4 +53,4 @@
   "class-collapse.style.placeholderText": "➟",
   "class-collapse.style.openCollapseOpacity": 0.7,
   "class-collapse.style.placeholderTextColor": "#FFFF0055",
-}    
+}

app/assets/stylesheets/application.css

@@ -1,10 +1,5 @@
-/*
- * This is a manifest file that'll be compiled into application.css.
- *
- * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
- * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
- * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
- * depending on specificity.
- *
- * Consider organizing styles into separate files for maintainability.
- */
+.table {
+
+  width: 50%;
+  border: 2px solid #ffff
+}

app/views/livres/index.html.erb

@@ -25,9 +25,29 @@
         <td>
           <%= button_to "Supprimer", livre_path(livre), method: :delete, data: { confirm: "Supprimer ce livre ?" } %>
           <%= link_to "Modifier", edit_livre_path(livre), method: :edit, data: { confirm: "Modifier le livre ?" } %>
-                  </td>
+        </td>
       </tr>
     <% end %>
   </tbody>
 </table>
 <p><%= link_to "Ajouter un nouveau livre", new_livre_path %></p>
+<!-- Version sans tableau avec des div -->
+<div class="table">
+  <div class="table-header">
+    <div class="cell">Titre</div>
+    <div class="cell">Auteur</div>
+    <div class="cell">Date de sortie</div>
+    <div class="cell">Actions</div>
+  </div>
+  <% @livres.each do |livre| %>
+    <div class="table-row">
+      <div class="cell"><%= livre.titre %></div>
+      <div class="cell"><%= livre.auteur %></div>
+      <div class="cell"><%= livre.date_de_sortie %></div>
+      <div class="cell">
+        <%= link_to "Modifier", edit_livre_path(livre), class: "btn" %>
+        <%= button_to "Supprimer", livre_path(livre), method: :delete, data: { confirm: "Supprimer ce livre ?" }, class: "btn" %>
+      </div>
+    </div>
+  <% end %>
+</div>