tobias/gwoe-antragspruefer
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Scorecards in Share-Block sichtbar + Instagram-Button

Browse Source 
User-Frage: 'Wo kann ich jetzt die Cards angucken? Vielleicht verbunden
mit einem Instagram Sharing Button?'

Endpoints existieren laengst (#179):
- /v2/scorecard?format=og     → 1200×630 LinkedIn/Twitter-Card
- /v2/scorecard?format=square → 1080×1080 Instagram
- /api/assessment/scorecard.png?format=square&scale=2 → PNG

In der Share-Row jetzt drei neue Eintraege:

1. '📷 Instagram' — oeffnet Square-PNG (1080×1080) im neuen Tab,
   legt Begleittext in die Zwischenablage. Instagram hat keinen
   Web-Share-Endpoint, daher: Bild speichern + Text einfuegen.
2. '📊 Scorecard ansehen' — oeffnet die OG-Format-Vorschau (1200×630)
   im neuen Tab, der User sieht wie die Card auf LinkedIn/Twitter
   aussehen wird.
3. '🖼 Stock-Bild' — alter Magnific-Stockphoto-Knopf, jetzt klar
   gelabelt damit er nicht mit der Scorecard verwechselt wird.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter 2026-05-07 12:56:37 +02:00
parent 51f6afa029
commit 2821b8566e
2 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/templates/v2/screens/antrag_detail.html
View File

@ -504,13 +504,22 @@
style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
LinkedIn
</button>
<button onclick="v2DetailShareInstagram()"
style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
📷 Instagram
</button>
<button onclick="v2DetailShareEmail()"
style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
📧 E-Mail
</button>
<button onclick="v2DetailShareImage()"
<button onclick="v2DetailShareScorecard()"
style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
🖼 Bild
📊 Scorecard ansehen
</button>
<button onclick="v2DetailShareImage()"
title="Stockphoto-Suche bei Magnific zum Antragsthema"
style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
🖼 Stock-Bild
</button>
</div>
</div>
@ -925,6 +934,34 @@ window.v2ShowMatrixFieldInfo = function(field) {
window.location.href = 'mailto:?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
};
/* Scorecard-Preview im OG-Format (1200×630) — nutzt /v2/scorecard. */
window.v2DetailShareScorecard = function() {
var url = '/v2/scorecard?drucksache=' + encodeURIComponent(DRS)
+ '&bundesland=' + encodeURIComponent(BL || 'NRW')
+ '&format=og';
window.open(url, '_blank', 'noopener');
};
/* Instagram-Sharing: oeffnet das Square-PNG (1080×1080) in neuem Tab,
legt den Begleittext in die Zwischenablage. Instagram hat keinen
Web-Share-Endpoint — User muss das Bild lokal speichern und in der
Instagram-App posten, der Text liegt dann zum Einfuegen bereit. */
window.v2DetailShareInstagram = function() {
var url = '/api/assessment/scorecard.png?drucksache=' + encodeURIComponent(DRS)
+ '&bundesland=' + encodeURIComponent(BL || 'NRW')
+ '&format=square&scale=2';
var win = window.open(url, '_blank', 'noopener');
var body = buildLongShareText();
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(body).then(function() {
v2ShareToast('Square-Bild öffnet — Bild speichern, in Instagram posten. Text liegt in der Zwischenablage.');
}, function() {
v2ShareToast('Square-Bild öffnet. Text-Kopieren manuell.');
});
}
if (!win) v2ShareToast('Bitte Pop-up-Blocker prüfen.');
};
window.v2DetailShareImage = function() {
var topics = (window.ANTRAG_TOPICS || []).slice(0, 2).join(' ');
var query = (topics || TITLE.substring(0, 40)) + ' Politik';

4
app/templates/v3/screens/antrag_detail.html
View File

@ -373,8 +373,10 @@
<button onclick="v2DetailShare('threads')" class="v3-action-btn">Threads</button>
<button onclick="v2DetailShareMastodon()" class="v3-action-btn">Mastodon</button>
<button onclick="v2DetailShare('linkedin')" class="v3-action-btn">LinkedIn</button>
<button onclick="v2DetailShareInstagram()" class="v3-action-btn">📷 Instagram</button>
<button onclick="v2DetailShareEmail()" class="v3-action-btn">📧 E-Mail</button>
<button onclick="v2DetailShareImage()" class="v3-action-btn">🖼 Bild</button>
<button onclick="v2DetailShareScorecard()" class="v3-action-btn">📊 Scorecard ansehen</button>
<button onclick="v2DetailShareImage()" class="v3-action-btn" title="Stockphoto-Suche bei Magnific zum Antragsthema">🖼 Stock-Bild</button>
</div>
</div>