Make the events and assets lists work on a phone

5 files changed, 136 insertions, 25 deletions

diff --git a/app/views/assets/index.html.erb b/app/views/assets/index.html.erb
index d2c5d6cc..84f096c2 100644
--- a/app/views/assets/index.html.erb
+++ b/app/views/assets/index.html.erb
@@ -12,21 +12,55 @@
   <tr class="header">
     <th><%= t("admin.columns.preview") %></th>
     <th><%= t("admin.columns.name") %></th>
-    <th><%= t("admin.columns.type") %></th>
-    <th></th>
-    <th></th>
     <th></th>
   </tr>
 <% @assets.each do |asset| %>
   <tr>
-    <td><% if asset.has_variant?(:thumb) %><%= image_tag asset.upload.url(:thumb), style: "max-width: 100px; max-height: 100px;" %><% end %></td>
-    <td><%= link_to asset.name, asset.upload.url %></td>
-    <td><%= asset.upload.content_type %></td>
-    <td><%= link_to t("admin.common.show"), asset %></td>
-    <td><%= link_to t("admin.common.edit"), edit_asset_path(asset) %></td>
-    <td><%= button_to asset, method: :delete, form: { data: { confirm: t("admin.common.confirm_sure") }, class: 'button_to destructive' } do %>
-      <%= icon("trash", library: "tabler", "aria-hidden": true) %> <%= t("admin.common.destroy") %>
-    <% end %></td>
+    <td class="asset_thumb">
+      <% if asset.has_variant?(:thumb) %>
+        <%= link_to image_tag(asset.upload.url(:thumb), :alt => ""), asset,
+              :class => "asset_thumb_link" %>
+      <% end %>
+    </td>
+    <td>
+      <div class="asset_name">
+        <%= link_to asset.name.presence || asset.upload_file_name, asset %>
+      </div>
+      <div class="asset_meta asset_file">
+        <%= icon("external-link", library: "tabler", "aria-hidden": true) %>
+        <%= link_to asset.upload_file_name, asset.upload.url,
+              :target => "_blank", :rel => "noopener" %>
+      </div>
+      <div class="asset_meta asset_type">
+        <%= asset.upload.content_type %> ·
+        <%= number_to_human_size(asset.upload.size) %>
+      </div>
+    </td>
+    <td class="actions">
+      <div class="action_grid">
+        <span class="action_item">
+          <%= link_to asset, "aria-label" => t("admin.common.show"),
+                title: t("admin.common.show") do %>
+            <%= icon("eye", library: "tabler", "aria-hidden": true) %>
+          <% end %>
+        </span>
+        <span class="action_item">
+          <%= link_to edit_asset_path(asset), "aria-label" => t("admin.common.edit"),
+                title: t("admin.common.edit") do %>
+            <%= icon("edit", library: "tabler", "aria-hidden": true) %>
+          <% end %>
+        </span>
+        <span class="action_item">
+          <%= button_to asset, method: :delete,
+                form: { data: { confirm: t("admin.common.confirm_sure") },
+                        class: 'button_to destructive' },
+                "aria-label" => t("admin.common.destroy"),
+                title: t("admin.common.destroy") do %>
+            <%= icon("trash", library: "tabler", "aria-hidden": true) %>
+          <% end %>
+        </span>
+      </div>
+    </td>
   </tr>
 <% end %>
 </table>
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 51269282..2497a577 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -17,7 +17,7 @@
 
 <% @events.each do |event| %>
   <tr>
-    <td>
+    <td class="title">
       <div class="title_with_flags">
         <span class="flag_stack">
           <%= flag("hours-24", Event.human_attribute_name(:allday)) if event.allday %>
@@ -41,14 +41,22 @@
       </div>
     </td>
     <td class="event_when">
-      <% if event.rrule.present? %>
-        <span class="rrule_raw" title="<%= event.rrule %>"><%= event_schedule_text(event) %></span>
-        <% if event.humanize_rrule.nil? && event.start_time %>
-          <div class="event_meta"><%= admin_date(event.start_time) %></div>
+      <div class="when_body">
+        <% if event.rrule.present? %>
+          <% if event.humanize_rrule %>
+            <span title="<%= event.rrule %>"><%= event_schedule_text(event) %></span>
+          <% else %>
+            <span class="rrule_raw" title="<%= event.rrule %>">
+              <%= t("events.schedule.unreadable") %>
+            </span>
+            <% if event.start_time %>
+              <div class="event_meta"><%= admin_date(event.start_time) %></div>
+            <% end %>
+          <% end %>
+        <% else %>
+          <%= event_date_range(event) %>
         <% end %>
-      <% else %>
-        <%= event_date_range(event) %>
-      <% end %>
+      </div>
     </td>
     <td class="actions">
       <div class="action_grid">
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 1cd72106..fe40e507 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -388,7 +388,6 @@ de:
       editor: "Editor"
       date: "Datum"
       author: "Autor"
