Reduce the events list to title, when and actions

5 files changed, 137 insertions, 33 deletions

diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 1e2e91dc..b14395ab 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -13,6 +13,37 @@ module EventsHelper
 
   def external_url_link(url)
     return nil if url.blank?
-    url.match?(%r{\Ahttps?://}i) ? link_to(url, url) : h(url)
+    return h(url) unless url.match?(%r{\Ahttps?://}i)
+    link_to(url, url, :target => "_blank", :rel => "noopener")
   end
+
+  def event_date_range(event)
+    return t("events.schedule.none") if event.start_time.blank?
+
+    from = event.start_time
+    to   = event.end_time
+
+    return one_day_range(from, event.allday) if to.blank? || to.to_date == from.to_date
+
+    if !event.allday && (to - from) <= 12.hours
+      return t("events.schedule.evening",
+               :date => admin_date(from),
+               :from => I18n.l(from, :format => :time),
+               :to   => I18n.l(to,   :format => :time))
+    end
+
+    key = from.year == to.year && from.month == to.month ? :same_month : :spanning
+    t("events.schedule.#{key}",
+       :from_day   => from.day, :to_day => to.day,
+       :from_month => I18n.l(from, :format => :ccc_month),
+       :to_month   => I18n.l(to,   :format => :ccc_month),
+       :from_full  => admin_date(from), :to_full => admin_date(to))
+  end
+
+  private
+
+    def one_day_range(from, allday)
+      return admin_date(from) if allday
+      admin_datetime(from)
+    end
 end
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 14790526..51269282 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -11,11 +11,7 @@
 <table class="events_table">
   <tr class="header">
     <th><%= t("admin.columns.title") %></th>
-    <th><%= Event.human_attribute_name(:start_time) %></th>
-    <th><%= Event.human_attribute_name(:end_time) %></th>
-    <th><%= Event.human_attribute_name(:rrule) %></th>
-    <th><%= Event.human_attribute_name(:url) %></th>
-    <th><%= Event.human_attribute_name(:start_node) %></th>
+    <th><%= t(".when") %></th>
     <th></th>
   </tr>
 
@@ -24,17 +20,52 @@
     <td>
       <div class="title_with_flags">
         <span class="flag_stack">
-          <%= flag("clock-off", Event.human_attribute_name(:allday)) if event.allday %>
+          <%= flag("hours-24", Event.human_attribute_name(:allday)) if event.allday %>
+          <%= flag("sticker", t(".flag_own_title")) if event.title.present? %>
+        </span>
+        <div class="title_body">
+          <div class="event_title"><%= link_to event.display_title, event %></div>
+          <% if event.node %>
+            <div class="event_meta">
+              <%= icon("file", library: "tabler", "aria-hidden": true) %>
+              <%= link_to event.node.unique_name, node_path(event.node) %>
+            </div>
+          <% end %>
+          <% if event.url.present? %>
+            <div class="event_meta">
+              <%= icon("external-link", library: "tabler", "aria-hidden": true) %>
+              <%= external_url_link(event.url) %>
+            </div>
+          <% end %>
+        </div>
+      </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>
+        <% end %>
+      <% else %>
+        <%= event_date_range(event) %>
+      <% end %>
+    </td>
+    <td class="actions">
+      <div class="action_grid">
+        <span class="action_item">
+          <%= link_to event_path(event), "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_event_path(event), "aria-label" => t("admin.common.edit"),
+                title: t("admin.common.edit") do %>
+            <%= icon("edit", library: "tabler", "aria-hidden": true) %>
+          <% end %>
         </span>
-        <div class="title_body"><%= link_to event.display_title, event %></div>
       </div>
     </td>
-    <td><%= admin_datetime(event.start_time) %></td>
-    <td><%= admin_datetime(event.end_time) %></td>
-    <td class="rrule_cell"><span class="rrule_text"><%= rrule_with_break_opportunities(event.rrule) %></span></td>
-    <td class="url_cell"><span class="truncate"><%= external_url_link(event.url) %></span></td>
-    <td><%= event.node ? link_to(event.node.unique_name, node_path(event.node)) : "" %></td>
-    <td><%= link_to t(".edit_link"), edit_event_path(event) %></td>
   </tr>
 <% end %>
 </table>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index df52da4c..1cd72106 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -41,6 +41,7 @@ de:
       short: "%e. %B, %H:%M Uhr"
       ccc: "%e. %B %Y, %H:%M Uhr"
       ccc_date: "%e. %B %Y"
+      ccc_month: "%B %Y"
       long: "%A, %e. %B %Y, %H:%M Uhr"
       time: "%H:%M"
 
@@ -580,8 +581,8 @@ de:
     index:
       title: "Termine"
       create_event: "Termin anlegen"
-      edit_link: "bearbeiten"
       search_placeholder: "Titel, Beschreibung, Ort, Tags durchsuchen…"
+      flag_own_title: "Hat einen eigenen Titel"
     show:
       title: "Termin"
       title_for_node: "Termin für Node %{path}"
@@ -595,6 +596,11 @@ de:
       node_hint: "Optional — Node suchen und auswählen, um diesen Termin mit einer Seite zu verknüpfen."
       recurrence: "Wiederholung"
       title_hint: "Optional. Bleibt das Feld leer, wird der Titel des verknüpften Nodes verwendet."
+    schedule:
+      none: "kein Datum"
+      same_month: "%{from_day}.–%{to_day}. %{to_month}"
+      spanning: "%{from_full} – %{to_full}"
+      evening: "%{date}, %{from}–%{to} Uhr"
     rrule_builder:
       weekly: "Wöchentlich"
       monthly: "Monatlich"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index f67016b9..9bd57c79 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -23,8 +23,9 @@ en:
 
   time:
     formats:
-      ccc: "%d %B, %Y %H:%M"
-      ccc_date: "%d %B, %Y"
+      ccc: "%-d %B %Y, %H:%M"
+      ccc_date: "%-d %B %Y"
+      ccc_month: "%B %Y"
 
   will_paginate:
     previous_label: "&#8592;"
@@ -527,8 +528,8 @@ en:
     index:
       title: "Events"
       create_event: "Create event"
-      edit_link: "edit"
       search_placeholder: "Search title, description, location, tags…"
+      flag_own_title: "Has its own title"
     edit:
       title: "Editing event"
       change_node: "Change node"
@@ -542,6 +543,11 @@ en:
       node_hint: "Optional — search and pick a node to associate this event with a page."
       recurrence: "Recurrence"
       title_hint: "Optional — if left blank, the associated node's title is used."
+    schedule:
+      none: "no date"
+      same_month: "%{from_day}.–%{to_day}. %{to_month}"
+      spanning: "%{from_full} – %{to_full}"
+      evening: "%{date}, %{from}–%{to}"
     rrule_builder:
       weekly: "Weekly"
       monthly: "Monthly"
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index b959597f..bd0c8412 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -763,21 +763,6 @@ table.revisions_table tr:hover {
   background-color: var(--surface-tint);
 }
 
-.events_table .rrule_text {
-  display: inline-block;
-  max-width: 300px;
-  overflow-wrap: break-word;
-}
-
-.events_table .truncate {
-  display: inline-block;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: bottom;
-}
-
 #diffview del {
   background: var(--diff-del-bg);
   color: var(--diff-del-fg);
@@ -832,6 +817,50 @@ table.revisions_table tr:hover {
   padding-right: 0;
 }
 
+.events_table td.title,
+.events_table th.title {
+  padding-right: 0.75rem;
+}
+
+.events_table .event_title {
+  font-weight: bold;
+}
+
+.events_table .event_meta {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-top: 0.15rem;
+  font-size: 0.875rem;
+}
+
+.events_table .event_meta svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.events_table .event_meta a {
+  overflow-wrap: anywhere;
+  color: var(--text-muted);
+}
+
+.events_table .event_when {
+  overflow-wrap: normal;
+  min-width: 7rem;
+  padding-right: 0.75rem;
+}
+
+.events_table .event_when .rrule_raw {
+  overflow-wrap: anywhere;
+}
+
+.events_table td.actions {
+  width: 1px;
+  white-space: nowrap;
+  padding-right: 0;
+}
+
 .action_grid {
   display: grid;
   gap: 0.4rem;
@@ -840,6 +869,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); }
 
 /* min-height keeps a row the same height whether or not the viewer may see
    the lower controls. */