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

Fixed various mobile bugs

Browse source 
- Fixed titles not breaking on small size screens
- Fixed bottom margin of powered by badge on mobile
- Updated word-wrap of detail values in lists
This commit is contained in:
Peter Zimon 2022-03-28 13:19:15 +02:00
parent bd25c0cc6e
commit 4af2a89f13
3 changed files with 39 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -557,8 +557,9 @@ const FrameStyles = `
letter-spacing: 0.3px; letter-spacing: 0.3px;
line-height: 1.3em; line-height: 1.3em;
padding: 0; padding: 0;
margin: 5px 0 0; margin: 5px 8px 0 0;
color: var(--grey6); color: var(--grey6);
word-break: break-all;
} }
.gh-portal-list-detail .old-price { .gh-portal-list-detail .old-price {
@ -709,7 +710,8 @@ const MobileStyles = `
button[class="gh-portal-btn"], button[class="gh-portal-btn"],
.gh-portal-btn-main, .gh-portal-btn-main,
.gh-portal-btn-primary { .gh-portal-btn-primary,
.gh-portal-btn-branded {
height: 42px; height: 42px;
} }
} }
@ -750,6 +752,10 @@ const MobileStyles = `
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.gh-portal-detail-header {
margin-top: 4px;
}
.gh-portal-popup-wrapper { .gh-portal-popup-wrapper {
height: 100%; height: 100%;
padding: 0; padding: 0;
@ -816,28 +822,30 @@ const MobileStyles = `
margin-bottom: 32px; margin-bottom: 32px;
padding-bottom: 0; padding-bottom: 0;
} }
.gh-portal-powered {
padding-top: 12px;
padding-bottom: 24px;
}
} }
@media (max-width: 390px) { @media (max-width: 390px) {
.gh-portal-popup-container:not(.account-plan) .gh-portal-detail-header .gh-portal-main-title {
font-size: 2.1rem;
margin-top: 1px;
padding: 0 74px;
text-align: center;
}
.gh-portal-input { .gh-portal-input {
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 16px; margin-bottom: 16px;
} }
.gh-portal-popup-container footer {
padding-right: 24px;
padding-bottom: 24px;
padding-left: 24px;
}
.gh-portal-signup-header, .gh-portal-signup-header,
.gh-portal-signin-header { .gh-portal-signin-header {
padding-bottom: 16px; padding-bottom: 16px;
} }
.gh-portal-powered {
padding-top: 12px;
}
} }
@media (min-width: 480px) and (max-height: 880px) { @media (min-width: 480px) and (max-height: 880px) {

18
ghost/portal/src/components/pages/AccountHomePage.js
View file

@ -110,6 +110,24 @@ export const AccountHomePageStyles = `
margin-right: 5px; margin-right: 5px;
z-index: 999; z-index: 999;
} }
@media (max-width: 390px) {
.gh-portal-account-footer {
padding: 0 !important;
}
}
@media (max-width: 340px) {
.gh-portal-account-footer {
padding: 0 !important;
flex-wrap: wrap;
gap: 12px;
}
.gh-portal-account-footer .gh-portal-account-footerright {
justify-content: flex-start;
}
}
`; `;
const UserAvatar = ({avatar, brandColor}) => { const UserAvatar = ({avatar, brandColor}) => {

2
ghost/portal/src/components/pages/AccountPlanPage.js
View file

@ -10,7 +10,7 @@ import {formatNumber, getAvailablePrices, getFilteredPrices, getMemberActivePric
export const AccountPlanPageStyles = ` export const AccountPlanPageStyles = `
.account-plan.full-size .gh-portal-main-title { .account-plan.full-size .gh-portal-main-title {
font-size: 3.2rem; font-size: 3.2rem;
margin-top: 32px; margin-top: 44px;
} }
.gh-portal-accountplans-main { .gh-portal-accountplans-main {