From 3d0641df16490fb093cefe1d5bd453f90d7f93ca Mon Sep 17 00:00:00 2001
From: Hermes <hermes@local>
Date: Sat, 8 Aug 2026 18:12:19 +0200
Subject: [PATCH] use NATIVE Lampa card markup (.card/.card__img) so it matches
 other sections

---
 plugin.js | 47 +++++++++++++++++------------------------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/plugin.js b/plugin.js
index 76269d1..36c09c0 100644
--- a/plugin.js
+++ b/plugin.js
@@ -42,36 +42,20 @@
         }
     }
 
-    // Plugin templates/styles.
+    // Plugin styles.
     // NOTE: Lampa.Template.add() only stores the string in memory — it does NOT
-    // inject <style> into the page. So we inject CSS manually into <head>, and use
-    // Template.add only for the card HTML template.
-    // Own namespaced classes (mm-card) so they do NOT collide with Lampa native
-    // .card__img (which Lampa hides until its own lazy-load runs).
+    // inject <style> into the page. So we inject CSS manually into <head>.
+    // Movie cards use NATIVE Lampa markup/styles (.card / .card__img / .card__title),
+    // so they look identical to every other Lampa section.
     function injectStyles() {
         if (window.__mymovies_css_injected) return;
         window.__mymovies_css_injected = true;
 
-        // Card HTML template (used via Lampa.Template.get)
-        Lampa.Template.add('mymovies-card',
-            '<div class="mm-card selector">' +
-                '<div class="mm-card__view">' +
-                    '<img src="{img}" class="mm-card__img" />' +
-                '</div>' +
-                '<div class="mm-card__title">{title}</div>' +
-                '<div class="mm-card__age">{year}</div>' +
-            '</div>');
-
-        // Inject CSS into <head> so it actually applies
+        // Inject CSS into <head> so it actually applies.
+        // Only layout wrappers + detail screen; the movie cards use NATIVE Lampa styles (.card).
         var css =
             '.mymovies{padding:2.2em 3.4em;overflow-y:auto;height:100%;box-sizing:border-box}' +
             '.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
-            '.mm-card{background:#1c1f26;border-radius:6px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s}' +
-            '.mm-card.focus,.mm-card.hover{transform:scale(1.05)}' +
-            '.mm-card__view{width:100%;height:255px;overflow:hidden;background:#2a2e38}' +
-            '.mm-card__img{width:100%;height:100%;object-fit:cover;display:block}' +
-            '.mm-card__title{padding:.6em .7em .2em;font-size:1em;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}' +
-            '.mm-card__age{padding:0 .7em .6em;font-size:.85em;opacity:.6}' +
             '.mymovies-detail{padding:3em;max-width:900px}' +
             '.detail-head{display:flex;gap:2em;flex-wrap:wrap}' +
             '.detail-poster{width:220px;border-radius:10px}' +
@@ -147,14 +131,17 @@
             return;
         }
         movies.forEach(function (m) {
-            // Use plugin card template (own classes, does not collide with native card__img)
-            var card = Lampa.Template.get('mymovies-card', {
-                img: resolve(m.poster || m.cover),
-                title: m.title || m.id,
-                year: m.year || ''
-            });
-            card = $(card);
-            card.attr('data-id', esc(m.id));
+            // Native Lampa card markup so it looks exactly like every other section.
+            // card--loaded makes Lampa show the poster (native .card__img is hidden until then).
+            var card = $(
+                '<div class="card selector card--loaded" data-id="' + esc(m.id) + '">' +
+                    '<div class="card__view">' +
+                        '<img src="' + resolve(m.poster || m.cover) + '" class="card__img" />' +
+                        '<div class="card__icons"><div class="card__icons-inner"></div></div>' +
+                    '</div>' +
+                    '<div class="card__title">' + esc(m.title || m.id) + '</div>' +
+                    (m.year ? '<div class="card__age">' + esc(String(m.year)) + '</div>' : '') +
+                '</div>');
             card.on('hover:enter', function () { openMovie(m); });
             grid.append(card);
         });