7 files changed, 196 insertions, 30 deletions

diff --git a/app/controllers/menu_items_controller.rb b/app/controllers/menu_items_controller.rb
index 48018800..f169e0ca 100644
--- a/app/controllers/menu_items_controller.rb
+++ b/app/controllers/menu_items_controller.rb
@@ -54,6 +54,16 @@ class MenuItemsController < ApplicationController
     head :ok
   end
 
+  def move_up
+    MenuItem.find(params[:id]).move_higher
+    redirect_to menu_items_path
+  end
+
+  def move_down
+    MenuItem.find(params[:id]).move_lower
+    redirect_to menu_items_path
+  end
+
   private
 
     def menu_item_params
diff --git a/app/views/menu_items/index.html.erb b/app/views/menu_items/index.html.erb
index cdc60c63..0eacc34a 100644
--- a/app/views/menu_items/index.html.erb
+++ b/app/views/menu_items/index.html.erb
@@ -4,18 +4,55 @@
   <%= icon("plus", library: "tabler", "aria-hidden": true) %> <%= t(".create_item") %>
 <% end %>
 
+<p class="field_hint"><%= t(".reorder_hint") %></p>
+
 <table id="menu_item_list">
   <% @menu_items.each do |menu_item| %>
   <tr id="menu_items-<%= menu_item.id %>">
     <td class="menu_sort_handle">
-      <div></div>
+      <span class="menu_grip"><%= icon("grip-vertical", library: "tabler", "aria-hidden": true) %></span>
+
+      <%= button_to move_up_menu_item_path(menu_item), method: :post,
+            disabled: menu_item.first?,
+            form: { class: "button_to menu_move" },
+            "aria-label" => t(".move_up"), title: t(".move_up") do %>
+        <%= icon("chevron-up", library: "tabler", "aria-hidden": true) %>
+      <% end %>
+
+      <%= button_to move_down_menu_item_path(menu_item), method: :post,
+            disabled: menu_item.last?,
+            form: { class: "button_to menu_move" },
+            "aria-label" => t(".move_down"), title: t(".move_down") do %>
+        <%= icon("chevron-down", library: "tabler", "aria-hidden": true) %>
+      <% end %>
+    </td>
+    <td class="menu_item_title">
+      <%= menu_item.title %>
+      <% (I18n.available_locales - [:root, I18n.default_locale]).each do |locale| %>
+        <% translated = menu_item.translations.find_by(:locale => locale)&.title %>
+        <span class="menu_item_translation">
+          <span class="menu_item_translation_locale"><%= locale.to_s.upcase %></span>
+          <% if translated.present? %>
+            <%= translated %>
+          <% else %>
+            <span class="menu_item_translation_absent"><%= t(".falls_back") %></span>
+          <% end %>
+        </span>
+      <% end %>
+    </td>
+    <td class="menu_item_action">
+      <%= link_to edit_menu_item_path(menu_item),
+            "aria-label" => t("admin.common.edit"),
+            title: t("admin.common.edit") do %>
+        <%= icon("edit", library: "tabler", "aria-hidden": true) %>
+      <% end %>
     </td>
-    <td class="menu_item_title"><%= menu_item.title %></td>
-    <td><%= link_to t("admin.common.edit"), edit_menu_item_path(menu_item) %></td>
-    <td>
+    <td class="menu_item_action">
       <%= button_to menu_item_path(menu_item), method: :delete,
-            form: { data: { confirm: t(".confirm_destroy") }, class: 'button_to destructive' } do %>
-        <%= icon("trash", library: "tabler", "aria-hidden": true) %> <%= t("admin.common.destroy") %>
+            form: { data: { confirm: t(".confirm_destroy") }, class: 'button_to destructive' },
+            "aria-label" => t("admin.common.destroy"),
+            title: t("admin.common.destroy") do %>
+        <%= icon("trash", library: "tabler", "aria-hidden": true) %>
       <% end %>
     </td>
   </tr>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 647caf57..2d5e9685 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -669,6 +669,10 @@ de:
       title: "Menüeinträge"
       create_item: "Menüeintrag anlegen"
       confirm_destroy: "Diesen Menüeintrag wirklich löschen?"
+      reorder_hint: "Die Einträge im Navi-Menü kann man draggen"
+      falls_back: "… Fallback auf deutsch"
+      move_up: "Nach oben"
+      move_down: "Nach unten"
     new:
       title: "Menüeintrag hinzufügen"
     edit:
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 1b112e3d..da8282cf 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -481,6 +481,10 @@ en:
       title: "Menu Items"
       create_item: "Create menu item"
       confirm_destroy: "Do you really want to destroy the menu entry?"
+      reorder_hint: "Drag the handles to change the order"
+      falls_back: "… falls back to German"
+      move_up: "Move up"
+      move_down: "Move down"
     new:
       title: "Add Menu Item"
     edit:
diff --git a/config/routes.rb b/config/routes.rb
index 9793c6a6..4b5d15c9 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -108,6 +108,8 @@ Cccms::Application.routes.draw do
     resources :menu_items, :except => :show do
       member do
         post :sort
