Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Multiple products desktop UI

Browse source 
Lots of refinement for the desktop multiple products Portal signup and signin page. Alpha version.
This commit is contained in:
Peter Zimon 2021-06-11 14:56:44 +02:00
parent bf62b981bd
commit f94435dab5
5 changed files with 59 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ghost/portal/src/components/Frame.styles.js
View file

@ -235,6 +235,11 @@ const FrameStyles = `
}
.gh-portal-popup-wrapper.fullscreen {
position: absolute;
background: #fff;
height: 100vh !important;
width: 100% !important;
overflow-y: scroll;
padding: 0;
}
@ -259,14 +264,24 @@ const FrameStyles = `
z-index: 9999;
}
.gh-portal-popup-container.fullscreen {
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container:not(.preview) {
position: unset;
align-items: center;
width: 100% !important;
height: 100% !important;
border-radius: 0px;
padding-top: 3vmin;
box-shadow: none !important;
border-radius: 0px;
animation: fadein 0.35s ease-in-out;
}
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container.preview {
align-items: center;
justify-content: center;
width: 100% !important;
min-height: 100%;
overflow-y: scroll;
padding-bottom: 6vmin;
padding: 3vmin 0;
border-radius: 0px;
}
@keyframes popup {
@ -319,7 +334,14 @@ const FrameStyles = `
}
.gh-portal-popup-wrapper.fullscreen .gh-portal-powered {
position: relative;
display: flex;
justify-content: center;
bottom: unset;
left: unset;
width: 100%;
z-index: 10000;
padding-bottom: 32px;
}
.gh-portal-container-wide {
@ -369,7 +391,8 @@ const FrameStyles = `
scrollbar-width: none; /* Firefox */
}
.gh-portal-popup-container.fullscreen .gh-portal-content {
.gh-portal-popup-wrapper.fullscreen .gh-portal-content {
position: unset;
overflow-y: visible;
max-height: unset !important;
}
@ -386,6 +409,10 @@ const FrameStyles = `
z-index: 999;
}
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon-container {
position: fixed;
}
.gh-portal-closeicon {
color: var(--grey9);
cursor: pointer;
@ -395,7 +422,7 @@ const FrameStyles = `
transition: all 0.2s ease-in-out;
}
.gh-portal-popup-container.fullscreen .gh-portal-closeicon {
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon {
width: 24px;
height: 24px;
}
@ -705,7 +732,7 @@ const MobileStyles = `
box-shadow: none;
}
.gh-portal-popup-container.fullscreen {
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container {
padding: 0;
}
}

1
ghost/portal/src/components/Global.styles.js
View file

@ -40,6 +40,7 @@ export const GlobalStyles = `
font-style: normal;
color: var(--grey4);
box-sizing: border-box;
overflow: hidden;
}
button,

6
ghost/portal/src/components/PopupModal.js
View file

@ -169,7 +169,11 @@ class PopupContent extends React.Component {
if (hasMultipleProducts({site}) && (page === 'signup' || page === 'signin')) {
pageClass += ' fullscreen';
}
if (hasMode(['preview'])) {
pageClass += ' preview';
}
const className = (hasMode(['preview', 'dev'], {customSiteUrl}) && !site.disableBackground) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container';
const containerClassName = `${className} ${popupWidthStyle} ${pageClass}`;
return (

9
ghost/portal/src/components/common/ProductsSection.js
View file

@ -104,7 +104,7 @@ export const ProductsSectionStyles = `
.gh-portal-product-name {
font-size: 1.2rem;
font-weight: 500;
line-height: 1.0em;
line-height: 1.45em;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: 7px;
@ -296,9 +296,10 @@ function ProductCardFooter({product}) {
function ProductCard({product}) {
const {selectedProduct, setSelectedProduct} = useContext(ProductsContext);
const cardClass = selectedProduct === product.id ? 'gh-portal-product-card checked' : 'gh-portal-product-card';
return (
<div className="gh-portal-product-card" key={product.id} onClick={(e) => {
<div className={cardClass} key={product.id} onClick={(e) => {
e.stopPropagation();
setSelectedProduct(product.id);
}}>
@ -324,8 +325,10 @@ function ProductCards({products}) {
function FreeProductCard() {
const {selectedProduct, setSelectedProduct} = useContext(ProductsContext);
const cardClass = selectedProduct === 'free' ? 'gh-portal-product-card checked' : 'gh-portal-product-card';
return (
<div className="gh-portal-product-card" onClick={(e) => {
<div className={cardClass} onClick={(e) => {
e.stopPropagation();
setSelectedProduct('free');
}}>

25
ghost/portal/src/components/pages/SignupPage.js
View file

@ -35,6 +35,10 @@ export const SignupPageStyles = `
margin-top: 12px;
}
.gh-portal-popup-wrapper.fullscreen .gh-portal-signin-header {
padding-top: 18vmin;
}
.gh-portal-signup-logo + .gh-portal-main-title {
margin: 4px 0 0;
}
@ -52,12 +56,8 @@ export const SignupPageStyles = `
margin-bottom: 0;
}
.gh-portal-popup-container.fullscreen .gh-portal-signup-header {
margin-top: 6vmin;
}
.gh-portal-popup-container.fullscreen .gh-portal-signin-header {
margin-top: 22vmin;
.gh-portal-popup-wrapper.signin.fullscreen .gh-portal-popup-container {
padding-bottom: 3vmin;
}
.gh-portal-signup-message {
@ -92,12 +92,12 @@ export const SignupPageStyles = `
background-attachment: local,local,scroll,scroll;
}
.gh-portal-popup-container.fullscreen .gh-portal-content.signup,
.gh-portal-popup-container.fullscreen .gh-portal-content.signin {
.gh-portal-popup-wrapper.fullscreen .gh-portal-content.signup,
.gh-portal-popup-wrapper.fullscreen .gh-portal-content.signin {
width: 100%;
}
.gh-portal-popup-container.fullscreen .gh-portal-input-section {
.gh-portal-popup-wrapper.fullscreen .gh-portal-input-section {
max-width: 420px;
margin: 0 auto;
}
@ -112,14 +112,15 @@ export const SignupPageStyles = `
height: 132px;
}
.gh-portal-popup-container.fullscreen footer.gh-portal-signup-footer,
.gh-portal-popup-container.fullscreen footer.gh-portal-signin-footer {
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signup-footer,
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer {
padding: 0;
width: 100%;
max-width: 420px;
height: 120px;
}
.gh-portal-popup-container.fullscreen footer.gh-portal-signin-footer {
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer {
padding-top: 24px;
}