Another timing debugging

Author: DanielFeshbach

_media/grasp-news.md

@@ -3,5 +3,5 @@ title: "GRASP Lab’s Award-Winning Automated System for Printing Origami Robots
 date: 2024-05-15
 permalink: /media/grasp-news
 link: https://www.grasp.upenn.edu/news/kinegami/
-summary: "GRASP Lab news wrote [a feature article](https://www.grasp.upenn.edu/news/kinegami/) on [the Kinegami project](https://sung.seas.upenn.edu/research/kinegami/) that I'm part of. They wrote this when [the project's first paper](https://ieeexplore.ieee.org/document/9914656) (which was from before I joined) got an honorable mention for the T-RO best paper award: the article also discusses the future of the project including my [OSME paper](https://repository.upenn.edu/handle/20.500.14332/60333) and ongoing work."
+summary: "GRASP Lab news published [a feature article](https://www.grasp.upenn.edu/news/kinegami/) on [the Kinegami project](https://sung.seas.upenn.edu/research/kinegami/) that I'm part of. They wrote this when [the project's first paper](https://ieeexplore.ieee.org/document/9914656) (which was from before I joined) got an honorable mention for the T-RO best paper award: the article also discusses the future of the project including my [OSME paper](https://repository.upenn.edu/handle/20.500.14332/60333) and ongoing work."
 ---

_pages/media.html

@@ -81,7 +81,7 @@
     margin-bottom: 0.5rem !important;
   }
 
-  /* Production debugging - remove after fixing */
+  /* Production debugging */
   .debug-info {
     position: fixed;
     top: 10px;
@@ -98,10 +98,7 @@
 
 <h1>Media</h1>
 
-<!-- Debug info for production -->
-<div class="debug-info" id="debug-info">
-  HTML loaded
-</div>
+<div class="debug-info" id="debug-info">HTML loaded</div>
 
 <section class="media-grid">
   {% assign media_items = site.media | sort: "date" | reverse %}
@@ -137,73 +134,38 @@ <h3 class="archive__item-title">
   {% endfor %}
 </section>
 
+<!-- Minimal test script -->
 <script>
-(function() {
-  var debug = document.getElementById('debug-info');
-  
-  function updateDebug(message) {
-    if (debug) {
-      debug.innerHTML = message + '<br>Time: ' + new Date().toLocaleTimeString();
-      debug.style.background = 'rgba(0,255,0,0.9)'; // Green when working
-    }
-  }
-
-  updateDebug('JavaScript executing');
+document.getElementById('debug-info').innerHTML = 'JS executing';
+document.getElementById('debug-info').style.background = 'rgba(0,255,0,0.9)';
 
-  function masonryLayout() {
-    var grid = document.querySelector('.media-grid');
-    if (!grid) {
-      updateDebug('ERROR: Grid not found');
-      return;
-    }
-    
-    var items = grid.querySelectorAll('.media-card');
-    updateDebug('Processing ' + items.length + ' cards');
-    
-    var rowHeight = 10;
-    var gap = 12;
-    
-    // Reset all items
-    for (var i = 0; i < items.length; i++) {
-      items[i].style.gridRowEnd = 'auto';
-    }
-    
-    // Force reflow
-    grid.offsetHeight;
-    
-    // Apply masonry
-    for (var i = 0; i < items.length; i++) {
-      var rect = items[i].getBoundingClientRect();
-      var itemHeight = rect.height;
-      var rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));
-      items[i].style.gridRowEnd = 'span ' + Math.max(1, rowSpan);
-    }
-    
-    updateDebug('Masonry layout applied successfully');
-  }
-
-  function init() {
-    updateDebug('Initializing masonry...');
-    setTimeout(function() { masonryLayout(); }, 100);
-    setTimeout(function() { masonryLayout(); }, 1000);
-    setTimeout(function() { masonryLayout(); }, 3000);
-    setTimeout(function() { masonryLayout(); }, 6000);
+setTimeout(function() {
+  var grid = document.querySelector('.media-grid');
+  var items = grid.querySelectorAll('.media-card');
+  
+  document.getElementById('debug-info').innerHTML = 'Found ' + items.length + ' items';
+  
+  for (var i = 0; i < items.length; i++) {
+    var rect = items[i].getBoundingClientRect();
+    var rowSpan = Math.ceil((rect.height + 12) / 10);
+    items[i].style.gridRowEnd = 'span ' + Math.max(1, rowSpan);
   }
+  
+  document.getElementById('debug-info').innerHTML = 'Masonry applied';
+}, 1000);
 
-  // Start when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
+setTimeout(function() {
+  var grid = document.querySelector('.media-grid');
+  var items = grid.querySelectorAll('.media-card');
+  
+  for (var i = 0; i < items.length; i++) {
+    var rect = items[i].getBoundingClientRect();
+    var rowSpan = Math.ceil((rect.height + 12) / 10);
+    items[i].style.gridRowEnd = 'span ' + Math.max(1, rowSpan);
   }
-
-  // Also run when window loads
-  window.addEventListener('load', function() {
-    updateDebug('Window loaded - running masonry');
-    setTimeout(function() { masonryLayout(); }, 500);
-  });
-
-})();
+  
+  document.getElementById('debug-info').innerHTML = 'Second masonry pass';
+}, 3000);
 </script>
 
 <script async src="https://www.instagram.com/embed.js"></script>