OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages 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 {
position: absolute;
background: #fff;
height: 100vh !important;
width: 100% !important;
margin: 32px;
height: calc(100vh - 64px) !important;
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;
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 {
@ -264,24 +287,20 @@ const FrameStyles = `
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;
align-items: center;
width: 100% !important;
padding-top: 3vmin;
box-shadow: none !important;
border-radius: 0px;
animation: fadein 0.35s ease-in-out;
padding: 3vmin 0;
}
.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: 3vmin 0;
border-radius: 0px;
@media (max-width: 480px) {
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container.preview {
max-height: 620px;
}
}
@keyframes popup {
@ -344,6 +363,11 @@ const FrameStyles = `
padding-bottom: 32px;
}
.gh-portal-popup-wrapper.fullscreen.signin .gh-portal-powered {
position: absolute;
bottom: 0;
}
.gh-portal-container-wide {
width: 440px;
}
@ -409,8 +433,17 @@ const FrameStyles = `
z-index: 999;
}
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon-container {
position: fixed;
@media (min-width: 480px) {
.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 {
@ -422,11 +455,6 @@ const FrameStyles = `
transition: all 0.2s ease-in-out;
}
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon {
width: 24px;
height: 24px;
}
.gh-portal-closeicon:hover {
color: var(--grey5);
}
@ -693,11 +721,20 @@ const MobileStyles = `
height: unset;
}
.gh-portal-popup-wrapper {
overflow-y: unset;
}
.gh-portal-content {
position: relative !important;
overflow-y: auto !important;
max-height: unset !important;
}
.gh-portal-popup-wrapper.fullscreen:not(.preview) .gh-portal-content {
max-height: calc(100vh - 190px) !important;
}
.gh-portal-powered {
position: relative;
bottom: unset;
@ -735,6 +772,10 @@ const MobileStyles = `
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container {
padding: 0;
}
.gh-portal-popup-wrapper.fullscreen .gh-portal-powered {
padding-bottom: 0;
}
}
@media (max-width: 414px) {

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

@ -177,7 +177,7 @@ export const ProductsSectionStyles = `
grid-gap: 12px;
align-items: start;
min-height: unset;
padding: 20px;
padding: 12px 20px;
}
.gh-portal-product-card-header {
@ -187,7 +187,7 @@ export const ProductsSectionStyles = `
}
.gh-portal-product-name {
margin: 0;
margin: 4px 0;
padding: 0;
text-align: left;
border-bottom: none;
@ -223,12 +223,6 @@ export const ProductsSectionStyles = `
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 {
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-signin-footer {
padding: 0;
width: 100%;
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 {