Changed tartiflette list to flexbox container.

2 files changed, 48 insertions, 26 deletions

diff --git a/app/assets/stylesheets/components/tartiflette_container.css b/app/assets/stylesheets/components/tartiflette_container.css
new file mode 100644
index 0000000..64c4053
--- /dev/null
+++ b/app/assets/stylesheets/components/tartiflette_container.css
@@ -0,0 +1,39 @@
+.tartiflette-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+
+    .tartiflette-box {
+	border-radius: 1rem;
+	padding: 1rem;
+	width: 8rem;
+	text-align: center;
+	background-color: white;
+    }
+
+    .tartiflette-box:hover {
+	background-color: whitesmoke;
+    }
+
+    .tartiflette-link {
+	display: inline-block;
+	margin-top: 0.5rem;
+	padding: 0.5rem 1rem;
+	text-decoration: none;
+	color: white;
+	border-radius: 1rem;
+    }
+
+    .scored {
+	background-color: forestgreen;
+    }
+
+    .unscored {
+	background-color: firebrick;
+    }
+
+    .tartiflette-link:hover {
+	background-color: #0056b3; /* Darker blue for hover effect */
+    }
+}
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index ca8f3a3..cc25992 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -4,39 +4,22 @@
 
 <%= render "code_of_honor" %>
 
-<h2>Noter les Tartiflettes</h2>
-<ul>
+<!-- <h2>Noter les Tartiflettes</h2> -->
+<div class="tartiflette-container">
     <% @tartiflettes.each do |tartiflette| %>
-	<li><%= tartiflette.scoring_id %>
+	<div class="tartiflette-box">
+	    <p>Tartiflette <%= tartiflette.scoring_id %></p>
 	    <% if session[:agreed_to_code_of_honor] %>
 		<% if TartifletteScoringService.scored?(tartiflette, session) %>
-		    <%= link_to "modifier", tartiflette_edit_scores_path(tartiflette) %>
+		    <%= link_to "Modifier", tartiflette_edit_scores_path(tartiflette), class: [ "tartiflette-link", "scored" ] %>
 		<% else %>
-		    <%= link_to "noter", new_tartiflette_score_path(tartiflette) %>
+		    <%= link_to "Noter", new_tartiflette_score_path(tartiflette), class: [ "tartiflette-link", "unscored" ] %>
 		<% end %>
 	    <% end %>
-	</li>
+	</div>
     <% end %>
-</ul>
-<!-- 
-     <h2>Résultats</h2>
-     <table>
-     <thead>
-     <tr>
-     <th>Tartiflette</th>
-     <th>Points</th>
-     </tr>
-     </thead>
-     <tbody>
-     <% TartifletteScoringService.leaderboard.each do |tartiflette, total_score| %>
-     <tr>
-     <td><%= tartiflette.scoring_id %></td>
-     <td><%= total_score %></td>
-     </tr>
-     <% end %>
-     </tbody>
-     </table>
--->
+</div>
+
 <p>
     <%= link_to "Admin", admin_dashboard_path %>
 </p>