mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-04 02:01:58 -05:00
Fixed articles getting cut off in the drawer (#21447)
ref https://linear.app/ghost/issue/AP-542/articles-are-cut-off-when-viewed-in-sidebar - We now wait for the content of the iframe to load completely before determining the height needed to display it
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
e6df621436
commit
cc8a36cc12
3 changed files with 74 additions and 38 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@tryghost/admin-x-activitypub",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ a:hover {
|
|||
line-height: 1;
|
||||
color: var(--color-white);
|
||||
cursor: pointer;
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
border: 0;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
|
@ -533,7 +533,7 @@ button.gh-form-input {
|
|||
}
|
||||
|
||||
.gh-navigation.has-accent-color .gh-navigation-actions {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.gh-navigation-members {
|
||||
|
|
@ -582,7 +582,7 @@ button.gh-form-input {
|
|||
/* 6.1. Navigation styles */
|
||||
|
||||
.gh-navigation.has-accent-color {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.gh-navigation.has-accent-color .gh-button {
|
||||
|
|
@ -2017,21 +2017,23 @@ Search LOGO Login Subscribe
|
|||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ghost-accent-color);
|
||||
color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.gh-article-title {
|
||||
font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1));
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.022em;
|
||||
font-size: 2.9rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.87px;
|
||||
font-weight: 600;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.gh-article-excerpt {
|
||||
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
|
||||
max-width: 720px;
|
||||
font-size: clamp(1.5rem, 0.45vw + 1.32rem, 1.9rem);
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.018em;
|
||||
margin-top: 16px;
|
||||
font-size: 2.1rem;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.63px;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.gh-article-meta {
|
||||
|
|
@ -2200,7 +2202,7 @@ unless a heading is the very first element in the post content */
|
|||
}
|
||||
|
||||
.gh-content a {
|
||||
color: var(--ghost-accent-color);
|
||||
color: rgb(29 78 216);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -2386,7 +2388,7 @@ unless a heading is the very first element in the post content */
|
|||
|
||||
blockquote:not([class]) {
|
||||
padding-left: 2rem;
|
||||
border-left: 4px solid var(--ghost-accent-color);
|
||||
border-left: 4px solid rgb(29 78 216);
|
||||
}
|
||||
|
||||
blockquote.kg-blockquote-alt {
|
||||
|
|
@ -2506,7 +2508,7 @@ figcaption {
|
|||
}
|
||||
|
||||
figcaption a {
|
||||
color: var(--ghost-accent-color);
|
||||
color: rgb(29 78 216);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -2592,7 +2594,7 @@ figcaption a {
|
|||
}
|
||||
|
||||
.author-template .gh-article-title {
|
||||
font-size: 3.6rem;
|
||||
font-size: 2.9rem;
|
||||
}
|
||||
|
||||
.gh-author-meta {
|
||||
|
|
@ -2785,7 +2787,7 @@ figcaption a {
|
|||
/* 21.1 Footer styles */
|
||||
|
||||
.gh-footer.has-accent-color {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.gh-footer.has-accent-color .gh-footer-bar {
|
||||
|
|
@ -3420,7 +3422,7 @@ figcaption a {
|
|||
}
|
||||
|
||||
.kg-callout-card-accent {
|
||||
background: var(--ghost-accent-color);
|
||||
background: rgb(29 78 216);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -3476,7 +3478,7 @@ figcaption a {
|
|||
}
|
||||
|
||||
.kg-audio-thumbnail.placeholder {
|
||||
background: var(--ghost-accent-color);
|
||||
background: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.kg-audio-thumbnail.placeholder svg {
|
||||
|
|
@ -3950,7 +3952,7 @@ figcaption a {
|
|||
}
|
||||
|
||||
.kg-button-card a.kg-btn-accent {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -4280,7 +4282,7 @@ p.kg-collection-card-post-excerpt {
|
|||
.kg-file-card-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--ghost-accent-color);
|
||||
color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
/* Size variations */
|
||||
|
|
@ -4403,7 +4405,7 @@ p.kg-collection-card-post-excerpt {
|
|||
}
|
||||
|
||||
.kg-header-card.kg-style-accent {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.kg-header-card.kg-style-image {
|
||||
|
|
@ -4486,7 +4488,7 @@ p.kg-collection-card-post-excerpt {
|
|||
|
||||
.kg-header-card h2.kg-header-card-header a,
|
||||
.kg-header-card h3.kg-header-card-subheader a {
|
||||
color: var(--ghost-accent-color);
|
||||
color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.kg-header-card.kg-style-accent h2.kg-header-card-header a,
|
||||
|
|
@ -4555,7 +4557,7 @@ p.kg-collection-card-post-excerpt {
|
|||
}
|
||||
|
||||
.kg-header-card.kg-style-light a.kg-header-card-button {
|
||||
background: var(--ghost-accent-color);
|
||||
background: rgb(29 78 216);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -4821,7 +4823,7 @@ p.kg-collection-card-post-excerpt {
|
|||
}
|
||||
|
||||
.kg-product-card a.kg-product-card-btn-accent {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -4840,7 +4842,7 @@ p.kg-collection-card-post-excerpt {
|
|||
}
|
||||
|
||||
.kg-signup-card.kg-style-accent {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.kg-layout-split .kg-signup-card-content {
|
||||
|
|
@ -5067,7 +5069,7 @@ p.kg-collection-card-post-excerpt {
|
|||
}
|
||||
|
||||
.kg-signup-card-button.kg-style-accent {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.kg-signup-card h2 + .kg-signup-card-button,
|
||||
|
|
@ -5659,7 +5661,7 @@ p.kg-collection-card-post-excerpt {
|
|||
}
|
||||
|
||||
.kg-header-card.kg-style-accent.kg-v2 {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.kg-header-card-content {
|
||||
|
|
@ -5830,7 +5832,7 @@ p.kg-collection-card-post-excerpt {
|
|||
}
|
||||
|
||||
.kg-header-card.kg-v2 .kg-header-card-button.kg-style-accent {
|
||||
background-color: var(--ghost-accent-color);
|
||||
background-color: rgb(29 78 216);
|
||||
}
|
||||
|
||||
.kg-header-card.kg-v2 h2 + .kg-header-card-button,
|
||||
|
|
|
|||
|
|
@ -38,10 +38,49 @@ const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt:
|
|||
}
|
||||
</style>
|
||||
<script>
|
||||
let isFullyLoaded = false;
|
||||
|
||||
function resizeIframe() {
|
||||
const height = document.body.scrollHeight;
|
||||
window.parent.postMessage({type: 'resize', height: height}, '*');
|
||||
const finalHeight = Math.max(
|
||||
document.body.scrollHeight,
|
||||
document.body.offsetHeight,
|
||||
document.documentElement.scrollHeight
|
||||
);
|
||||
window.parent.postMessage({
|
||||
type: 'resize',
|
||||
height: finalHeight,
|
||||
isLoaded: isFullyLoaded
|
||||
}, '*');
|
||||
}
|
||||
|
||||
function waitForImages() {
|
||||
const images = document.getElementsByTagName('img');
|
||||
const imagePromises = Array.from(images).map(img => {
|
||||
if (img.complete) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
img.onload = resolve;
|
||||
img.onerror = resolve;
|
||||
});
|
||||
});
|
||||
return Promise.all(imagePromises);
|
||||
}
|
||||
|
||||
function initializeResize() {
|
||||
document.body.style.opacity = '0.5';
|
||||
document.body.style.transition = 'opacity 0.3s ease';
|
||||
|
||||
resizeIframe();
|
||||
|
||||
waitForImages().then(() => {
|
||||
isFullyLoaded = true;
|
||||
document.body.style.opacity = '1';
|
||||
resizeIframe();
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', initializeResize);
|
||||
window.addEventListener('load', resizeIframe);
|
||||
window.addEventListener('resize', resizeIframe);
|
||||
new MutationObserver(resizeIframe).observe(document.body, { subtree: true, childList: true });
|
||||
|
|
@ -87,7 +126,7 @@ const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt:
|
|||
}, [htmlContent]);
|
||||
|
||||
return (
|
||||
<div className="w-full border-b border-grey-200">
|
||||
<div className='w-full border-b border-grey-200 pb-10'>
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
id='gh-ap-article-iframe'
|
||||
|
|
@ -109,7 +148,6 @@ const FeedItemDivider: React.FC = () => (
|
|||
|
||||
const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, focusReply}) => {
|
||||
const MODAL_SIZE_SM = 640;
|
||||
// const MODAL_SIZE_LG = 2800;
|
||||
const [commentsState, setCommentsState] = useState(comments);
|
||||
const [isFocused, setFocused] = useState(focusReply ? 1 : 0);
|
||||
function setReplyBoxFocused(focused: boolean) {
|
||||
|
|
@ -154,9 +192,6 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, foc
|
|||
comments: nextComments
|
||||
});
|
||||
};
|
||||
// const toggleModalSize = () => {
|
||||
// setModalSize(modalSize === MODAL_SIZE_SM ? MODAL_SIZE_LG : MODAL_SIZE_SM);
|
||||
// };
|
||||
|
||||
function handleNewReply(activity: Activity) {
|
||||
setCommentsState(prev => [activity].concat(prev));
|
||||
|
|
@ -183,7 +218,6 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, foc
|
|||
<div className='col-[2/3] flex grow items-center justify-center px-8 text-center'>
|
||||
</div>
|
||||
<div className='col-[3/4] flex items-center justify-end space-x-6 px-8'>
|
||||
{/* <Button icon='angle-brackets' size='md' unstyled onClick={toggleModalSize}/> */}
|
||||
<Button icon='close' size='sm' unstyled onClick={() => modal.remove()}/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue