1 files changed, 83 insertions, 61 deletions

diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index 25f15c2..fc1d18f 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -33,48 +33,17 @@
     </div>
   <% end %>
 
-  <details id="metadata_details">
-    <summary>Metadata (slug, parent, tags, template, author, images)</summary>
-    <div id="metadata">
-      <div class="node_description">Slug</div>
-      <div class="node_content">
-        <%= f.text_field(
-              :staged_slug, :value => @node.staged_slug || @node.slug
-            )
-          %>
-      </div>
-
-      <div class="node_description">parent</div>
-      <div class="node_content">
-        <%= text_field_tag :move_to_search_term, @node.parent.title rescue "" %>
-        <div id="move_to_search_results" class="search_results"></div>
-        <%= f.hidden_field(
-              :staged_parent_id,
-              :value => @node.staged_parent_id || @node.parent_id
-            )
-         %>
-      </div>
-
-      <%= fields_for @page do |d| %>
-      <div class="node_description">Tags - comma seperated</div>
-      <div class="node_content"><%= text_field_tag :tag_list, @page.tag_list.join(', ') %></div>
-
-      <div class="node_description">Publish at</div>
-      <div class="node_content"><%= d.datetime_select :published_at, :value => @page.published_at %></div>
+  <%= fields_for @page do |d| %>
+  <div id="edit_grid">
 
-      <div class="node_description">Template</div>
-      <div class="node_content">
-      <%= d.select :template_name, custom_page_templates, {:prompt => 'Select Template'} %>
-      <span class="field_hint">Set automatically based on how this node was created - change it if needed.</span>
-      </div>
+    <div id="main_fields">
+      <div class="node_description">Title</div>
+      <div class="node_content"><%= d.text_field :title %></div>
 
-      <div class="node_description">Author</div>
-      <div class="node_content">
-        <%= d.select :user_id, user_list,
-              :selected => @page.user_id || @node.draft&.user_id || @node.head&.user_id %>
-      </div>
+      <div class="node_description">Abstract</div>
+      <div class="node_content"><%= d.text_area :abstract %></div>
 
-      <div class="node_description">Images</div>
+      <div class="node_description">Attachments</div>
       <div class="node_content">
         <div id="related_assets"
              data-search-url="<%= search_node_related_assets_path(@node) %>"
@@ -82,17 +51,27 @@
           <ul id="related_asset_list" class="thumbnail_list">
             <% @page.related_assets.includes(:asset).each do |related| %>
               <li data-url="<%= node_related_asset_path(@node, related) %>"
+                  data-asset-id="<%= related.asset.id %>"
                   data-large-url="<%= related.asset.upload.url(:large) %>"
                   data-original-url="<%= related.asset.upload.url %>"
-                  data-name="<%= related.asset.name %>">
+                  data-name="<%= related.asset.name %>"
+                  data-has-credit="<%= related.asset.show_credit? %>"
+                  data-headline="<%= related.headline? %>"
+                  class="<%= "is_headline" if related.headline? %>">
                 <span class="related_asset_handle"><%= icon("grip-vertical", library: "tabler", "aria-hidden": true) %></span>
                 <%= image_tag related.asset.upload.url(:thumb) %>
+                <button type="button" class="related_asset_set_headline"
+                        aria-pressed="<%= related.headline? %>" aria-label="Set as headline image"
+                        title="Use this photo as the page's headline image">
+                  <%= icon("star", library: "tabler", "aria-hidden": true) %>
+                </button>
                 <button type="button" class="related_asset_remove" aria-label="Remove image">
                   <%= icon("x", library: "tabler", "aria-hidden": true) %>
                 </button>
               </li>
             <% end %>
           </ul>
+          <p class="field_hint">The starred image or PDF becomes this page's headline on the public site. If none is starred, visitors get a link to browse all attached images instead.</p>
           <%= text_field_tag nil, nil, id: "related_asset_search_term", placeholder: "Search images to attach…", autocomplete: "off" %>
           <div id="related_asset_search_results" class="search_results"></div>
         </div>
@@ -102,38 +81,81 @@
         <li>
           <span class="related_asset_handle"><%= icon("grip-vertical", library: "tabler", "aria-hidden": true) %></span>
           <img src="">
