admin/mymovies
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use own card template (mm-card) + Template.add, like Shikimori plugin; fixes empty card (native card__img hidden)

Browse Source
This commit is contained in:
Hermes committed 2026-08-08 14:21:28 +02:00
1 parent 62285ac045
commit 9ecf92d79a
1 file changed
+33 -11
Download Patch File Download Diff File Expand all files Collapse all files
plugin.js
+33 -11
View File
@@ -42,21 +42,42 @@
}
}
// Inject plugin styles (only the grid layout; cards use native Lampa classes)
// Plugin templates/styles (pattern from Shikimori plugin):
// own namespaced classes so they do NOT collide with Lampa native .card__img
// (native card__img is hidden until its own lazy-load runs, so our <img> must use a custom class).
function injectStyles() {
if (window.__mymovies_css_injected) return;
window.__mymovies_css_injected = true;
var css = '' +
// Card template with poster image
Lampa.Template.add('mymovies-card',
'<div class="mm-card selector">' +
'<div class="mm-card__view">' +
'<img src="{img}" class="mm-card__img" loading="lazy" />' +
'</div>' +
'<div class="mm-card__title">{title}</div>' +
'<div class="mm-card__age">{year}</div>' +
'</div>');
// Styles
Lampa.Template.add('mymovies-style',
'<style>' +
'.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%;aspect-ratio:2/3;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}' +
'.detail-info h1{margin:0 0 .4em;font-size:1.8em}' +
'.detail-info>div{margin:.3em 0;opacity:.85}' +
'.detail-actions{margin-top:1.5em}' +
'.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}';
$('<style>').text(css).appendTo('body');
'.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}' +
'</style>');
}
// ---------- Component: movie list ----------
@@ -111,13 +132,14 @@
return;
}
movies.forEach(function (m) {
// LAMPA NATIVE card classes so the grid/style matches the app
var card = $('<div class="card selector" data-id="' + esc(m.id) + '">');
var view = $('<div class="card__view">');
view.append($('<img class="card__img">').attr('src', resolve(m.poster || m.cover)).attr('loading', 'lazy'));
card.append(view);
card.append($('<div class="card__title">').text(m.title || m.id));
if (m.year) card.append($('<div class="card__age">').text(m.year));
// 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));
card.on('hover:enter', function () { openMovie(m); });
grid.append(card);
});