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

4313
linkedin_all.html Normal file
View File

File diff suppressed because one or more lines are too long

374
linkedin_post_notes.txt Normal file
View File

@@ -0,0 +1,374 @@
element.style {
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (-webkit-min-device-pixel-ratio: 2.08333), only screen and (min-device-pixel-ratio:1.25), only screen and (min-resolution: 1.25dppx), only screen and (min-resolution: 200dpi) {
html.artdeco {
-webkit-font-smoothing: subpixel-antialiased;
}
}
html.artdeco {
-webkit-font-smoothing: antialiased;
}
:root {
--tenor-gif-logo: url(/aero-v1/sc/h/d2kkhofmuuxleioyci47pssdd);
}
:root {
--msg-reactions-emoji-plus-icon: url(/aero-v1/sc/h/dr1b79i84eh8czy2ijk7i9z7c);
}
:root {
--app-upsell-light-frame-image: url(/aero-v1/sc/h/9u1h3jtou757jdyts0aa9di9m);
}
:root {
--scaffold-layout-list-detail-bottom-offset: 50px;
}
:root {
--scaffold-layout-gutter: 1.2rem;
--scaffold-layout-none-max-width: 576px;
--scaffold-layout-md-max-width: 720px;
--scaffold-layout-lg-max-width: 960px;
--scaffold-layout-xl-max-width: 1128px;
--scaffold-layout-sidebar-width: minmax(0, 300px);
--scaffold-layout-sidebar-narrow-width: minmax(0, 225px);
--scaffold-layout-main-width: minmax(0, auto);
--scaffold-layout-aside-width: minmax(0, 300px);
}
:root {
--org-addon-bing-logo: url(/aero-v1/sc/h/a962xew3q1hfeb3mlcjj1ux8o);
--org-addon-bing-logo-v2: url(/aero-v1/sc/h/e9goo6gv8o41no8si6f11hrup);
}
.theme--dark, :root {
--msg-bluejeans-virtual-meeting-icon: url(/aero-v1/sc/h/4pwxmk5zdrww2xgpzh1s6w8wo);
--msg-teams-virtual-meeting-icon: url(/aero-v1/sc/h/anrbpluz8oa3k1ijq55l0hbas);
--msg-zoom-virtual-meeting-icon: url(/aero-v1/sc/h/6jeeyg4s09feux6cv5aanxzvk);
}
:root {
--lbp-color-text: var(--color-text);
--lbp-color-text-disabled: var(--color-text-disabled);
--lbp-color-text-meta: var(--color-text-meta);
--lbp-color-background: var(--color-background);
--lbp-color-border-faint: var(--color-border-faint);
--lbp-color-checked: var(--color-checked);
--lbp-color-label: var(--color-label);
--lbp-color-label-knockout: var(--color-label-knockout);
--lbp-color-border: var(--color-border);
--lbp-color-label-hover: var(--color-label-hover);
--lbp-color-background-transparent-hover: var(--color-background-transparent-hover);
--lbp-color-background-faint: var(--color-background-faint);
--lbp-color-border-hover: var(--color-border-hover);
--lbp-color-negative: var(--color-negative);
--lbp-color-background-transparent: var(--color-background-transparent);
--lbp-color-background-accent-soft-4: var(--color-background-accent-soft-4);
--lbp-color-positive: var(--color-positive);
--lbp-color-action: var(--color-action);
--lbp-color-label-active: var(--color-label-active);
--lbp-color-border-subtle: var(--color-border-subtle);
}
:root {
--lbp-color-border-faint-active: var(--color-border-faint-active);
--lbp-color-accent-4: var(--color-accent-4);
--lbp-color-accent-4-active: var(--color-accent-4-active);
}
:root {
--lbp-color-text-meta: var(--color-text-meta-solid);
--lbp-color-border-faint-2: var(--color-border-faint);
--lbp-color-action-active: var(--color-action-active);
--lbp-color-background-accent-strong: var(--color-background-accent-strong-4);
}
:root {
--lbp-color-text: ui-token(color-text);
--lbp-color-text-disabled: ui-token(color-text-disabled);
--lbp-color-text-meta: ui-token(color-text-meta);
--lbp-color-background: ui-token(color-background);
--lbp-color-border-faint: ui-token(color-border-faint);
--lbp-color-checked: ui-token(color-checked);
--lbp-color-label: ui-token(color-label);
--lbp-color-label-knockout: ui-token(color-label-knockout);
--lbp-color-border: ui-token(color-border);
--lbp-color-label-hover: ui-token(color-label-hover);
--lbp-color-background-transparent-hover: ui-token(color-background-transparent-hover);
}
:lang(de) {
font-family: var(--artdeco-reset-typography-font-family-sans);
}
:root {
--ghost-article: url(/aero-v1/sc/h/ob1kf016vuxdwngitvgyd4qo);
--ghost-image: url(/aero-v1/sc/h/2jgp12jkw69qzxpu3r0rvbw01);
}
:root, body, html {
margin: 0;
padding: 0;
background-color: var(--color-background-canvas) !important;
box-sizing: border-box;
}
:root {
--artdeco-button-primary-inverse-static-background-color: var(--voyager-color-action-on-dark);
--artdeco-button-primary-inverse-static-color: var(--voyager-color-action-stick);
--artdeco-button-primary-inverse-hover-background-color: var(--voyager-color-action-on-dark);
--artdeco-button-primary-inverse-hover-color: var(--voyager-color-action-stick-hover);
--artdeco-button-primary-inverse-active-background-color: var(--voyager-color-action-on-dark-active);
--artdeco-button-primary-inverse-active-color: var(--voyager-color-action-stick-active);
--artdeco-button-primary-inverse-disabled-background-color: var(--color-background-on-dark-disabled);
--artdeco-button-primary-inverse-disabled-color: var(--color-text-on-dark-disabled);
--artdeco-button-secondary-inverse-static-background-color: var(--color-background-none-on-dark);
--artdeco-button-secondary-inverse-static-border-color: var(--color-border-on-dark);
--artdeco-button-secondary-inverse-static-color: var(--color-text-on-dark);
--artdeco-button-secondary-inverse-hover-background-color: var(--color-background-none-on-dark-hover);
--artdeco-button-secondary-inverse-hover-border-color: var(--color-border-on-dark);
--artdeco-button-secondary-inverse-hover-color: var(--color-text-on-dark);
--artdeco-button-secondary-inverse-active-background-color: var(--color-background-none-on-dark-active);
--artdeco-button-secondary-inverse-active-border-color: var(--color-border-on-dark-active);
--artdeco-button-secondary-inverse-active-color: var(--color-text-on-dark-active);
--artdeco-button-secondary-inverse-disabled-background-color: var(--color-background-on-dark-disabled);
--artdeco-button-secondary-inverse-disabled-border-color: var(--color-transparent);
--artdeco-button-secondary-inverse-disabled-color: var(--color-text-on-dark-disabled);
--artdeco-button-tertiary-inverse-static-background-color: var(--color-background-none-on-dark);
--artdeco-button-tertiary-inverse-static-color: var(--color-text-on-dark);
--artdeco-button-tertiary-inverse-hover-background-color: var(--color-background-none-tint-on-dark-hover);
--artdeco-button-tertiary-inverse-hover-color: var(--color-text-on-dark);
--artdeco-button-tertiary-inverse-active-background-color: var(--color-background-none-tint-on-dark-active);
--artdeco-button-tertiary-inverse-active-color: var(--color-text-on-dark-active);
--artdeco-button-tertiary-inverse-disabled-background-color: var(--color-background-none-on-dark);
--artdeco-button-tertiary-inverse-disabled-color: var(--color-text-on-dark-disabled);
--artdeco-button-primary-inverse-premium-disabled-background-color: var(--color-background-on-dark-disabled);
--artdeco-button-primary-inverse-premium-disabled-color: var(--color-text-on-dark-disabled);
--artdeco-button-primary-default-static-background-color: var(--color-action);
--artdeco-button-primary-default-static-color: var(--color-label-knockout);
--artdeco-button-primary-default-hover-background-color: var(--color-action-hover);
--artdeco-button-primary-default-hover-color: var(--color-label-knockout-hover);
--artdeco-button-primary-default-active-background-color: var(--color-action-active);
--artdeco-button-primary-default-active-color: var(--color-label-knockout-active);
--artdeco-button-primary-default-disabled-background-color: var(--color-background-disabled);
--artdeco-button-primary-default-disabled-color: var(--color-label-disabled);
--artdeco-button-secondary-default-static-background-color: var(--color-background-transparent);
--artdeco-button-secondary-default-static-border-color: var(--color-action);
--artdeco-button-secondary-default-static-color: var(--color-action);
--artdeco-button-secondary-default-hover-background-color: var(--color-background-action-transparent-hover);
--artdeco-button-secondary-default-hover-border-color: var(--color-action-hover);
--artdeco-button-secondary-default-hover-color: var(--color-action-hover);
--artdeco-button-secondary-default-active-background-color: var(--color-background-action-transparent-active);
--artdeco-button-secondary-default-active-border-color: var(--color-action-active);
--artdeco-button-secondary-default-active-color: var(--color-action-active);
--artdeco-button-secondary-default-disabled-background-color: var(--color-background-disabled);
--artdeco-button-secondary-default-disabled-border-color: var(--color-background-transparent);
--artdeco-button-secondary-default-disabled-color: var(--color-label-disabled);
Show all properties (36 more)
}
:root {
font-family: var(--artdeco-reset-typography-font-family-sans);
}
.hue-web__artdeco-migration-scope--revert, :root {
--artdeco-reset-typography-get-color-black-90: rgba(0, 0, 0, 0.9);
--artdeco-reset-typography-font-family-sans: -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 Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;
--artdeco-reset-typography-font-size-65-percent: 62.5%;
--artdeco-reset-typography-font-weight-bold: 600;
--artdeco-reset-typography-font-weight-light: 200;
--artdeco-reset-typography-font-weight-normal: 400;
--artdeco-reset-typography-font-family-inherit: inherit;
--artdeco-reset-typography-font-style-italic: italic;
--artdeco-reset-typography-font-style-normal: normal;
--artdeco-reset-link-text-decoration-none: none;
--artdeco-reset-link-font-weight-bold: 600;
--artdeco-reset-link-background-color-transparent: transparent;
--artdeco-reset-link-border-zero: 0;
--artdeco-reset-link-color-blue7: var(--blue-70, #0073b1);
--artdeco-reset-link-text-decoration-underline: underline;
--artdeco-reset-link-color-blue8: var(--blue-70, #006097);
--artdeco-reset-link-color-blue9: var(--blue-80, #004b7c);
--artdeco-reset-link-color-purple7: var(--purple-70, #665ed0);
--artdeco-reset-link-color-purple8: var(--purple-70, #544bc2);
--artdeco-reset-link-color-purple9: var(--purple-80, #4034b0);
--artdeco-typography-mono: SF Mono, Consolas, Roboto Mono, Noto Mono, Droid Mono, Fira Mono, Ubuntu Mono, Oxygen Mono, Lucida Console, Menlo, Monaco, monospace;
--artdeco-typography-sans: -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 Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;
--artdeco-typography-serif: Noto Serif, Droid Serif, Georgia, serif;
--artdeco-typography-ar: Geeza Pro, Arial, Calibri, Noto Nashk Arabic, Noto Sans Arabic;
--artdeco-typography-bn: Kohinoor Bangla, Nirmala UI, Noto Sans Bengali;
--artdeco-typography-fa: Geeza Pro, Arial, Calibri, Noto Nashk Arabic, Noto Sans Arabic;
--artdeco-typography-he: Segoe UI, Arial Hebrew, Lucida Grande, Arial, Noto Sans Hebrew;
--artdeco-typography-hi: Kohinoor Devanagari, Mangal, Nirmala UI, Noto Sans Devanagari;
--artdeco-typography-ja: Meiryo, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic Pro, Noto Sans Japanese;
--artdeco-typography-ko: Malgun Gothic, Apple SD Gothic Neo, Noto Sans Korean;
--artdeco-typography-mr: Kohinoor Devanagari, Mangal, Nirmala UI, Noto Sans Devanagari;
--artdeco-typography-pa: MuktaMahee Regular, Raavi, Nirmala UI, Noto Sans Gurmukhi;
--artdeco-typography-te: Kohinoor Telugu, Nirmala UI, Noto Sans Telugu;
--artdeco-typography-th: Leelawadee, Thonburi;
--artdeco-typography-zh: Microsoft Yahei, PingFang SC, PingFang TC, Hiragino Sans, Hiragino Kaku Gothic Pro, Noto Sans Simplified Chinese, Noto Sans Traditional Chinese;
--artdeco-typography-zh-cn: PingFang SC, Microsoft Yahei, Hiragino Kaku Gothic Pro, Noto Sans Simplified Chinese;
--artdeco-typography-zh-tw: PingFang TC, Microsoft JhengHei, Noto Sans Traditional Chinese;
}
.hue-web__artdeco-migration-scope--revert, :root {
--artdeco-reset-form-position-relative: relative;
--artdeco-reset-form-vertical-align-middle: middle;
--artdeco-reset-form-display-block: block;
--artdeco-reset-form-black-90: rgba(0, 0, 0, 0.9);
--artdeco-reset-form-label-margin: 1.2rem 0 0.3rem;
--artdeco-reset-form-label-opacity: 0.35;
--artdeco-reset-form-webkit-appearance-textfield: textfield;
--artdeco-reset-form-webkit-appearance-none: none;
--artdeco-reset-form-height-auto: auto;
--artdeco-reset-form-padding-top-point-seven-rem: 0.7rem;
--artdeco-reset-form-rc-pointer-events: none;
--artdeco-reset-form-rc-opacity: 0;
--artdeco-reset-form-rc-margin: 1.6rem 0.2rem 0 0;
--artdeco-reset-form-rc-position: absolute;
--artdeco-reset-form-rc-before-after-content: " ";
--artdeco-reset-checkbox-rc-after-content: "\2713";
--artdeco-reset-form-rc-label-display-block: block;
--artdeco-reset-form-rc-label-line-height-2-rem: 2rem;
--artdeco-reset-form-rc-label-margin-bottom-zero: 0;
--artdeco-reset-form-rc-label-padding-zero: 0;
--artdeco-reset-form-rc-label-position-relative: relative;
--artdeco-reset-form-rc-label-padding-left-2point8-rem: 2.8rem;
--artdeco-reset-forms-input-transition-duration: 334ms;
--artdeco-reset-forms-input-transition-property: border-color, box-shadow;
--artdeco-reset-forms-input-box-shadow: none;
--artdeco-reset-forms-input-border-radius: 0.2rem;
--artdeco-reset-forms-input-border: 0.1rem solid rgba(0, 0, 0, 0.6);
--artdeco-reset-forms-input-padding: 0 1rem;
--artdeco-reset-forms-input-width: 100%;
--artdeco-reset-forms-input-height: 3.2rem;
--artdeco-reset-forms-input-box-sizing: border-box;
--artdeco-reset-forms-input-background-color: transparent;
--artdeco-reset-forms-input-color: rgba(0, 0, 0, 0.9);
--artdeco-reset-forms-input-placeholder-color: rgba(0, 0, 0, 0.6);
--artdeco-reset-forms-input-blue: var(--blue-70, #0073b1);
--artdeco-reset-forms-input-focus-box-shadow: 0 0 0 0.1rem var(--blue-70, #0073b1);
--artdeco-reset-forms-input-disabled-hover-border-color: rgba(0, 0, 0, 0.6);
--artdeco-reset-forms-input-disabled-opacity: 0.45;
--artdeco-reset-forms-input-error: var(--system-red-70, #d11124);
--artdeco-reset-forms-font-weight: 400;
--artdeco-reset-forms-font-size: 1.4rem;
--artdeco-reset-forms-line-height: 1.42857;
--artdeco-reset-forms-select-appearance-none: none;
--artdeco-reset-forms-select-box-shadow-none: none;
--artdeco-reset-forms-select-outline-zero: 0;
--artdeco-reset-forms-select-height-3point2-rem: 3.2rem;
--artdeco-reset-forms-select-background-transparent: transparent;
--artdeco-reset-forms-select-position-relative: relative;
--artdeco-reset-forms-select-zindex-two: 2;
--artdeco-reset-forms-select-background-image: url(/aero-v1/sc/h/cwn0a0e7hog2i33c88ucrvot5);
Show all properties (11 more)
}
.hue-web__artdeco-migration-scope--revert, :root {
--artdeco-reset-base-margin-zero: 0;
--artdeco-reset-base-padding-zero: 0;
--artdeco-reset-base-border-zero: 0;
--artdeco-reset-base-font-size-hundred-percent: 100%;
--artdeco-reset-base-font-weight-bold: bold;
--artdeco-reset-base-font-style-italic: italic;
--artdeco-reset-base-outline-zero: 0;
--artdeco-reset-base-outline-none: none;
--artdeco-reset-base-line-height-one: 1;
--artdeco-reset-base-display-block: block;
--artdeco-reset-base-list-style-none: none;
--artdeco-reset-base-quotes-none: none;
--artdeco-reset-base-vertical-align-baseline: baseline;
--artdeco-reset-base-vertical-align-middle: middle;
--artdeco-reset-base-background-transparent: transparent;
--artdeco-reset-base-opacity-zero: 0;
--artdeco-reset-base-top-zero: 0;
--artdeco-reset-base-position-absolute: absolute;
--artdeco-reset-base-text-decoration-none: none;
--artdeco-reset-base-text-decoration-line-through: line-through;
--artdeco-reset-base-border-collapse-collapse: collapse;
--artdeco-reset-base-get-color-black: var(--black, #000);
--artdeco-reset-base-background-color-ff9: #ff9;
--artdeco-reset-base-border-spacing-zero: 0;
--artdeco-reset-base-cursor-help: help;
--artdeco-reset-base-content-none: none;
--artdeco-reset-base-left-minus-hundred-px: -100px;
--artdeco-reset-base-border-thickness-1-px: 1px;
--artdeco-reset-base-border-style-dotted: dotted;
}
:root {
--hue-web-svg-display-light: block;
--hue-web-svg-display-dark: none;
--black: #000;
--black-a90: rgb(0 0 0 / .9);
--black-a75: rgb(0 0 0 / .75);
--black-a60: rgb(0 0 0 / .6);
--black-a45: rgb(0 0 0 / .45);
--black-a30: rgb(0 0 0 / .3);
--black-a15: rgba(0, 0, 0, 0.15);
--black-a12: rgba(0, 0, 0, 0.12);
--black-a08: rgba(0, 0, 0, 0.08);
--black-a04: rgba(0, 0, 0, 0.04);
--white: #fff;
--white-a90: rgb(255 255 255 / .9);
--white-a85: hsla(0, 0%, 100%, 0.85);
--white-a75: rgb(255 255 255 / .75);
--white-a70: hsla(0, 0%, 100%, 0.7);
--white-a60: rgb(255 255 255 / .6);
--white-a55: hsla(0, 0%, 100%, 0.55);
--white-a40: hsla(0, 0%, 100%, 0.4);
--white-a25: hsla(0, 0%, 100%, 0.25);
--white-a18: hsla(0, 0%, 100%, 0.18);
--white-a12: hsla(0, 0%, 100%, 0.12);
--white-a06: hsla(0, 0%, 100%, 0.06);
--blue-10: #f6fbff;
--blue-20: #e8f3ff;
--blue-30: #d2e9ff;
--blue-40: #aad6ff;
--blue-50: #71b7fb;
--blue-50-a20: rgba(112, 181, 249, 0.2);
--blue-50-a30: rgba(112, 181, 249, 0.3);
--blue-50-a40: rgba(112, 181, 249, 0.4);
--blue-60: #378fe9;
--blue-70: #0a66c2;
--blue-70-a30: rgba(10, 102, 194, 0.3);
--blue-70-a40: rgba(10, 102, 194, 0.4);
--blue-70-a50: rgba(10, 102, 194, 0.5);
--blue-80: #004182;
--blue-90: #053059;
--cool-gray-10: #f8fafd;
--cool-gray-20: #edf3f8;
--cool-gray-30: #dde7f1;
--cool-gray-40: #c2d3e4;
--cool-gray-50: #9eb5ca;
--cool-gray-60: #788fa5;
--cool-gray-70: #56687a;
--cool-gray-80: #38434f;
--cool-gray-85: #293138;
--cool-gray-90: #293037;
--warm-gray-10: #fbfaf8;
Show all properties (1428 more)
}
html {
font-size: 62.5%;
}
html {
font-size: var(--artdeco-reset-typography-font-size-65-percent);
}
abbr, audio, b, body, canvas, caption, cite, code, del, dfn, em, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, mark, object, q, samp, small, span, strong, summary, tbody, td, tfoot, th, thead, time, tr, var, video {
outline: var(--artdeco-reset-base-outline-zero);
}
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, summary, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
margin: var(--artdeco-reset-base-margin-zero);
padding: var(--artdeco-reset-base-padding-zero);
border: var(--artdeco-reset-base-border-zero);
font-size: var(--artdeco-reset-base-font-size-hundred-percent);
vertical-align: var(--artdeco-reset-base-vertical-align-baseline);
background: var(--artdeco-reset-base-background-transparent);
}
*, :after, :before {
box-sizing: inherit;
}
html[Attributes Style] {
-webkit-locale: "de";
}
user agent stylesheet
:root {
view-transition-name: root;
}
user agent stylesheet
html {
display: block;
}
#ember-testing:before, html:before {
content: "";
display: block;
}
*, :after, :before {
box-sizing: inherit;
}
*, :after, :before {
box-sizing: inherit;
}

102
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">
@@ -203,6 +241,7 @@
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="space-y-6">
@@ -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,11 +582,30 @@ function refreshLinkedInPreview() {
}
linkedinMediaSection.classList.remove('hidden');
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' :
currentMediaItems.length === 2 ? 'grid-cols-2' : 'grid-cols-3';
// LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander
if (currentMediaItems.length === 3) {
linkedinMediaSection.innerHTML = `
<div class="grid ${gridClass} gap-1">
<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">`
@@ -550,6 +613,7 @@ function refreshLinkedInPreview() {
).join('')}
</div>
`;
}
}
// Drag-and-Drop Reorder (Ultra Smooth with Ghost)

192
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,11 +1703,29 @@ function refreshLinkedInPreview() {
linkedinMediaSection.classList.remove('hidden');
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' :
currentMediaItems.length === 2 ? 'grid-cols-2' : 'grid-cols-3';
// LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander
if (currentMediaItems.length === 3) {
linkedinMediaSection.innerHTML = `
<div class="grid ${gridClass} gap-1">
<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">`
@@ -1612,6 +1733,7 @@ function refreshLinkedInPreview() {
).join('')}
</div>
`;
}
}
// Drag-and-Drop Reorder (Ultra Smooth with Ghost)