TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-20 17:32:15 +03:00
Code Issues Projects Releases Wiki Activity

Multiple products responsive UI

Browse Source
This commit is contained in:
Peter Zimon 2021-06-11 16:03:35 +02:00
parent f94435dab5
commit 45147cacb2
3 changed files with 74 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -235,12 +235,35 @@ const FrameStyles = `
} }
.gh-portal-popup-wrapper.fullscreen { .gh-portal-popup-wrapper.fullscreen {
position: absolute; margin: 32px;
background: #fff; height: calc(100vh - 64px) !important;
height: 100vh !important;
width: 100% !important;
overflow-y: scroll; overflow-y: scroll;
background: #fff;
box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1);
padding: 0; padding: 0;
border-radius: 5px;
}
@media (max-width: 960px) {
.gh-portal-popup-wrapper.fullscreen {
margin: 20px;
height: calc(100vh - 40px) !important;
}
}
@media (max-width: 480px) {
.gh-portal-popup-wrapper.fullscreen {
margin: 0;
height: 100vh !important;
border-radius: 0px;
box-shadow: none;
}
}
@media (min-width: 480px) {
.gh-portal-popup-wrapper.fullscreen.preview {
height: calc(100vh - 150px) !important;
}
} }
.gh-portal-popup-container { .gh-portal-popup-container {
@ -264,24 +287,20 @@ const FrameStyles = `
z-index: 9999; z-index: 9999;
} }
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container:not(.preview) { .gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container {
position: unset; position: unset;
align-items: center; align-items: center;
width: 100% !important; width: 100% !important;
padding-top: 3vmin;
box-shadow: none !important; box-shadow: none !important;
border-radius: 0px; border-radius: 0px;
animation: fadein 0.35s ease-in-out; animation: fadein 0.35s ease-in-out;
padding: 3vmin 0;
} }
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container.preview { @media (max-width: 480px) {
align-items: center; .gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container.preview {
justify-content: center; max-height: 620px;
width: 100% !important; }
min-height: 100%;
overflow-y: scroll;
padding: 3vmin 0;
border-radius: 0px;
} }
@keyframes popup { @keyframes popup {
@ -344,6 +363,11 @@ const FrameStyles = `
padding-bottom: 32px; padding-bottom: 32px;
} }
.gh-portal-popup-wrapper.fullscreen.signin .gh-portal-powered {
position: absolute;
bottom: 0;
}
.gh-portal-container-wide { .gh-portal-container-wide {
width: 440px; width: 440px;
} }
@ -409,8 +433,17 @@ const FrameStyles = `
z-index: 999; z-index: 999;
} }
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon-container { @media (min-width: 480px) {
position: fixed; .gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon {
width: 24px;
height: 24px;
}
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon-container {
top: 48px;
right: 48px;
position: fixed;
}
} }
.gh-portal-closeicon { .gh-portal-closeicon {
@ -422,11 +455,6 @@ const FrameStyles = `
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon {
width: 24px;
height: 24px;
}
.gh-portal-closeicon:hover { .gh-portal-closeicon:hover {
color: var(--grey5); color: var(--grey5);
} }
@ -693,11 +721,20 @@ const MobileStyles = `
height: unset; height: unset;
} }
.gh-portal-popup-wrapper {
overflow-y: unset;
}
.gh-portal-content { .gh-portal-content {
position: relative !important;
overflow-y: auto !important; overflow-y: auto !important;
max-height: unset !important; max-height: unset !important;
} }
.gh-portal-popup-wrapper.fullscreen:not(.preview) .gh-portal-content {
max-height: calc(100vh - 190px) !important;
}
.gh-portal-powered { .gh-portal-powered {
position: relative; position: relative;
bottom: unset; bottom: unset;
@ -735,6 +772,10 @@ const MobileStyles = `
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container { .gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container {
padding: 0; padding: 0;
} }
.gh-portal-popup-wrapper.fullscreen .gh-portal-powered {
padding-bottom: 0;
}
} }
@media (max-width: 414px) { @media (max-width: 414px) {

10
ghost/portal/src/components/common/ProductsSection.js
View File

@ -177,7 +177,7 @@ export const ProductsSectionStyles = `
grid-gap: 12px; grid-gap: 12px;
align-items: start; align-items: start;
min-height: unset; min-height: unset;
padding: 20px; padding: 12px 20px;
} }
.gh-portal-product-card-header { .gh-portal-product-card-header {
@ -187,7 +187,7 @@ export const ProductsSectionStyles = `
} }
.gh-portal-product-name { .gh-portal-product-name {
margin: 0; margin: 4px 0;
padding: 0; padding: 0;
text-align: left; text-align: left;
border-bottom: none; border-bottom: none;
@ -223,12 +223,6 @@ export const ProductsSectionStyles = `
grid-row: 1; grid-row: 1;
} }
.gh-portal-popup-container.fullscreen footer.gh-portal-signup-footer,
.gh-portal-popup-container.fullscreen footer.gh-portal-signin-footer {
padding: 0 32px !important;
margin-top: 32px;
}
.gh-portal-product-alternative-price { .gh-portal-product-alternative-price {
display: none; display: none;
} }

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

@ -114,10 +114,18 @@ export const SignupPageStyles = `
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signup-footer, .gh-portal-popup-wrapper.fullscreen footer.gh-portal-signup-footer,
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer { .gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer {
padding: 0;
width: 100%; width: 100%;
max-width: 420px; max-width: 420px;
height: 120px; height: unset;
padding: 0 !important;
margin: 24px 32px 32px;
}
@media (max-width: 480px) {
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signup-footer,
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer {
padding: 0 24px !important;
}
} }
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer { .gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer {