Extract assignments listview into partial, add hanging indent

Hanging indent should add some visual separation for smaller screens.

app/views/application/_user_avatar.html.erb

-<span class="inline-flex items-center gap-x-0.5 rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10" style="background-color: <%= user.avatar_color %>" title="<%= user.name %>">
+<span class="inline-flex items-center gap-x-0.5 rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 indent-0" style="background-color: <%= user.avatar_color %>" title="<%= user.name %>">
   <span style="color: <%= user.text_color %>"><%= user.name %></span>
 </span>
 <%
   # user.name.split(/\s+/).map(&:first).join('')
-%>
+%>
\ No newline at end of file

app/views/assignments/_listview_date.html.erb

+<h5 class="text-base mt-2 <%= Time.parse(date).end_of_day < now ? "past" : "future" %>"><%= date %></h5>
+<ol class="list-inside">
+<% assignments_on_date.each do |assignment| %>
+    <li class="<%= assignment.session.starts_at < now ? "past" : "future" %> indent-[-2rem] ml-8">
+    <span class="tabular-nums"><%= assignment.session.starts_at.strftime('%H:%M') %> &ndash; <%= assignment.session.ends_at.strftime('%H:%M') %></span>:
+    <%= render partial: 'shared/session_filedrop', locals: { session: assignment.session } %><%= link_to assignment.session.title, conference_session_path(assignment.session.conference, assignment.session) %><%= render partial: 'shared/session_engelsystem', locals: { session: assignment.session } %> @ <%= assignment.session.stage.name %>
+    <small><% assignment.session.assignments.map(&:user).each do |other_user| %>
+        <%= render partial: 'application/user_avatar', locals: { user: other_user } %>
+    <% end %></small>
+    </li>
+<% end %>
+</ol>

app/views/assignments/by_user.html.erb

@@ -8,18 +8,7 @@
   <div>
     <h2 class="text-lg my-4">List View</h2>
     <% @user.assignments.includes(:session, session: :conference).order('sessions.starts_at').group_by { |a| a.session.starts_at.strftime('%Y-%m-%d') }.each do |date, assignments_on_date| %>
-      <h5 class="text-base mt-2 <%= Time.parse(date).end_of_day < now ? "past" : "future" %>"><%= date %></h5>
-      <ol class="list-inside">
-        <% assignments_on_date.each do |assignment| %>
-          <li class="<%= assignment.session.starts_at < now ? "past" : "future" %>">
-            <span class="tabular-nums"><%= assignment.session.starts_at.strftime('%H:%M') %> &ndash; <%= assignment.session.ends_at.strftime('%H:%M') %></span>:
-            <%= render partial: 'shared/session_filedrop', locals: { session: assignment.session } %><%= link_to assignment.session.title, conference_session_path(assignment.session.conference, assignment.session) %> @ <%= assignment.session.stage.name %><%= render partial: 'shared/session_engelsystem', locals: { session: assignment.session } %>
-            <small><% assignment.session.assignments.map(&:user).each do |other_user| %>
-              <%= render partial: 'application/user_avatar', locals: { user: other_user } %>
-            <% end %></small>
-          </li>
-        <% end %>
-      </ol>
+      <%= render partial: 'listview_date', locals: { assignments_on_date:, date:, now: } %>
     <% end %>
   </div>
 

app/views/assignments/index.html.erb

@@ -15,18 +15,7 @@
     <div class="my-4">
       <h4 class="text-xl my-2" id="<%= dom_id(user) %>"><%= link_to user.name, user_assignments_path(user) %> <span class="font-normal"><%= link_to user_assignments_path(user, format: 'ics') do %><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="ml-2 mb-1 size-4 inline-block stroke-slate-400 fill-slate-400"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"></path></svg><% end %></span></h4>
         <% assignments.group_by { |a| a.session.starts_at.strftime('%Y-%m-%d') }.each do |date, assignments_on_date| %>
-          <h5 class="text-base mt-2 <%= Time.parse(date).end_of_day < now ? "past" : "future" %>"><%= date %></h5>
-          <ol class="list-inside">
-            <% assignments_on_date.each do |assignment| %>
-              <li class="<%= assignment.session.starts_at < now ? "past" : "future" %>">
-                <span class="tabular-nums"><%= assignment.session.starts_at.strftime('%H:%M') %> &ndash; <%= assignment.session.ends_at.strftime('%H:%M') %></span>:
-                <%= render partial: 'shared/session_filedrop', locals: { session: assignment.session } %><%= link_to assignment.session.title, conference_session_path(assignment.session.conference, assignment.session) %><%= render partial: 'shared/session_engelsystem', locals: { session: assignment.session } %> @ <%= assignment.session.stage.name %>
-                <small><% assignment.session.assignments.map(&:user).each do |other_user| %>
-                  <%= render partial: 'application/user_avatar', locals: { user: other_user } %>
-                <% end %></small>
-              </li>
-            <% end %>
-          </ol>
+          <%= render partial: 'listview_date', locals: { assignments_on_date:, date:, now: } %>
         <% end %>
     </div>
   <% end %>