0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00

Fixed various mobile bugs

- 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

View file

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

View file

@ -110,6 +110,24 @@ export const AccountHomePageStyles = `
margin-right: 5px;
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}) => {

View file

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