+          <button type="button" class="related_asset_set_headline" aria-pressed="false" aria-label="Set as headline image">
+            <%= icon("star", library: "tabler", "aria-hidden": true) %>
+          </button>
           <button type="button" class="related_asset_remove" aria-label="Remove image">
             <%= icon("x", library: "tabler", "aria-hidden": true) %>
           </button>
         </li>
       </template>
-
     </div>
-  </details>
 
-  <div id="content">
-    <div class="node_description">Title</div>
-    <div class="node_content"><%= d.text_field :title %></div>
+    <details id="metadata_details">
+      <summary>Metadata (slug, parent, tags, template, author, images)</summary>
+      <div id="metadata">
+        <div class="node_description">Slug</div>
+        <div class="node_content">
+          <%= f.text_field(
+                :staged_slug, :value => @node.staged_slug || @node.slug
+              )
+            %>
+        </div>
 
-    <div class="node_description">Abstract</div>
-    <div class="node_content"><%= d.text_area :abstract %></div>
+        <div class="node_description">parent</div>
+        <div class="node_content">
+          <%= text_field_tag :move_to_search_term, @node.parent.title rescue "" %>
+          <p class="field_hint">Start typing to find a new parent for this node.</p>
+          <div id="move_to_search_results" class="search_results"></div>
+          <%= f.hidden_field(
+                :staged_parent_id,
+                :value => @node.staged_parent_id || @node.parent_id
+              )
+           %>
+        </div>
 
-    <div class="node_description">Body</div>
-    <div class="body_toolbar_row">
-      <button type="button" id="preview_toggle" class="view_toggle" aria-pressed="false" aria-label="Toggle live preview" title="Toggle live preview">
-        <%= icon("layout-sidebar-right", library: "tabler", "aria-hidden": true) %> <span>Live preview</span>
-      </button>
-      <button type="button" id="preview_force_render" class="view_toggle" style="display:none" aria-label="Force preview render" title="Force preview render">
-        <%= icon("refresh", library: "tabler", "aria-hidden": true) %> <span>Force refresh</span>
-      </button>
-    </div>
+        <div class="node_description">Tags</div>
+        <div class="node_content">
+          <%= text_field_tag :tag_list, @page.tag_list.join(', ') %>
+          <span class="field_hint">Comma separated.</span>
+        </div>
+
+        <div class="node_description">Publish at</div>
+        <div class="node_content"><%= d.datetime_select :published_at, :value => @page.published_at %></div>
+
+        <div class="node_description">Template</div>
+        <div class="node_content">
+        <%= d.select :template_name, custom_page_templates, {:prompt => 'Select Template'} %>
+        <span class="field_hint">Set automatically based on how this node was created - change it if needed.</span>
+        </div>
 
-    <div id="editor_and_preview">
-      <div class="preview_content">
-        <div class="node_content"><%= d.text_area :body, :class => 'with_editor' %></div>
+        <div class="node_description">Author</div>
+        <div class="node_content">
+          <%= d.select :user_id, user_list,
+                :selected => @page.user_id || @node.draft&.user_id || @node.head&.user_id %>
+        </div>
+
+      </div>
+    </details>
+
+    <div id="content">
+      <div class="node_description">Body</div>
+      <div class="body_toolbar_row">
+        <button type="button" id="preview_toggle" class="view_toggle" aria-pressed="false" aria-label="Toggle live preview" title="Toggle live preview">
+          <%= icon("layout-sidebar-right", library: "tabler", "aria-hidden": true) %> <span>Live preview</span>
+        </button>
+        <button type="button" id="preview_force_render" class="view_toggle" style="display:none" aria-label="Force preview render" title="Force preview render">
+          <%= icon("refresh", library: "tabler", "aria-hidden": true) %> <span>Force refresh</span>
+        </button>
       </div>
-      <div id="preview_panel" style="display:none">
-        <iframe id="live_preview_iframe" title="Live preview" data-src="<%= preview_page_path(@page, :locale => I18n.default_locale) %>"></iframe>
+
+      <div id="editor_and_preview">
+        <div class="preview_content">
+          <div class="node_content"><%= d.text_area :body, :class => 'with_editor' %></div>
+        </div>
+        <div id="preview_panel" style="display:none">
+          <iframe id="live_preview_iframe" title="Live preview" data-src="<%= preview_page_path(@page, :locale => I18n.default_locale) %>"></iframe>
+        </div>
       </div>
     </div>
   </div>