From 028b0ce90e16d488dba291007b9092a6a700ca3a Mon Sep 17 00:00:00 2001 From: erdgeist Date: Wed, 22 Jul 2026 15:28:37 +0200 Subject: Split nodes#edit into a four-quadrant layout on desktop --- app/views/nodes/edit.html.erb | 135 ++++++++++++++++++---------------- public/javascripts/admin_interface.js | 8 ++ public/stylesheets/admin.css | 47 +++++++++--- 3 files changed, 115 insertions(+), 75 deletions(-) diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb index 12dc000..fc1d18f 100644 --- a/app/views/nodes/edit.html.erb +++ b/app/views/nodes/edit.html.erb @@ -33,48 +33,17 @@ <% end %> -
- Metadata (slug, parent, tags, template, author, images) -
-
Slug
-
- <%= f.text_field( - :staged_slug, :value => @node.staged_slug || @node.slug - ) - %> -
- -
parent
-
- <%= text_field_tag :move_to_search_term, @node.parent.title rescue "" %> -
- <%= f.hidden_field( - :staged_parent_id, - :value => @node.staged_parent_id || @node.parent_id - ) - %> -
- - <%= fields_for @page do |d| %> -
Tags - comma seperated
-
<%= text_field_tag :tag_list, @page.tag_list.join(', ') %>
- -
Publish at
-
<%= d.datetime_select :published_at, :value => @page.published_at %>
+ <%= fields_for @page do |d| %> +
-
Template
-
- <%= d.select :template_name, custom_page_templates, {:prompt => 'Select Template'} %> - Set automatically based on how this node was created - change it if needed. -
+
+
Title
+
<%= d.text_field :title %>
-
Author
-
- <%= d.select :user_id, user_list, - :selected => @page.user_id || @node.draft&.user_id || @node.head&.user_id %> -
+
Abstract
+
<%= d.text_area :abstract %>
-
Images
+
Attachments
-
- -
-
Title
-
<%= d.text_field :title %>
- -
Abstract
-
<%= d.text_area :abstract %>
- -
Body
-
- -
-
-
-
<%= d.text_area :body, :class => 'with_editor' %>
+
+ Metadata (slug, parent, tags, template, author, images) +
+
Slug
+
+ <%= f.text_field( + :staged_slug, :value => @node.staged_slug || @node.slug + ) + %> +
+ +
parent
+
+ <%= text_field_tag :move_to_search_term, @node.parent.title rescue "" %> +

Start typing to find a new parent for this node.

+
+ <%= f.hidden_field( + :staged_parent_id, + :value => @node.staged_parent_id || @node.parent_id + ) + %> +
+ +
Tags
+
+ <%= text_field_tag :tag_list, @page.tag_list.join(', ') %> + Comma separated. +
+ +
Publish at
+
<%= d.datetime_select :published_at, :value => @page.published_at %>
+ +
Template
+
+ <%= d.select :template_name, custom_page_templates, {:prompt => 'Select Template'} %> + Set automatically based on how this node was created - change it if needed. +
+ +
Author
+
+ <%= d.select :user_id, user_list, + :selected => @page.user_id || @node.draft&.user_id || @node.head&.user_id %> +
+ +
+
+ +
+
Body
+
+ +
-
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js index f6d915f..64da5a8 100644 --- a/public/javascripts/admin_interface.js +++ b/public/javascripts/admin_interface.js @@ -73,6 +73,14 @@ $(document).ready(function () { cccms.preview.initialize(); } + var metadata_details = document.getElementById('metadata_details'); + if (metadata_details) { + var desktop_mq = window.matchMedia('(min-width: 1016px)'); + var sync_metadata = function() { metadata_details.open = desktop_mq.matches; }; + sync_metadata(); + desktop_mq.addEventListener('change', sync_metadata); + } + jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript");} }); diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css index 7b06c7d..5c0a8c0 100644 --- a/public/stylesheets/admin.css +++ b/public/stylesheets/admin.css @@ -97,7 +97,8 @@ input[type=radio] { } #metadata, -#content { +#content, +#main_fields { margin-left: 5px; } @@ -892,6 +893,26 @@ form.button_to button[type="submit"] { Page editor / metadata forms ============================================================ */ +@media(min-width:1016px) { + #edit_grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: + "main meta" + "body body"; + column-gap: 2rem; + align-items: start; + margin-left: -125px; + } + #main_fields { grid-area: main; } + #metadata_details { grid-area: meta; } + #page_editor #content { grid-area: body; } + + /* Details is force-opened by JS on desktop; hide the summary only + once open, so a JS failure still leaves a working toggle. */ + #metadata_details[open] > summary { display: none; } +} + #new_node { margin-left: -118px; } @@ -947,18 +968,16 @@ div#page_editor { } @media(min-width:1016px) { - input#tag_list, input#menu_search_term, input#menu_item_node_id, input#menu_item_path, - input#menu_item_title, - input#node_staged_slug, - input#move_to_search_term { + input#menu_item_title { width: 690px; } input[type=text]#page_title { - width: 690px; + width: 100%; + box-sizing: border-box; font-size: 1rem; padding-top: 6px; padding-bottom: 4px; @@ -968,24 +987,27 @@ div#page_editor { } textarea#page_abstract { - width: 690px; - height: 150px; + width: 100%; + box-sizing: border-box; + height: 250px; padding: 5px; } #page_editor textarea#page_body { - width: 700px; + width: 100%; + box-sizing: border-box; height: 600px; } - #page_editor #metadata, #page_editor #content, #admin_overview { + #admin_overview { margin-left: -125px; } #page_editor input[type=text], #page_editor input[type=password], #page_editor textarea { - width: 690px; + width: 100%; + box-sizing: border-box; } } @@ -998,7 +1020,8 @@ div#page_editor { } #page_editor #content, - #page_editor #metadata { + #page_editor #metadata, + #page_editor #main_fields { padding-right: 5px; } -- cgit v1.3