5 files changed, 131 insertions, 123 deletions

diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 7fb1dc2..f6d915f 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -45,10 +45,6 @@ $(document).ready(function () {
     menu_item_sorter.initialize();
   }
 
-  if ($("#metadata").length != 0) {
-    meta_data.initialize();
-  }
-
   if ($("#parent_search_term").length != 0) {
     parent_search.initialize_search();
   }
@@ -110,14 +106,6 @@ $(document).ready(function () {
 });
 
 
-meta_data = {
-  initialize : function() {
-    document.getElementById("metadata_details").addEventListener("toggle", function() {
-      if (this.open) image_interface.initialize();
-    });
-  }
-};
-
 cccms = {
   setup_autosave : function() {
 
@@ -282,6 +270,7 @@ cccms = {
           large: $(this).data('large-url'),
           original: $(this).data('original-url'),
           name: $(this).data('name'),
+          hasCredit: $(this).data('has-credit') === true,
           headline: $(this).data('headline') === true
         };
       }).get();
@@ -320,8 +309,11 @@ cccms = {
         : 'inline-image inline-image--half inline-image--' + placement;
 
       var esc = cccms.inline_images.escape_attr;
+      var titleForGlightbox = (item.name || '').replace(/;/g, ',');
+      var glightboxOpts = 'title: ' + esc(titleForGlightbox) +
+        (item.hasCredit ? '; description: #credit_for_asset_' + esc(item.id) : '') + ';';
       var html = '<a href="' + esc(item.original) + '" class="glightbox" data-gallery="page-' + esc(cccms.inline_images.node_id) + '"' +
-                 ' data-title="' + esc(item.name) + '" data-description="#credit_for_asset_' + esc(item.id) + '">' +
+                 ' data-glightbox="' + glightboxOpts + '">' +
                  '<img src="' + esc(item.large) + '" class="' + classes + '" alt="' + esc(item.name) + '"></a>';
 
       cccms.inline_images.editor.insertContent(html);
@@ -360,77 +352,6 @@ menu_item_sorter = {
   }
 }
 
-image_interface = {
-
-  initialize : function() {
-
-    $("#image_browser").hide();
-    image_interface.initialize_sortable_image_box();
-    image_interface.connect_browser_and_box();
-    image_interface.set_droppable_behavior();
-    image_interface.bind_image_browser_toggle();
-  },
-
-
-  set_droppable_behavior : function() {
-    $("ul#image_box").droppable({
-      out : function(event, ui) {
-        $(ui.draggable).fadeTo("fast", 0.4);
-
-        $(ui.draggable).bind("mouseup", function() {
-          $(this).remove();
-        });
-      },
-      over : function(event, ui) {
-        $(ui.draggable).fadeTo("fast", 1.0);
-        $(ui.draggable).unbind("mouseup");
-      }
-    });
-  },
-
-  connect_browser_and_box : function() {
-    $("#image_browser ul li").draggable({
-      connectToSortable : 'ul#image_box',
-      helper : 'clone',
-      revert : 'invalid'
-    });
-  },
-
-  initialize_sortable_image_box : function() {
-
-    $("ul#image_box").sortable({
-      revert  : true,
-      update    : function(event, ui) {
-        images = $("ul#image_box").sortable("serialize", {attribute : "rel"});
-
-        $.ajax({
-          type : "POST",
-          url  : "/pages/" + $("ul#image_box").attr("rel") + "/sort_images",
-          dataType : "json",
-          data : images + "&_method=put",
-          success : function() {
-          }
-        });
-      }
-    });
-  },
-
-  bind_image_browser_toggle : function() {
-    $("#image_browser_toggle").bind("click", function(){
-      if ($("#image_browser_toggle").attr("class") == "unselected") {
-        $("#image_browser_toggle").attr("class", "selected");
-        $("#image_browser").show();
-      }
-      else {
-        $("#image_browser_toggle").attr("class", "unselected");
-        $("#image_browser").hide();
-      }
-
-      return false;
-    });
-  }
-}
-
 rrule_builder = {
   initialize : function() {
     rrule_builder.try_populate_from_rrule($("#event_rrule").val());
diff --git a/public/javascripts/public.js b/public/javascripts/public.js
index a9250ca..7f38f66 100644
--- a/public/javascripts/public.js
+++ b/public/javascripts/public.js
@@ -1,6 +1,25 @@
 document.addEventListener('DOMContentLoaded', function(){
 
-  GLightbox({ selector: '.glightbox' });
+  GLightbox({
+    selector: '.glightbox',
+    afterSlideLoad: function(slideData) {
+      var trigger = document.querySelectorAll('.glightbox')[slideData.index];
+      var selector = trigger && trigger.dataset.creditSelector;
+      if (!selector) return;
+
+      var source = document.querySelector(selector);
+      var container = slideData.slide.querySelector('.gdesc-inner');
+      if (!source || !container) return;
+
+      var target = container.querySelector('.gslide-desc');
+      if (!target) {
+        target = document.createElement('div');
+        target.className = 'gslide-desc';
+        container.appendChild(target);
+      }
+      target.innerHTML = source.innerHTML;
+    }
+  });
 
   document.getElementById("light-mode").addEventListener("change", () => {
     if (document.getElementById("light-mode").checked)
diff --git a/public/javascripts/related_assets.js b/public/javascripts/related_assets.js
index cc07d86..c6c6a19 100644
--- a/public/javascripts/related_assets.js
+++ b/public/javascripts/related_assets.js
@@ -87,6 +87,7 @@ related_assets = {
         var item = $($("#related_asset_template").html().trim());
         item.attr("data-url", related.url);
         item.attr("data-asset-id", related.asset_id);
+        item.attr("data-has-credit", related.has_credit);
         item.attr("data-large-url", related.large_url);
         item.attr("data-original-url", related.original_url);
         item.attr("data-name", related.name);
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 086e73d..7b06c7d 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -1002,14 +1002,9 @@ div#page_editor {
     padding-right: 5px;
   }
 
-  /* Fixed 800px width will overflow narrow viewports despite
-     border-box -- every sibling rule in this block uses 100% instead.
-     Worth checking on an actual phone; looks unfinished rather than
-     intentional. Not changed here since it wasn't part of what you
-     asked to fix. */
   #page_editor textarea#page_body {
     box-sizing: border-box;
-    width: 800px;
+    width: 100%;
     height: 50rem;
   }
 
@@ -1042,10 +1037,6 @@ div#page_editor {
   select {
     font-size: 1.5rem;
   }
-
-  #metadata ul#image_box {
-    width: 100% !important;
-  }
 }
 
 /* ============================================================
@@ -1264,31 +1255,6 @@ div#draft_list table td.actions a {
    Image box / browser
    ============================================================ */
 
-#metadata ul#image_box {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 10px 5px 10px 5px;
-  height: 100px;
-  width: 702px;
-  border: 1px solid #989898;
-}
-
-#metadata ul#image_box li {
-  float: left;
-  list-style-type: none;
-  margin: 5px;
-}
-
-div#image_browser {
-  position: absolute;
-  top: 40px;
-  left: 800px;
-}
-
-div#image_browser ul li {
-  list-style-type: none;
-}
-
 .thumbnail_list {
   display: flex;
   flex-wrap: wrap;
@@ -1316,6 +1282,30 @@ div#image_browser ul li {
   border-radius: 4px;
 }
 
