TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 14:03:48 +03:00
Code Issues Projects Releases Wiki Activity

Further responsive style improvements

Browse Source
This commit is contained in:
Peter Zimon 2021-10-15 15:13:10 +02:00
parent 940725d978
commit d1d0fa093f
3 changed files with 50 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ghost/portal/src/components/Frame.styles.js
View File

@ -232,8 +232,10 @@ const FrameStyles = `
.gh-portal-popup-wrapper {
position: relative;
padding: 10vmin 0 0;
padding: 10vmin 0;
height: 100%;
max-height: 100vh;
overflow: scroll;
}
.gh-portal-popup-container {
@ -783,7 +785,7 @@ const MobileStyles = `
}
}
@media (min-width: 480px) and (max-height: 880px) {
/*@media (min-width: 480px) and (max-height: 880px) {
.gh-portal-popup-wrapper {
padding-top: 4vmin;
}
@ -803,7 +805,7 @@ const MobileStyles = `
max-height: unset !important;
overflow: unset !important;
}
}
}*/
@keyframes popup-mobile {
0% {

16
ghost/portal/src/components/PopupModal.js
View File

@ -192,20 +192,22 @@ class PopupContent extends React.Component {
const containerClassName = `${className} ${popupWidthStyle} ${pageClass}`;
return (
<div className={'gh-portal-popup-wrapper ' + pageClass} onClick={e => this.handlePopupClose(e)}>
<div className={containerClassName} style={pageStyle} ref={node => (this.node = node)} tabIndex={-1}>
<CookieDisabledBanner message={cookieBannerText} />
{this.renderPopupNotification()}
{this.renderActivePage()}
<>
<div className={'gh-portal-popup-wrapper ' + pageClass} onClick={e => this.handlePopupClose(e)}>
<div className={containerClassName} style={pageStyle} ref={node => (this.node = node)} tabIndex={-1}>
<CookieDisabledBanner message={cookieBannerText} />
{this.renderPopupNotification()}
{this.renderActivePage()}
</div>
</div>
<div className={'gh-portal-powered' + (hasMode(['preview']) ? ' hidden' : '')}>
<div className={'gh-portal-powered outside ' + (hasMode(['preview']) ? ' hidden' : '') + pageClass}>
<a href='https://ghost.org' target='_blank' rel='noopener noreferrer' onClick={() => {
window.open('https://ghost.org', '_blank');
}}>
<img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" alt="Publish with Ghost" />
</a>
</div>
</div>
</>
);
}
}

44
ghost/portal/src/components/pages/SignupPage.js
View File

@ -90,9 +90,12 @@ export const SignupPageStyles = `
footer.gh-portal-signup-footer,
footer.gh-portal-signin-footer {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding-top: 24px;
height: 132px;
height: unset;
}
/* Needed to cover small horizontal line glitch by the scroll shadow */
@ -109,7 +112,7 @@ export const SignupPageStyles = `
.gh-portal-content.signup,
.gh-portal-content.signin {
max-height: calc(100vh - 12vw - 140px);
max-height: unset !important;
padding-bottom: 0;
}
@ -156,6 +159,13 @@ export const SignupPageStyles = `
margin-top: 0;
}
.gh-portal-popup-wrapper.multiple-products .gh-portal-powered {
display: flex;
margin-top: 24px;
margin-bottom: 0;
padding-bottom: 0;
}
.gh-portal-invite-only-notification {
margin: 8px 32px;
padding: 0;
@ -201,9 +211,8 @@ export const SignupPageStyles = `
padding-top: 24px;
}
.gh-portal-popup-wrapper.multiple-products.signin .gh-portal-powered {
position: absolute;
bottom: 0;
.gh-portal-powered.multiple-products {
display: none;
}
@media (max-width: 480px) {
@ -231,9 +240,20 @@ export const SignupPageStyles = `
}
}
@media (max-height: 880px) {
footer.gh-portal-signup-footer {
height: 126px;
@media (min-width: 480px) and (max-width: 820px) {
.gh-portal-powered.outside {
left: 50%;
transform: translateX(-50%);
}
.gh-portal-popup-wrapper.signup {
padding-bottom: 20vmin;
}
}
@media (min-width: 480px) {
.gh-portal-popup-wrapper:not(.multiple-products) .gh-portal-powered {
display: none;
}
}
`;
@ -566,6 +586,7 @@ class SignupPage extends React.Component {
sectionClass = 'singleplan';
}
}
return {sectionClass, footerClass};
}
@ -618,6 +639,13 @@ class SignupPage extends React.Component {
<footer className={'gh-portal-signup-footer ' + footerClass}>
{this.renderSubmitButton()}
{this.renderLoginMessage()}
<div className="gh-portal-powered inside">
<a href='https://ghost.org' target='_blank' rel='noopener noreferrer' onClick={() => {
window.open('https://ghost.org', '_blank');
}}>
<img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" alt="Publish with Ghost" />
</a>
</div>
</footer>
</>
);