Ruben/Onyva-Postling
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimized linkedin preview

Browse Source
This commit is contained in:
Ruben Fischer
2026-02-12 09:54:56 +01:00
parent 4bbaad0b4e
commit 811aed522d
4 changed files with 4943 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/web/templates/user/company_manage_post_detail.html
View File

@@ -10,7 +10,11 @@
.linkedin-preview {
background: #ffffff;
border-radius: 8px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Fira Sans', Ubuntu, Oxygen, 'Oxygen Sans', Cantarell, 'Droid Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lucida Grande', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: rgba(0, 0, 0, 0.9);
overflow: hidden;
}
@@ -37,11 +41,12 @@
.linkedin-name { font-weight: 600; font-size: 14px; color: rgba(0, 0, 0, 0.9); }
.linkedin-headline { font-size: 12px; color: rgba(0, 0, 0, 0.6); margin-top: 2px; }
.linkedin-timestamp { font-size: 12px; color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.linkedin-content { padding: 0 16px 12px; font-size: 14px; line-height: 1.5; color: rgba(0, 0, 0, 0.9); white-space: pre-wrap; }
.linkedin-content { padding: 0 16px 8px; font-size: 14px; line-height: 1.4; color: rgba(0, 0, 0, 0.9); white-space: pre-wrap; }
.linkedin-engagement { padding: 8px 16px; border-top: 1px solid rgba(0, 0, 0, 0.08); display: flex; align-items: center; gap: 4px; font-size: 12px; color: rgba(0, 0, 0, 0.6); }
.linkedin-actions { display: flex; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.linkedin-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, 0.6); }
.linkedin-action-btn svg { width: 20px; height: 20px; }
.linkedin-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 16px; height: 40px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, 0.6); background: transparent; border: none; cursor: default; transition: all 0.15s; }
.linkedin-action-btn:hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.9); }
.linkedin-action-btn svg { width: 16px; height: 16px; }
.linkedin-post-image { width: 100%; max-height: 400px; object-fit: cover; }
.image-upload-zone { border: 2px dashed rgba(61, 72, 72, 0.8); border-radius: 0.75rem; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; }
.image-upload-zone:hover, .image-upload-zone.dragover { border-color: #ffc700; background: rgba(255, 199, 0, 0.05); }
@@ -58,18 +63,28 @@
.preview-mode-btn:hover:not(.active) { color: #d1d5db; }
/* Desktop View */
.linkedin-preview.desktop-view { max-width: 100%; margin: 0; }
.desktop-view-container { background: #f3f2ef; padding: 16px; border-radius: 8px; }
.mobile-view-container { background: transparent; padding: 0; }
/* Mobile View - smartphone mockup */
.linkedin-preview.mobile-view { max-width: 375px; margin: 0 auto; border: 12px solid #1f1f1f; border-radius: 36px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); position: relative; }
.linkedin-preview.mobile-view::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: #2a2a2a; border-radius: 2px; }
.linkedin-preview.mobile-view .linkedin-header { padding: 16px; }
.linkedin-preview.mobile-view { max-width: 375px; height: 750px; margin: 0 auto; border: 14px solid #1f1f1f; border-radius: 42px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); position: relative; overflow-y: auto; overflow-x: hidden; display: block; }
/* iPhone Notch - bleibt fix beim Scrollen */
.linkedin-preview.mobile-view::before { content: ''; position: sticky; top: 0; left: 50%; transform: translateX(-50%); width: 170px; height: 28px; background: #1f1f1f; border-radius: 0 0 20px 20px; z-index: 100; display: block; margin: 0 auto; pointer-events: none; }
/* Notch Camera - bleibt fix beim Scrollen */
.linkedin-preview.mobile-view::after { content: ''; position: sticky; top: 8px; left: 50%; transform: translateX(35px); width: 12px; height: 12px; background: #0a0a0a; border-radius: 50%; border: 1px solid #2a2a2a; z-index: 101; display: block; margin-top: -22px; pointer-events: none; }
/* Verhindert, dass Content unter die Notch scrollt */
.linkedin-preview.mobile-view .linkedin-actions { margin-bottom: 0; }
.linkedin-preview.mobile-view::-webkit-scrollbar { width: 4px; }
.linkedin-preview.mobile-view::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
.linkedin-preview.mobile-view::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 2px; }
.linkedin-preview.mobile-view .linkedin-header { padding: 8px 12px; padding-top: 33px; }
.linkedin-preview.mobile-view .linkedin-avatar { width: 40px; height: 40px; font-size: 16px; }
.linkedin-preview.mobile-view .linkedin-name { font-size: 13px; }
.linkedin-preview.mobile-view .linkedin-headline { font-size: 11px; }
.linkedin-preview.mobile-view .linkedin-timestamp { font-size: 11px; }
.linkedin-preview.mobile-view .linkedin-content { padding: 0 16px 16px; font-size: 13px; line-height: 1.4; }
.linkedin-preview.mobile-view .linkedin-engagement { padding: 12px 16px; font-size: 11px; }
.linkedin-preview.mobile-view .linkedin-action-btn { font-size: 13px; padding: 14px 8px; gap: 4px; }
.linkedin-preview.mobile-view .linkedin-action-btn svg { width: 18px; height: 18px; }
.linkedin-preview.mobile-view .linkedin-content { padding: 0 12px 12px; font-size: 14px; line-height: 1.4; }
.linkedin-preview.mobile-view .linkedin-engagement { padding: 12px 12px; font-size: 11px; }
.linkedin-preview.mobile-view .linkedin-action-btn { font-size: 0; padding: 14px 8px; gap: 0; }
.linkedin-preview.mobile-view .linkedin-action-btn svg { width: 22px; height: 22px; margin: 0; }
</style>
{% endblock %}
@@ -129,7 +144,7 @@
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
LinkedIn Vorschau
</div>
<div class="flex items-center gap-1 bg-brand-bg rounded-lg p-1">
<div class="flex items-center gap-0.5 bg-brand-bg rounded-lg p-1">
<button onclick="setPreviewMode('desktop')" id="desktopPreviewBtn" class="preview-mode-btn active">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
Desktop
@@ -140,7 +155,8 @@
</button>
</div>
</div>
<div class="linkedin-preview shadow-lg desktop-view">
<div id="linkedinPreviewContainer" class="desktop-view-container">
<div id="linkedinPreview" class="linkedin-preview desktop-view">
<div class="linkedin-header">
<div class="linkedin-avatar">{{ employee_name[:2] | upper if employee_name else 'UN' }}</div>
<div class="linkedin-user-info">
@@ -160,7 +176,28 @@
<!-- LinkedIn Media Display -->
<div id="linkedinMediaSection" class="{% if not post.media_items or post.media_items | length == 0 %}{% if not post.image_url %}hidden{% endif %}{% endif %}">
{% if post.media_items and post.media_items | length > 0 %}
<div class="grid gap-1" style="grid-template-columns: repeat({{ post.media_items | length if post.media_items | length <= 3 else 3 }}, 1fr);">
{% if post.media_items | length == 3 %}
<!-- LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander -->
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2px;">
{% if post.media_items[0].type == 'image' %}
<img src="{{ post.media_items[0].url }}" alt="Post media 1" class="w-full h-64 object-cover" style="grid-column: 1 / -1;">
{% elif post.media_items[0].type == 'video' %}
<video src="{{ post.media_items[0].url }}" class="w-full h-64 object-cover" controls style="grid-column: 1 / -1;"></video>
{% endif %}
{% if post.media_items[1].type == 'image' %}
<img src="{{ post.media_items[1].url }}" alt="Post media 2" class="w-full h-48 object-cover">
{% elif post.media_items[1].type == 'video' %}
<video src="{{ post.media_items[1].url }}" class="w-full h-48 object-cover" controls></video>
{% endif %}
{% if post.media_items[2].type == 'image' %}
<img src="{{ post.media_items[2].url }}" alt="Post media 3" class="w-full h-48 object-cover">
{% elif post.media_items[2].type == 'video' %}
<video src="{{ post.media_items[2].url }}" class="w-full h-48 object-cover" controls></video>
{% endif %}
</div>
{% else %}
<!-- Standard Grid für 1 oder 2 Bilder -->
<div class="grid" style="grid-template-columns: repeat({{ post.media_items | length }}, 1fr); gap: 2px;">
{% for item in post.media_items %}
{% if item.type == 'image' %}
<img src="{{ item.url }}" alt="Post media" class="w-full h-48 object-cover">
@@ -169,6 +206,7 @@
{% endif %}
{% endfor %}
</div>
{% endif %}
{% elif post.image_url %}
<!-- Backward compatibility: single image -->
<img src="{{ post.image_url }}" alt="Post image" class="linkedin-post-image">
@@ -192,7 +230,7 @@
Kommentieren
</button>
<button class="linkedin-action-btn">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.96 5H6c-.55 0-1 .45-1 1v11H3V6c0-1.66 1.34-3 3-3h7.96L12 0l1.96 5zM17 7h-7c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 12l-4.61 7H16l4-6H8a3.92 3.92 0 00-4 3.84V17a4 4 0 00.19 1.24L5.12 21H3l-.73-2.22A6.4 6.4 0 012 16.94 6 6 0 018 11h12l-4-6h2.39z"/></svg>
Reposten
</button>
<button class="linkedin-action-btn">
@@ -201,6 +239,7 @@
</button>
</div>
</div>
</div>
</div>
</div>
@@ -322,18 +361,23 @@ function copyToClipboard() {
// Preview Mode Toggle (Desktop/Mobile)
function setPreviewMode(mode) {
const preview = document.querySelector('.linkedin-preview');
const preview = document.getElementById('linkedinPreview');
const container = document.getElementById('linkedinPreviewContainer');
const desktopBtn = document.getElementById('desktopPreviewBtn');
const mobileBtn = document.getElementById('mobilePreviewBtn');
if (mode === 'desktop') {
preview.classList.remove('mobile-view');
preview.classList.add('desktop-view');
container.classList.add('desktop-view-container');
container.classList.remove('mobile-view-container');
desktopBtn.classList.add('active');
mobileBtn.classList.remove('active');
} else if (mode === 'mobile') {
preview.classList.remove('desktop-view');
preview.classList.add('mobile-view');
container.classList.remove('desktop-view-container');
container.classList.add('mobile-view-container');
mobileBtn.classList.add('active');
desktopBtn.classList.remove('active');
}
@@ -538,18 +582,38 @@ function refreshLinkedInPreview() {
}
linkedinMediaSection.classList.remove('hidden');
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' :
currentMediaItems.length === 2 ? 'grid-cols-2' : 'grid-cols-3';
linkedinMediaSection.innerHTML = `
<div class="grid ${gridClass} gap-1">
${currentMediaItems.map(item =>
item.type === 'image'
? `<img src="${item.url}" class="w-full h-48 object-cover">`
: `<video src="${item.url}" class="w-full h-48 object-cover" controls></video>`
).join('')}
</div>
`;
// LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander
if (currentMediaItems.length === 3) {
linkedinMediaSection.innerHTML = `
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2px;">
${currentMediaItems[0].type === 'image'
? `<img src="${currentMediaItems[0].url}" class="w-full h-64 object-cover" style="grid-column: 1 / -1;">`
: `<video src="${currentMediaItems[0].url}" class="w-full h-64 object-cover" controls style="grid-column: 1 / -1;"></video>`
}
${currentMediaItems[1].type === 'image'
? `<img src="${currentMediaItems[1].url}" class="w-full h-48 object-cover">`
: `<video src="${currentMediaItems[1].url}" class="w-full h-48 object-cover" controls></video>`
}
${currentMediaItems[2].type === 'image'
? `<img src="${currentMediaItems[2].url}" class="w-full h-48 object-cover">`
: `<video src="${currentMediaItems[2].url}" class="w-full h-48 object-cover" controls></video>`
}
</div>
`;
} else {
// Standard Grid für 1 oder 2 Bilder
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' : 'grid-cols-2';
linkedinMediaSection.innerHTML = `
<div class="grid ${gridClass}" style="gap: 2px;">
${currentMediaItems.map(item =>
item.type === 'image'
? `<img src="${item.url}" class="w-full h-48 object-cover">`
: `<video src="${item.url}" class="w-full h-48 object-cover" controls></video>`
).join('')}
</div>
`;
}
}
// Drag-and-Drop Reorder (Ultra Smooth with Ghost)

208
src/web/templates/user/post_detail.html
View File

@@ -56,7 +56,11 @@
.linkedin-preview {
background: #ffffff;
border-radius: 8px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Fira Sans', Ubuntu, Oxygen, 'Oxygen Sans', Cantarell, 'Droid Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lucida Grande', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: rgba(0, 0, 0, 0.9);
overflow: hidden;
}
@@ -114,9 +118,9 @@
margin-top: 2px;
}
.linkedin-content {
padding: 0 16px 12px;
padding: 0 16px 8px;
font-size: 14px;
line-height: 1.5;
line-height: 1.4;
color: rgba(0, 0, 0, 0.9);
white-space: pre-wrap;
word-wrap: break-word;
@@ -164,25 +168,33 @@
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 8px;
gap: 4px;
padding: 0 16px;
height: 40px;
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.6);
background: transparent;
border: none;
cursor: default;
transition: background 0.15s;
transition: all 0.15s;
}
.linkedin-action-btn:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.9);
}
.linkedin-action-btn svg {
width: 20px;
height: 20px;
width: 16px;
height: 16px;
}
.linkedin-more-btn {
padding: 4px;
color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
cursor: default;
display: flex;
align-items: center;
justify-content: center;
}
.view-toggle {
display: inline-flex;
@@ -229,28 +241,80 @@
max-width: 100%;
margin: 0;
}
/* Desktop Background (LinkedIn beige) */
.desktop-view-container {
background: #f3f2ef;
padding: 16px;
border-radius: 8px;
}
.mobile-view-container {
background: transparent;
padding: 0;
}
/* Mobile View - smartphone mockup */
.linkedin-preview.mobile-view {
max-width: 375px;
height: 750px; /* iPhone-Höhe */
margin: 0 auto;
border: 12px solid #1f1f1f;
border-radius: 36px;
border: 14px solid #1f1f1f;
border-radius: 42px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow-y: auto; /* Scrollbar aktiviert */
overflow-x: hidden;
display: block;
}
/* iPhone Notch - bleibt fix beim Scrollen */
.linkedin-preview.mobile-view::before {
content: '';
position: absolute;
top: -8px;
position: sticky;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: #2a2a2a;
width: 170px;
height: 28px;
background: #1f1f1f;
border-radius: 0 0 20px 20px;
z-index: 100;
display: block;
margin: 0 auto;
pointer-events: none;
}
/* Notch Camera Circle - bleibt fix beim Scrollen */
.linkedin-preview.mobile-view::after {
content: '';
position: sticky;
top: 8px;
left: 50%;
transform: translateX(35px);
width: 12px;
height: 12px;
background: #0a0a0a;
border-radius: 50%;
border: 1px solid #2a2a2a;
z-index: 101;
display: block;
margin-top: -22px;
pointer-events: none;
}
/* Verhindert, dass Content unter die Notch scrollt */
.linkedin-preview.mobile-view .linkedin-actions {
margin-bottom: 0;
}
/* Custom scrollbar */
.linkedin-preview.mobile-view::-webkit-scrollbar {
width: 4px;
}
.linkedin-preview.mobile-view::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
.linkedin-preview.mobile-view::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
.linkedin-preview.mobile-view .linkedin-header {
padding: 16px;
padding: 8px 12px;
padding-top: 33px; /* Space for notch (28px) + 5px margin */
}
.linkedin-preview.mobile-view .linkedin-avatar {
width: 40px;
@@ -267,8 +331,8 @@
font-size: 11px;
}
.linkedin-preview.mobile-view .linkedin-content {
padding: 0 16px 16px;
font-size: 13px;
padding: 0 12px 12px;
font-size: 14px;
line-height: 1.4;
}
.linkedin-preview.mobile-view .linkedin-see-more {
@@ -280,13 +344,14 @@
font-size: 11px;
}
.linkedin-preview.mobile-view .linkedin-action-btn {
font-size: 13px;
font-size: 0; /* Hide text labels on mobile */
padding: 14px 8px;
gap: 4px;
gap: 0;
}
.linkedin-preview.mobile-view .linkedin-action-btn svg {
width: 18px;
height: 18px;
width: 22px;
height: 22px;
margin: 0;
}
.view-toggle-btn:hover:not(.active) {
color: #e5e7eb;
@@ -505,12 +570,12 @@
</div>
<!-- LinkedIn Preview View -->
<div class="mb-4 flex items-center justify-between">
<div id="previewModeContainer" class="mb-4 flex items-center justify-between">
<div class="flex items-center gap-2 text-sm text-gray-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
LinkedIn Vorschau
</div>
<div class="flex items-center gap-1 bg-brand-bg rounded-lg p-1">
<div id="previewModeButtons" class="flex items-center gap-1 bg-brand-bg rounded-lg p-1">
<button onclick="setPreviewMode('desktop')" id="desktopPreviewBtn" class="preview-mode-btn active">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
Desktop
@@ -521,7 +586,8 @@
</button>
</div>
</div>
<div id="linkedinPreview" class="linkedin-preview shadow-lg desktop-view">
<div id="linkedinPreviewContainer" class="desktop-view-container">
<div id="linkedinPreview" class="linkedin-preview desktop-view">
<div class="linkedin-header">
<div class="linkedin-avatar">
{% if profile_picture_url %}
@@ -543,7 +609,9 @@
</div>
<div class="linkedin-more-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M14 12a2 2 0 11-4 0 2 2 0 014 0zM4 12a2 2 0 11-4 0 2 2 0 014 0zm16 0a2 2 0 11-4 0 2 2 0 014 0z"/>
<circle cx="6" cy="12" r="2"/>
<circle cx="12" cy="12" r="2"/>
<circle cx="18" cy="12" r="2"/>
</svg>
</div>
</div>
@@ -553,7 +621,28 @@
<!-- LinkedIn Media Display -->
<div id="linkedinMediaSection" class="{% if not post.media_items or post.media_items | length == 0 %}{% if not post.image_url %}hidden{% endif %}{% endif %}">
{% if post.media_items and post.media_items | length > 0 %}
<div class="grid gap-1" style="grid-template-columns: repeat({{ post.media_items | length if post.media_items | length <= 3 else 3 }}, 1fr);">
{% if post.media_items | length == 3 %}
<!-- LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander -->
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2px;">
{% if post.media_items[0].type == 'image' %}
<img src="{{ post.media_items[0].url }}" alt="Post media 1" class="w-full h-64 object-cover" style="grid-column: 1 / -1;">
{% elif post.media_items[0].type == 'video' %}
<video src="{{ post.media_items[0].url }}" class="w-full h-64 object-cover" controls style="grid-column: 1 / -1;"></video>
{% endif %}
{% if post.media_items[1].type == 'image' %}
<img src="{{ post.media_items[1].url }}" alt="Post media 2" class="w-full h-48 object-cover">
{% elif post.media_items[1].type == 'video' %}
<video src="{{ post.media_items[1].url }}" class="w-full h-48 object-cover" controls></video>
{% endif %}
{% if post.media_items[2].type == 'image' %}
<img src="{{ post.media_items[2].url }}" alt="Post media 3" class="w-full h-48 object-cover">
{% elif post.media_items[2].type == 'video' %}
<video src="{{ post.media_items[2].url }}" class="w-full h-48 object-cover" controls></video>
{% endif %}
</div>
{% else %}
<!-- Standard Grid für 1 oder 2 Bilder -->
<div class="grid" style="grid-template-columns: repeat({{ post.media_items | length }}, 1fr); gap: 2px;">
{% for item in post.media_items %}
{% if item.type == 'image' %}
<img src="{{ item.url }}" alt="Post media" class="w-full h-48 object-cover">
@@ -562,6 +651,7 @@
{% endif %}
{% endfor %}
</div>
{% endif %}
{% elif post.image_url %}
<!-- Backward compatibility: single image -->
<img src="{{ post.image_url }}" alt="Post image" class="linkedin-post-image">
@@ -592,7 +682,7 @@
</button>
<button class="linkedin-action-btn">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M13.96 5H6c-.55 0-1 .45-1 1v11H3V6c0-1.66 1.34-3 3-3h7.96L12 0l1.96 5zM17 7h-7c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z"/>
<path d="M23 12l-4.61 7H16l4-6H8a3.92 3.92 0 00-4 3.84V17a4 4 0 00.19 1.24L5.12 21H3l-.73-2.22A6.4 6.4 0 012 16.94 6 6 0 018 11h12l-4-6h2.39z"/>
</svg>
Reposten
</button>
@@ -604,6 +694,7 @@
</button>
</div>
</div>
</div>
<!-- Raw View -->
<div id="rawView" class="bg-brand-bg/50 rounded-lg p-5 hidden">
@@ -973,16 +1064,17 @@ function addNewVersion(content) {
// View Toggle functions
function setView(view) {
currentView = view;
const previewEl = document.getElementById('linkedinPreview');
const previewContainer = document.getElementById('linkedinPreviewContainer');
const rawEl = document.getElementById('rawView');
const editEl = document.getElementById('editView');
const seeMoreBtn = document.getElementById('seeMoreBtn');
const previewToggle = document.getElementById('previewToggle');
const rawToggle = document.getElementById('rawToggle');
const editToggle = document.getElementById('editToggle');
const previewModeContainer = document.getElementById('previewModeContainer');
// Hide all views
previewEl.classList.add('hidden');
previewContainer.classList.add('hidden');
rawEl.classList.add('hidden');
editEl.classList.add('hidden');
if (seeMoreBtn) seeMoreBtn.classList.add('hidden');
@@ -993,15 +1085,21 @@ function setView(view) {
editToggle.classList.remove('active');
if (view === 'preview') {
previewEl.classList.remove('hidden');
previewContainer.classList.remove('hidden');
if (seeMoreBtn) seeMoreBtn.classList.remove('hidden');
previewToggle.classList.add('active');
// Show preview mode container only in preview view
if (previewModeContainer) previewModeContainer.classList.remove('hidden');
} else if (view === 'raw') {
rawEl.classList.remove('hidden');
rawToggle.classList.add('active');
// Hide preview mode container
if (previewModeContainer) previewModeContainer.classList.add('hidden');
} else if (view === 'edit') {
editEl.classList.remove('hidden');
editToggle.classList.add('active');
// Hide preview mode container
if (previewModeContainer) previewModeContainer.classList.add('hidden');
// Reset textarea to current content
const currentContent = document.getElementById('finalPostContent').textContent;
document.getElementById('editTextarea').value = currentContent;
@@ -1012,17 +1110,22 @@ function setView(view) {
// Preview Mode Toggle (Desktop/Mobile)
function setPreviewMode(mode) {
const preview = document.getElementById('linkedinPreview');
const container = document.getElementById('linkedinPreviewContainer');
const desktopBtn = document.getElementById('desktopPreviewBtn');
const mobileBtn = document.getElementById('mobilePreviewBtn');
if (mode === 'desktop') {
preview.classList.remove('mobile-view');
preview.classList.add('desktop-view');
container.classList.add('desktop-view-container');
container.classList.remove('mobile-view-container');
desktopBtn.classList.add('active');
mobileBtn.classList.remove('active');
} else if (mode === 'mobile') {
preview.classList.remove('desktop-view');
preview.classList.add('mobile-view');
container.classList.remove('desktop-view-container');
container.classList.add('mobile-view-container');
mobileBtn.classList.add('active');
desktopBtn.classList.remove('active');
}
@@ -1600,18 +1703,37 @@ function refreshLinkedInPreview() {
linkedinMediaSection.classList.remove('hidden');
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' :
currentMediaItems.length === 2 ? 'grid-cols-2' : 'grid-cols-3';
linkedinMediaSection.innerHTML = `
<div class="grid ${gridClass} gap-1">
${currentMediaItems.map(item =>
item.type === 'image'
? `<img src="${item.url}" class="w-full h-48 object-cover">`
: `<video src="${item.url}" class="w-full h-48 object-cover" controls></video>`
).join('')}
</div>
`;
// LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander
if (currentMediaItems.length === 3) {
linkedinMediaSection.innerHTML = `
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2px;">
${currentMediaItems[0].type === 'image'
? `<img src="${currentMediaItems[0].url}" class="w-full h-64 object-cover" style="grid-column: 1 / -1;">`
: `<video src="${currentMediaItems[0].url}" class="w-full h-64 object-cover" controls style="grid-column: 1 / -1;"></video>`
}
${currentMediaItems[1].type === 'image'
? `<img src="${currentMediaItems[1].url}" class="w-full h-48 object-cover">`
: `<video src="${currentMediaItems[1].url}" class="w-full h-48 object-cover" controls></video>`
}
${currentMediaItems[2].type === 'image'
? `<img src="${currentMediaItems[2].url}" class="w-full h-48 object-cover">`
: `<video src="${currentMediaItems[2].url}" class="w-full h-48 object-cover" controls></video>`
}
</div>
`;
} else {
// Standard Grid für 1 oder 2 Bilder
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' : 'grid-cols-2';
linkedinMediaSection.innerHTML = `
<div class="grid ${gridClass}" style="gap: 2px;">
${currentMediaItems.map(item =>
item.type === 'image'
? `<img src="${item.url}" class="w-full h-48 object-cover">`
: `<video src="${item.url}" class="w-full h-48 object-cover" controls></video>`
).join('')}
</div>
`;
}
}
// Drag-and-Drop Reorder (Ultra Smooth with Ghost)