+        post :move_up
+        post :move_down
       end
     end
 
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index ee0b34cd..d94fb623 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -386,9 +386,16 @@ menu_item_sorter = {
           type: "POST",
           url: "/menu_items/0/sort",
           data: $(this).sortable("serialize"),
-          dataType: "json",
-          success : function(results) {
-            alert(results);
+          success : function() {
+            // The controller answers head :ok, so there is nothing to parse
+            // and dataType: "json" would send every success down the error
+            // path. Reload rather than patch the DOM: first?/last? decide the
+            // disabled chevrons server-side, and after a drag they describe
+            // the old order.
+            window.location.reload();
+          },
+          error : function() {
+            alert("Reihenfolge konnte nicht gespeichert werden.");
           }
         });
       }
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 49e2362b..1d39dd6c 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -9,7 +9,6 @@
   --hairline:              color-mix(in srgb, CanvasText, Canvas 91%);  /* #e8e8e8 */
   --hairline-faint:        color-mix(in srgb, CanvasText, Canvas 94%);  /* #f1f1f1 */
   --border:                color-mix(in srgb, CanvasText, Canvas 87%);  /* #ddd */
-  --frame-fill:            color-mix(in srgb, CanvasText, Canvas 83%);  /* lightgrey */
   --field-border:          color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 */
   --handle-fill:           color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 as fill */
   --link-underline:        color-mix(in srgb, CanvasText, Canvas 69%);  /* #b0b0b0 */
@@ -1295,11 +1294,15 @@ input#menu_item_title {
    ============================================================ */
 
 #menu_item_list {
-  border-collapse: collapse;
-  padding: 5px 5px 5px 5px;
-  border: solid 5px var(--frame-fill);
-  background-color: var(--frame-fill);
-  border-radius: 5px;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  max-width: 44rem;
+
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+
+  padding: 0.5rem;
 }
 
 #menu_item_list tr:hover {
@@ -1307,33 +1310,132 @@ input#menu_item_title {
 }
 
 #menu_item_list td {
-  height: 20px;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid var(--hairline);
+}
+
+#menu_item_list tr:last-child td {
+  border-bottom: none;
 }
 
 #menu_item_list td.menu_item_title {
-  width: 200px;
+  width: 100%;
+}
+
+.menu_item_translation {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--text-muted);
 }
 
-#menu_item_list td.menu_sort_handle div {
-  background-color: var(--handle-fill);
-  height: 26px;
-  width: 26px;
+.menu_item_translation_locale {
+  font-variant: all-small-caps;
+  letter-spacing: 0.04em;
+  margin-right: 0.35rem;
 }
 
-#menu_item_list td.menu_sort_handle div:before {
-  content: "⇳";
-  font-size: 20px;
-  font-weight: bold;
+.menu_item_translation_absent {
+  font-style: italic;
+}
+
+#menu_item_list td.menu_item_action {
+  width: 1px;
+  white-space: nowrap;
   text-align: center;
-  vertical-align: center;
 }
 
-#menu_item_list td.menu_sort_handle div:hover {
-  cursor: grab;
+#menu_item_list td.menu_item_action a {
+  text-decoration: none;
 }
 
-.ui-state-highlight td {
-  height: 20px;
+#menu_item_list td.menu_item_action svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+}
+
+#menu_item_list td.menu_sort_handle {
+  width: 1px;
+  white-space: nowrap;
+  color: var(--text-muted);
+}
+
+/* jQuery UI sortable binds mouse events, so drag never works on touch.
+   Below the desktop breakpoint the grip would advertise something that
+   cannot happen, and the width is better spent on the chevrons. */
+#menu_item_list .menu_grip {
+  display: none;
+}
+
+@media (min-width: 1016px) {
+  #menu_item_list .menu_grip {
+    display: inline-block;
+    cursor: grab;
+    vertical-align: middle;
+  }
+
+  #menu_item_list td.menu_sort_handle:active .menu_grip {
+    cursor: grabbing;
+  }
+}
+
+#menu_item_list form.menu_move {
+  display: inline-block;
+  margin: 0;
+}
+
+#menu_item_list form.menu_move button[type="submit"] {
+  padding: 0.15rem 0.2rem;
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+#menu_item_list form.menu_move button[type="submit"]:hover {
+  color: var(--text);
+  background-color: var(--surface-tint);
+}
+
+#menu_item_list form.menu_move button[type="submit"]:disabled {
+  opacity: 0.35;
+  cursor: default;
+  background-color: transparent;
+  color: var(--text-muted);
+}
+
+#menu_item_list td.menu_sort_handle svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  vertical-align: middle;
+}
+
+#menu_item_list td.menu_sort_handle:active {
+  cursor: grabbing;
+}
+
+#menu_item_list td.menu_sort_handle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+}
+
+#menu_item_list tr.ui-state-highlight td {
+  height: 2.5rem;
+  background-color: var(--accent-surface);
+  border: 1px dashed var(--accent);
+}
+
+#menu_item_list form.button_to.destructive input[type="submit"],
+#menu_item_list form.button_to.destructive button[type="submit"] {
+  color: var(--danger);
+  background-color: transparent;
+}
+
+#menu_item_list form.button_to.destructive input[type="submit"]:hover,
+#menu_item_list form.button_to.destructive button[type="submit"]:hover {
+  color: var(--on-solid);
+  background-color: var(--danger-solid);
 }
 
 /* ============================================================