Update slots and actions style

assets/css/app.scss

@@ -101,7 +101,25 @@ ul.actions-list {
   list-style: none;
 }
 
+ul.actions-list > li ~ li {
+  margin-left:  0.5em;
+}
+
 dl.location {
   display: grid;
   grid-template-columns: min-content 1fr;
 }
+
+ul.slots-list {
+  display: inline-flex;
+  flex-wrap: wrap;
+  list-style: none;
+}
+
+ul.slots-list > li {
+  background-color: lightgrey;
+}
+
+ul.slots-list > li ~ li {
+  margin-left:  0.5em;
+}

lib/vaccins_web/live/location_component.ex

@@ -63,17 +63,18 @@ defmodule VaccinsWeb.LocationComponent do
         <%= if has_slots?(assigns) do %>
           <dt>Avant 24h</dt>
           <dd>
-            <ul><%= for d <- @slots_before do %><li><%= d |> DateTime.to_string %></li><% end %></ul>
+            <ul class="slots-list"><%= for d <- @slots_before do %><li><%= d |> DateTime.to_string %></li><% end %></ul>
           </dd>
           <dt>Après 24h</dt>
           <dd>
-            <ul><%= for d <- @slots_after do %><li><%= d |> DateTime.to_string %></li><% end %></ul>
+            <ul class="slots-list"><%= for d <- @slots_after do %><li><%= d |> DateTime.to_string %></li><% end %></ul>
           </dd>
         <% end %>
         <dt>actions</dt>
         <dd>
           <ul class="actions-list">
             <li><button phx-click="trigger_query" phx-target="<%= @myself %>">Trigger</button></li>
+            <li><a href="<%= @location |> to_json_query %>"><button>Debug</button></a></li>
             <li><button class="alert-danger" phx-click="delete" phx-target="<%= @myself %>" data-confirm="Etes-vous sur?">Delete</button></li>
           </ul>
         </dd>