projects/emailtemplate.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Element Korrektur

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-02-06 00:56:30 +01:00
parent 3d70eeded0
commit 7564d5996a
2 changed files with 59 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
public/assets/js/bridge/blocks-custom.js
View File

@@ -76,20 +76,38 @@
// TABLE
addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
content:`<table data-gjs-type="bridge-table" data-bridge-table="1" data-bridge-rows="3" data-bridge-cols="2" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'})}">
<tr>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
</tr>
<tr>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
</tr>
<tr>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
</tr>
</table>` });
content:{
type:'default',
tagName:'table',
attributes:{
role:'presentation',
width:'100%',
cellpadding:'0',
cellspacing:'0',
'data-bridge-table':'1',
'data-bridge-rows':'3',
'data-bridge-cols':'2'
},
style:{
'font-family':'Arial,sans-serif',
'border-collapse':'collapse',
'width':'100%',
'margin-bottom':'16px'
},
components:`
<tr>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
</tr>
<tr>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
</tr>
<tr>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
</tr>`
} });
// DIVIDER
addOnce(bm, 'cust-divider',{ id:'cust-divider',label:'⎯ Divider',
@@ -101,14 +119,32 @@
// MEDIA LEFT
addOnce(bm, 'cust-media-left', { id:'cust-media-left', label:'🖼️◀ Text',
content:`<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','margin-bottom':'16px'})}">
<tr><td width="40%" valign="top" style="${css({padding:'0 8px 0 0'})}">
<img src="https://placehold.co/400x260" alt="Bild" style="${css({width:'100%',height:'auto',border:'0',display:'block'})}">
</td><td width="60%" valign="top" style="${css({padding:'0 0 0 8px'})}">
<h3 style="${css({margin:'0 0 8px','font-size':'18px',color:'#0f172a'})}">Überschrift</h3>
<p style="${css({margin:'0 0 12px','font-size':'14px',color:'#0f172a','line-height':'1.5'})}">Beschreibungstext …</p>
<a href="#" style="${css({display:'inline-block','background-color':'#0ea5e9',color:'#fff','text-decoration':'none',padding:'8px 14px','border-radius':'6px','font-size':'14px'})}">Mehr erfahren</a>
</td></tr></table>` });
content:{
type:'default',
tagName:'table',
attributes:{
role:'presentation',
width:'100%',
cellpadding:'0',
cellspacing:'0'
},
style:{
'font-family':'Arial,sans-serif',
'border-collapse':'collapse',
'margin-bottom':'16px'
},
components:`
<tr>
<td width="40%" valign="top" style="${css({padding:'0 8px 0 0'})}">
<img src="https://placehold.co/400x260" alt="Bild" style="${css({width:'100%',height:'auto',border:'0',display:'block'})}">
</td>
<td width="60%" valign="top" style="${css({padding:'0 0 0 8px'})}">
<h3 style="${css({margin:'0 0 8px','font-size':'18px',color:'#0f172a'})}">Überschrift</h3>
<p style="${css({margin:'0 0 12px','font-size':'14px',color:'#0f172a','line-height':'1.5'})}">Beschreibungstext …</p>
<a href="#" style="${css({display:'inline-block','background-color':'#0ea5e9',color:'#fff','text-decoration':'none',padding:'8px 14px','border-radius':'6px','font-size':'14px'})}">Mehr erfahren</a>
</td>
</tr>`
} });
// HERO
addOnce(bm, 'cust-hero', { id:'cust-hero', label:'🌄 Hero',