« Module:NavCard » : différence entre les versions

← Modification précédente

@@ Ligne 5 : / Ligne 5 : @@
      local titre = args['titre'] or 'Titre'
      local description = args['description'] or 'Description'
      local lien = args['lien'] or titre
      local image = args['image'] or ''
      local couleur = args['couleur'] or '#3b82f6'
-     -- Construction avec lien HTML natif
+     -- Lien cliquable avec div dedans
-     local result = '<a href="/wiki/' .. lien .. '" class="nav-card-link">'
+     local html = mw.html.create('a')
-     result = result .. '<div class="nav-card" style="background-color: ' .. couleur .. ';">'
+        :attr('href', mw.uri.encode(lien, 'WIKI'))
+        :addClass('nav-card-link')
+        :css('text-decoration', 'none')
+        :css('display', 'inline-block')
+     local card = html:tag('div')
+        :addClass('nav-card')
+        :css('background', couleur)
+        :css('width', '280px')
+        :css('height', '160px')
+        :css('border-radius', '12px')
+        :css('position', 'relative')
+        :css('overflow', 'hidden')
+        :css('margin', '10px')
      -- Image de fond si présente
-     if image and image ~= '' then
+     if image ~= '' then
-         result = result .. '<div class="nav-card-bg" style="background-image: url([[File:' .. image .. '|300px]]);"></div>'
+         card:tag('div')
+            :addClass('nav-card-bg')
+            :css('background-image', 'url(/images/' .. image .. ')')
+            :css('background-size', 'cover')
+            :css('position', 'absolute')
+            :css('top', '0')
+            :css('left', '0')
+            :css('width', '100%')
+            :css('height', '100%')
+            :css('opacity', '0.3')
      end
+    -- Contenu texte
+    local content = card:tag('div')
+        :addClass('nav-card-content')
+        :css('position', 'absolute')
+        :css('bottom', '0')
+        :css('left', '0')
+        :css('right', '0')
+        :css('padding', '20px')
+        :css('background', 'linear-gradient(transparent, rgba(0,0,0,0.7))')
+    content:tag('h3')
+        :css('color', 'white')
+        :css('margin', '0 0 8px 0')
+        :wikitext(titre)
+    content:tag('p')
+        :css('color', 'rgba(255,255,255,0.9)')
+        :css('margin', '0')
+        :wikitext(description)
-    -- Contenu
+     return tostring(html)
-    result = result .. '<div class="nav-card-content">'
-    result = result .. '<h3>' .. titre .. '</h3>'
-    result = result .. '<p>' .. description .. '</p>'
-    result = result .. '</div></div></a>'
-     return result
 end
 return p