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;
}

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

@@ -10,7 +10,11 @@
.linkedin-preview { .linkedin-preview {
background: #ffffff; background: #ffffff;
border-radius: 8px; 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); color: rgba(0, 0, 0, 0.9);
overflow: hidden; overflow: hidden;
} }
@@ -37,11 +41,12 @@
.linkedin-name { font-weight: 600; font-size: 14px; color: rgba(0, 0, 0, 0.9); } .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-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-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-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-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 { 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 svg { width: 20px; height: 20px; } .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; } .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 { 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); } .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; } .preview-mode-btn:hover:not(.active) { color: #d1d5db; }
/* Desktop View */ /* Desktop View */
.linkedin-preview.desktop-view { max-width: 100%; margin: 0; } .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 */ /* 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 { 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; }
.linkedin-preview.mobile-view::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: #2a2a2a; border-radius: 2px; } /* iPhone Notch - bleibt fix beim Scrollen */
.linkedin-preview.mobile-view .linkedin-header { padding: 16px; } .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-avatar { width: 40px; height: 40px; font-size: 16px; }
.linkedin-preview.mobile-view .linkedin-name { font-size: 13px; } .linkedin-preview.mobile-view .linkedin-name { font-size: 13px; }
.linkedin-preview.mobile-view .linkedin-headline { font-size: 11px; } .linkedin-preview.mobile-view .linkedin-headline { font-size: 11px; }
.linkedin-preview.mobile-view .linkedin-timestamp { 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-content { padding: 0 12px 12px; font-size: 14px; line-height: 1.4; }
.linkedin-preview.mobile-view .linkedin-engagement { padding: 12px 16px; font-size: 11px; } .linkedin-preview.mobile-view .linkedin-engagement { padding: 12px 12px; 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 { font-size: 0; padding: 14px 8px; gap: 0; }
.linkedin-preview.mobile-view .linkedin-action-btn svg { width: 18px; height: 18px; } .linkedin-preview.mobile-view .linkedin-action-btn svg { width: 22px; height: 22px; margin: 0; }
</style> </style>
{% endblock %} {% 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> <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 LinkedIn Vorschau
</div> </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"> <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> <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 Desktop
@@ -140,7 +155,8 @@
</button> </button>
</div> </div>
</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-header">
<div class="linkedin-avatar">{{ employee_name[:2] | upper if employee_name else 'UN' }}</div> <div class="linkedin-avatar">{{ employee_name[:2] | upper if employee_name else 'UN' }}</div>
<div class="linkedin-user-info"> <div class="linkedin-user-info">
@@ -160,7 +176,28 @@
<!-- LinkedIn Media Display --> <!-- 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 %}"> <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 %} {% 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 %} {% for item in post.media_items %}
{% if item.type == 'image' %} {% if item.type == 'image' %}
<img src="{{ item.url }}" alt="Post media" class="w-full h-48 object-cover"> <img src="{{ item.url }}" alt="Post media" class="w-full h-48 object-cover">
@@ -169,6 +206,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
{% endif %}
{% elif post.image_url %} {% elif post.image_url %}
<!-- Backward compatibility: single image --> <!-- Backward compatibility: single image -->
<img src="{{ post.image_url }}" alt="Post image" class="linkedin-post-image"> <img src="{{ post.image_url }}" alt="Post image" class="linkedin-post-image">
@@ -192,7 +230,7 @@
Kommentieren Kommentieren
</button> </button>
<button class="linkedin-action-btn"> <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 Reposten
</button> </button>
<button class="linkedin-action-btn"> <button class="linkedin-action-btn">
@@ -201,6 +239,7 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
@@ -322,18 +361,23 @@ function copyToClipboard() {
// Preview Mode Toggle (Desktop/Mobile) // Preview Mode Toggle (Desktop/Mobile)
function setPreviewMode(mode) { 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 desktopBtn = document.getElementById('desktopPreviewBtn');
const mobileBtn = document.getElementById('mobilePreviewBtn'); const mobileBtn = document.getElementById('mobilePreviewBtn');
if (mode === 'desktop') { if (mode === 'desktop') {
preview.classList.remove('mobile-view'); preview.classList.remove('mobile-view');
preview.classList.add('desktop-view'); preview.classList.add('desktop-view');
container.classList.add('desktop-view-container');
container.classList.remove('mobile-view-container');
desktopBtn.classList.add('active'); desktopBtn.classList.add('active');
mobileBtn.classList.remove('active'); mobileBtn.classList.remove('active');
} else if (mode === 'mobile') { } else if (mode === 'mobile') {
preview.classList.remove('desktop-view'); preview.classList.remove('desktop-view');
preview.classList.add('mobile-view'); preview.classList.add('mobile-view');
container.classList.remove('desktop-view-container');
container.classList.add('mobile-view-container');
mobileBtn.classList.add('active'); mobileBtn.classList.add('active');
desktopBtn.classList.remove('active'); desktopBtn.classList.remove('active');
} }
@@ -538,18 +582,38 @@ function refreshLinkedInPreview() {
} }
linkedinMediaSection.classList.remove('hidden'); linkedinMediaSection.classList.remove('hidden');
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' :
currentMediaItems.length === 2 ? 'grid-cols-2' : 'grid-cols-3';
linkedinMediaSection.innerHTML = ` // LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander
<div class="grid ${gridClass} gap-1"> if (currentMediaItems.length === 3) {
${currentMediaItems.map(item => linkedinMediaSection.innerHTML = `
item.type === 'image' <div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2px;">
? `<img src="${item.url}" class="w-full h-48 object-cover">` ${currentMediaItems[0].type === 'image'
: `<video src="${item.url}" class="w-full h-48 object-cover" controls></video>` ? `<img src="${currentMediaItems[0].url}" class="w-full h-64 object-cover" style="grid-column: 1 / -1;">`
).join('')} : `<video src="${currentMediaItems[0].url}" class="w-full h-64 object-cover" controls style="grid-column: 1 / -1;"></video>`
</div> }
`; ${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) // Drag-and-Drop Reorder (Ultra Smooth with Ghost)

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

@@ -56,7 +56,11 @@
.linkedin-preview { .linkedin-preview {
background: #ffffff; background: #ffffff;
border-radius: 8px; 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); color: rgba(0, 0, 0, 0.9);
overflow: hidden; overflow: hidden;
} }
@@ -114,9 +118,9 @@
margin-top: 2px; margin-top: 2px;
} }
.linkedin-content { .linkedin-content {
padding: 0 16px 12px; padding: 0 16px 8px;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.4;
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9);
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
@@ -164,25 +168,33 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; gap: 4px;
padding: 12px 8px; padding: 0 16px;
height: 40px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
background: transparent; background: transparent;
border: none; border: none;
cursor: default; 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 { .linkedin-action-btn svg {
width: 20px; width: 16px;
height: 20px; height: 16px;
} }
.linkedin-more-btn { .linkedin-more-btn {
padding: 4px; padding: 4px;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
border-radius: 50%; border-radius: 50%;
cursor: default; cursor: default;
display: flex;
align-items: center;
justify-content: center;
} }
.view-toggle { .view-toggle {
display: inline-flex; display: inline-flex;
@@ -229,28 +241,80 @@
max-width: 100%; max-width: 100%;
margin: 0; 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 */ /* Mobile View - smartphone mockup */
.linkedin-preview.mobile-view { .linkedin-preview.mobile-view {
max-width: 375px; max-width: 375px;
height: 750px; /* iPhone-Höhe */
margin: 0 auto; margin: 0 auto;
border: 12px solid #1f1f1f; border: 14px solid #1f1f1f;
border-radius: 36px; border-radius: 42px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
position: relative; position: relative;
overflow-y: auto; /* Scrollbar aktiviert */
overflow-x: hidden;
display: block;
} }
/* iPhone Notch - bleibt fix beim Scrollen */
.linkedin-preview.mobile-view::before { .linkedin-preview.mobile-view::before {
content: ''; content: '';
position: absolute; position: sticky;
top: -8px; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 60px; width: 170px;
height: 4px; height: 28px;
background: #2a2a2a; 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; border-radius: 2px;
} }
.linkedin-preview.mobile-view .linkedin-header { .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 { .linkedin-preview.mobile-view .linkedin-avatar {
width: 40px; width: 40px;
@@ -267,8 +331,8 @@
font-size: 11px; font-size: 11px;
} }
.linkedin-preview.mobile-view .linkedin-content { .linkedin-preview.mobile-view .linkedin-content {
padding: 0 16px 16px; padding: 0 12px 12px;
font-size: 13px; font-size: 14px;
line-height: 1.4; line-height: 1.4;
} }
.linkedin-preview.mobile-view .linkedin-see-more { .linkedin-preview.mobile-view .linkedin-see-more {
@@ -280,13 +344,14 @@
font-size: 11px; font-size: 11px;
} }
.linkedin-preview.mobile-view .linkedin-action-btn { .linkedin-preview.mobile-view .linkedin-action-btn {
font-size: 13px; font-size: 0; /* Hide text labels on mobile */
padding: 14px 8px; padding: 14px 8px;
gap: 4px; gap: 0;
} }
.linkedin-preview.mobile-view .linkedin-action-btn svg { .linkedin-preview.mobile-view .linkedin-action-btn svg {
width: 18px; width: 22px;
height: 18px; height: 22px;
margin: 0;
} }
.view-toggle-btn:hover:not(.active) { .view-toggle-btn:hover:not(.active) {
color: #e5e7eb; color: #e5e7eb;
@@ -505,12 +570,12 @@
</div> </div>
<!-- LinkedIn Preview View --> <!-- 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"> <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> <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 LinkedIn Vorschau
</div> </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"> <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> <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 Desktop
@@ -521,7 +586,8 @@
</button> </button>
</div> </div>
</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-header">
<div class="linkedin-avatar"> <div class="linkedin-avatar">
{% if profile_picture_url %} {% if profile_picture_url %}
@@ -543,7 +609,9 @@
</div> </div>
<div class="linkedin-more-btn"> <div class="linkedin-more-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <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> </svg>
</div> </div>
</div> </div>
@@ -553,7 +621,28 @@
<!-- LinkedIn Media Display --> <!-- 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 %}"> <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 %} {% 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 %} {% for item in post.media_items %}
{% if item.type == 'image' %} {% if item.type == 'image' %}
<img src="{{ item.url }}" alt="Post media" class="w-full h-48 object-cover"> <img src="{{ item.url }}" alt="Post media" class="w-full h-48 object-cover">
@@ -562,6 +651,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
{% endif %}
{% elif post.image_url %} {% elif post.image_url %}
<!-- Backward compatibility: single image --> <!-- Backward compatibility: single image -->
<img src="{{ post.image_url }}" alt="Post image" class="linkedin-post-image"> <img src="{{ post.image_url }}" alt="Post image" class="linkedin-post-image">
@@ -592,7 +682,7 @@
</button> </button>
<button class="linkedin-action-btn"> <button class="linkedin-action-btn">
<svg viewBox="0 0 24 24" fill="currentColor"> <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> </svg>
Reposten Reposten
</button> </button>
@@ -604,6 +694,7 @@
</button> </button>
</div> </div>
</div> </div>
</div>
<!-- Raw View --> <!-- Raw View -->
<div id="rawView" class="bg-brand-bg/50 rounded-lg p-5 hidden"> <div id="rawView" class="bg-brand-bg/50 rounded-lg p-5 hidden">
@@ -973,16 +1064,17 @@ function addNewVersion(content) {
// View Toggle functions // View Toggle functions
function setView(view) { function setView(view) {
currentView = view; currentView = view;
const previewEl = document.getElementById('linkedinPreview'); const previewContainer = document.getElementById('linkedinPreviewContainer');
const rawEl = document.getElementById('rawView'); const rawEl = document.getElementById('rawView');
const editEl = document.getElementById('editView'); const editEl = document.getElementById('editView');
const seeMoreBtn = document.getElementById('seeMoreBtn'); const seeMoreBtn = document.getElementById('seeMoreBtn');
const previewToggle = document.getElementById('previewToggle'); const previewToggle = document.getElementById('previewToggle');
const rawToggle = document.getElementById('rawToggle'); const rawToggle = document.getElementById('rawToggle');
const editToggle = document.getElementById('editToggle'); const editToggle = document.getElementById('editToggle');
const previewModeContainer = document.getElementById('previewModeContainer');
// Hide all views // Hide all views
previewEl.classList.add('hidden'); previewContainer.classList.add('hidden');
rawEl.classList.add('hidden'); rawEl.classList.add('hidden');
editEl.classList.add('hidden'); editEl.classList.add('hidden');
if (seeMoreBtn) seeMoreBtn.classList.add('hidden'); if (seeMoreBtn) seeMoreBtn.classList.add('hidden');
@@ -993,15 +1085,21 @@ function setView(view) {
editToggle.classList.remove('active'); editToggle.classList.remove('active');
if (view === 'preview') { if (view === 'preview') {
previewEl.classList.remove('hidden'); previewContainer.classList.remove('hidden');
if (seeMoreBtn) seeMoreBtn.classList.remove('hidden'); if (seeMoreBtn) seeMoreBtn.classList.remove('hidden');
previewToggle.classList.add('active'); previewToggle.classList.add('active');
// Show preview mode container only in preview view
if (previewModeContainer) previewModeContainer.classList.remove('hidden');
} else if (view === 'raw') { } else if (view === 'raw') {
rawEl.classList.remove('hidden'); rawEl.classList.remove('hidden');
rawToggle.classList.add('active'); rawToggle.classList.add('active');
// Hide preview mode container
if (previewModeContainer) previewModeContainer.classList.add('hidden');
} else if (view === 'edit') { } else if (view === 'edit') {
editEl.classList.remove('hidden'); editEl.classList.remove('hidden');
editToggle.classList.add('active'); editToggle.classList.add('active');
// Hide preview mode container
if (previewModeContainer) previewModeContainer.classList.add('hidden');
// Reset textarea to current content // Reset textarea to current content
const currentContent = document.getElementById('finalPostContent').textContent; const currentContent = document.getElementById('finalPostContent').textContent;
document.getElementById('editTextarea').value = currentContent; document.getElementById('editTextarea').value = currentContent;
@@ -1012,17 +1110,22 @@ function setView(view) {
// Preview Mode Toggle (Desktop/Mobile) // Preview Mode Toggle (Desktop/Mobile)
function setPreviewMode(mode) { function setPreviewMode(mode) {
const preview = document.getElementById('linkedinPreview'); const preview = document.getElementById('linkedinPreview');
const container = document.getElementById('linkedinPreviewContainer');
const desktopBtn = document.getElementById('desktopPreviewBtn'); const desktopBtn = document.getElementById('desktopPreviewBtn');
const mobileBtn = document.getElementById('mobilePreviewBtn'); const mobileBtn = document.getElementById('mobilePreviewBtn');
if (mode === 'desktop') { if (mode === 'desktop') {
preview.classList.remove('mobile-view'); preview.classList.remove('mobile-view');
preview.classList.add('desktop-view'); preview.classList.add('desktop-view');
container.classList.add('desktop-view-container');
container.classList.remove('mobile-view-container');
desktopBtn.classList.add('active'); desktopBtn.classList.add('active');
mobileBtn.classList.remove('active'); mobileBtn.classList.remove('active');
} else if (mode === 'mobile') { } else if (mode === 'mobile') {
preview.classList.remove('desktop-view'); preview.classList.remove('desktop-view');
preview.classList.add('mobile-view'); preview.classList.add('mobile-view');
container.classList.remove('desktop-view-container');
container.classList.add('mobile-view-container');
mobileBtn.classList.add('active'); mobileBtn.classList.add('active');
desktopBtn.classList.remove('active'); desktopBtn.classList.remove('active');
} }
@@ -1600,18 +1703,37 @@ function refreshLinkedInPreview() {
linkedinMediaSection.classList.remove('hidden'); linkedinMediaSection.classList.remove('hidden');
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' : // LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander
currentMediaItems.length === 2 ? 'grid-cols-2' : 'grid-cols-3'; if (currentMediaItems.length === 3) {
linkedinMediaSection.innerHTML = `
linkedinMediaSection.innerHTML = ` <div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2px;">
<div class="grid ${gridClass} gap-1"> ${currentMediaItems[0].type === 'image'
${currentMediaItems.map(item => ? `<img src="${currentMediaItems[0].url}" class="w-full h-64 object-cover" style="grid-column: 1 / -1;">`
item.type === 'image' : `<video src="${currentMediaItems[0].url}" class="w-full h-64 object-cover" controls style="grid-column: 1 / -1;"></video>`
? `<img src="${item.url}" class="w-full h-48 object-cover">` }
: `<video src="${item.url}" class="w-full h-48 object-cover" controls></video>` ${currentMediaItems[1].type === 'image'
).join('')} ? `<img src="${currentMediaItems[1].url}" class="w-full h-48 object-cover">`
</div> : `<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) // Drag-and-Drop Reorder (Ultra Smooth with Ghost)