-      type: "Typ"
     index:
       title: "cccms Dashboard"
       search_placeholder: "Nodes und Tags durchsuchen…"
@@ -601,6 +600,7 @@ de:
       same_month: "%{from_day}.–%{to_day}. %{to_month}"
       spanning: "%{from_full} – %{to_full}"
       evening: "%{date}, %{from}–%{to} Uhr"
+      unreadable: "Termin-Regel nicht lesbar"
     rrule_builder:
       weekly: "Wöchentlich"
       monthly: "Monatlich"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9bd57c79..55c0abc5 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -336,7 +336,6 @@ en:
       author: "Author"
       editor: "Editor"
       date: "Date"
-      type: "Type"
     index:
       title: "cccms dashboard"
       search_placeholder: "Search nodes and tags…"
@@ -548,6 +547,7 @@ en:
       same_month: "%{from_day}.–%{to_day}. %{to_month}"
       spanning: "%{from_full} – %{to_full}"
       evening: "%{date}, %{from}–%{to}"
+      unreadable: "Schedule not readable"
     rrule_builder:
       weekly: "Weekly"
       monthly: "Monthly"
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index bd0c8412..acb87aba 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -811,7 +811,8 @@ table.revisions_table tr:hover {
 }
 
 .user_table td.actions,
-.node_table td.actions {
+.node_table td.actions,
+.assets_table td.actions {
   width: 1px;
   white-space: nowrap;
   padding-right: 0;
@@ -822,24 +823,29 @@ table.revisions_table tr:hover {
   padding-right: 0.75rem;
 }
 
+.assets_table .asset_name,
 .events_table .event_title {
   font-weight: bold;
 }
 
+.assets_table .asset_meta,
 .events_table .event_meta {
   display: flex;
   align-items: center;
   gap: 0.3rem;
-  margin-top: 0.15rem;
+  margin-top: 0.35rem;
   font-size: 0.875rem;
+  color: var(--text-muted);
 }
 
+.assets_table .asset_meta svg,
 .events_table .event_meta svg {
   width: 0.875rem;
   height: 0.875rem;
   flex-shrink: 0;
 }
 
+.assets_table .asset_meta a,
 .events_table .event_meta a {
   overflow-wrap: anywhere;
   color: var(--text-muted);
@@ -861,6 +867,69 @@ table.revisions_table tr:hover {
   padding-right: 0;
 }
 
+.assets_table .asset_thumb img {
+  display: block;
+  max-width: 120px;
+  max-height: 120px;
+}
+
+.assets_table td.asset_thumb {
+  padding-right: 0.75rem;
+}
+
+@media (max-width: 34rem) {
+  .events_table,
+  .events_table tbody,
+  .assets_table,
+  .assets_table tbody {
+    display: block;
+  }
+
+  .events_table tr.header,
+  .assets_table tr.header {
+    display: none;
+  }
+
+  .events_table td,
+  .assets_table td {
+    display: contents;
+  }
+
+  .assets_table tr {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "thumb actions"
+      "thumb type"
+      "name  name"
+      "file  file";
+    align-items: start;
+    column-gap: 0.75rem;
+    padding: 0.5rem 0;
+  }
+
+  .events_table tr {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "title actions"
+      "when  when";
+    align-items: start;
+    column-gap: 0.75rem;
+    padding: 0.5rem 0;
+  }
+
+  .events_table .title_with_flags { grid-area: title; }
+  .assets_table .asset_thumb_link { grid-area: thumb; }
+  .assets_table .asset_type       { grid-area: type; align-self: end; }
+  .events_table .when_body       { grid-area: when; margin-top: 0.4rem; padding-left: 2rem; }
+  .assets_table .asset_name       { grid-area: name; margin-top: 0.4rem; }
+  .assets_table .asset_file       { grid-area: file; }
+
+  .events_table .action_grid,
+  .assets_table .action_grid      { grid-area: actions; }
+}
+
 .action_grid {
   display: grid;
   gap: 0.4rem;
@@ -870,6 +939,7 @@ table.revisions_table tr:hover {
 .user_table .action_grid { grid-template-columns: repeat(3, auto); }
 .node_table .action_grid { grid-template-columns: repeat(2, auto); }
 .events_table .action_grid { grid-template-columns: repeat(2, auto); }
+.assets_table .action_grid { grid-template-columns: repeat(3, auto); }
 
 /* min-height keeps a row the same height whether or not the viewer may see
    the lower controls. */
@@ -1566,9 +1636,8 @@ input#menu_item_title {
   margin-bottom: 1rem;
 }
 
-/* Pushes the actions to the right of the heading. */
 .page_actions h1 {
-  margin: 0 auto 0 0;
+  margin: 0 0.75rem 0 0;
 }
 
 .page_action_group {