+.thumbnail_list li {
+  position: relative;
+}
+
+.thumbnail_list li .headline_indicator {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 1.4rem;
+  height: 1.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.85);
+  color: #f5b400;
+}
+
+.thumbnail_list li .headline_indicator svg {
+  width: 0.9rem;
+  height: 0.9rem;
+  fill: currentColor;
+}
+
 .related_asset_handle {
   display: flex;
   color: #969696;
diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css
index 8358d06..91f7a06 100644
--- a/public/stylesheets/ccc.css
+++ b/public/stylesheets/ccc.css
@@ -727,7 +727,6 @@ div.teaser_ruler {
   min-width: 0;
 }
 
-
 .inline-image--full {
   width: 100%;
   margin: 1rem 0;
@@ -748,10 +747,88 @@ div.teaser_ruler {
   margin-left: 1rem;
 }
 
-#asset_credits .glightbox-desc {
+#asset_credits .asset_credit_block {
   display: none;
 }
 
-#asset_credits .headline_credit {
+#asset_credits .asset_credit_block.headline_credit {
   display: block;
 }
+
+#asset_credits {
+  border-top: dotted 1px silver;
+}
+
+#asset_credits,
+.right {
+  font-style: italic;
+  font-family: Georgia;
+  font-size: 0.9rem;
+  color: color-mix(in srgb, CanvasText, #808080);
+}
+
+.glightbox-clean .gslide-description {
+  background: Canvas !important;
+}
+
+.glightbox-clean .gslide-title,
+.glightbox-clean .gslide-desc {
+  color: CanvasText !important;
+}
+
+.headline_document_card {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  border: 1px solid color-mix(in srgb, CanvasText, #808080 25%);
+  border-radius: 6px;
+  padding: 1rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.headline_document_card:hover {
+  border-color: CanvasText;
+}
+
+.headline_document_card_thumb {
+  max-width: 120px;
+  max-height: 160px;
+  border: 1px solid color-mix(in srgb, CanvasText, #808080 25%);
+  flex-shrink: 0;
+}
+
+.headline_document_card_info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.headline_document_card_title {
+  font-weight: bold;
+}
+
+.related_documents {
+  margin-top: 1rem;
+}
+
+.related_documents_label {
+  font-style: italic;
+  font-family: Georgia;
+  font-size: 0.9rem;
+  color: color-mix(in srgb, CanvasText, #808080);
+  margin-bottom: 0.3rem;
+}
+
+.related_documents_list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.related_document_link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  text-decoration: none;
+}