Supply related-asset URLs/name and public inline-image CSS

RelatedAssetsController#create's JSON includes large_url,
original_url, and name alongside thumb_url/url; the related-asset
list items in both editors carry them as data-large-url,
data-original-url, and data-name.

ccc.css gets the public-facing .inline-image--full/--half/--left/
--right rules -- admin.css and TinyMCE's content_style cover the
cockpit and in-editor renderings respectively.

4 files changed, 36 insertions, 1 deletions

diff --git a/app/controllers/related_assets_controller.rb b/app/controllers/related_assets_controller.rb
index 479ebec..5af73fc 100644
--- a/app/controllers/related_assets_controller.rb
+++ b/app/controllers/related_assets_controller.rb
@@ -27,6 +27,8 @@ class RelatedAssetsController < ApplicationController
       asset_id: asset.id,
       name: asset.name,
       thumb_url: asset.upload.url(:thumb),
+      large_url: asset.upload.url(:large),
+      original_url: asset.upload.url,
       url: node_related_asset_path(@node, related)
     }
   end
diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index 9506995..25f15c2 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -81,7 +81,10 @@
              data-create-url="<%= node_related_assets_path(@node) %>">
           <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) %>">
+              <li data-url="<%= node_related_asset_path(@node, related) %>"
+                  data-large-url="<%= related.asset.upload.url(:large) %>"
+                  data-original-url="<%= related.asset.upload.url %>"
+                  data-name="<%= related.asset.name %>">
                 <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_remove" aria-label="Remove image">
diff --git a/app/views/page_translations/edit.html.erb b/app/views/page_translations/edit.html.erb
index 0f64d40..00bf221 100644
--- a/app/views/page_translations/edit.html.erb
+++ b/app/views/page_translations/edit.html.erb
@@ -20,6 +20,15 @@
 </div>
 
 <div id="page_editor">
+  <ul id="related_asset_list" style="display:none">
+    <% @page.related_assets.includes(:asset).each do |related| %>
+      <li data-large-url="<%= related.asset.upload.url(:large) %>"
+          data-original-url="<%= related.asset.upload.url %>"
+          data-name="<%= related.asset.name %>">
+        <%= image_tag related.asset.upload.url(:thumb) %>
+      </li>
+    <% end %>
+  </ul>
   <%= form_with url: node_translation_path(@node, @locale), method: :patch, local: true, id: "translation_edit_form",
         data: { autosave_url: autosave_node_translation_path(@node, @locale), show_url: node_path(@node) } do |f| %>
     <div id="content">
diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css
index bb4f7e3..cbeea17 100644
--- a/public/stylesheets/ccc.css
+++ b/public/stylesheets/ccc.css
@@ -627,3 +627,24 @@ label[for=light-mode] {
 .chapter_partial_content {
   min-width: 0;
 }
+
+
+.inline-image--full {
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.inline-image--half {
+  width: 48%;
+  margin-bottom: 1rem;
+}
+
+.inline-image--left {
+  float: left;
+  margin-right: 1rem;
+}
+
+.inline-image--right {
+  float: right;
+  margin-left: 1rem;
+}