mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
🎨 Supported RTL languages in Portal
Portal will now detect if the language locale is a RTL language and update it's rendering to accommodate!
This commit is contained in:
Cathy Sarisky
GitHub
parent
e514b24696
commit
847bd2a98c
21 changed files with 220 additions and 86 deletions
|
|
@ -161,6 +161,7 @@ export default class App extends React.Component {
|
|||
const i18nLanguage = this.props.siteI18nEnabled ? site.locale : 'en';
|
||||
|
||||
const i18n = i18nLib(i18nLanguage, 'portal');
|
||||
|
||||
const state = {
|
||||
site,
|
||||
member,
|
||||
|
|
@ -171,6 +172,7 @@ export default class App extends React.Component {
|
|||
pageData,
|
||||
popupNotification,
|
||||
t: i18n.t,
|
||||
dir: i18n.dir() || 'ltr',
|
||||
action: 'init:success',
|
||||
initStatus: 'success'
|
||||
};
|
||||
|
|
@ -924,7 +926,7 @@ export default class App extends React.Component {
|
|||
|
||||
/**Get final App level context from App state*/
|
||||
getContextFromState() {
|
||||
const {site, member, action, page, lastPage, showPopup, pageQuery, pageData, popupNotification, customSiteUrl, t} = this.state;
|
||||
const {site, member, action, page, lastPage, showPopup, pageQuery, pageData, popupNotification, customSiteUrl, t, dir} = this.state;
|
||||
const contextPage = this.getContextPage({site, page, member});
|
||||
const contextMember = this.getContextMember({page: contextPage, member, customSiteUrl});
|
||||
return {
|
||||
|
|
@ -941,6 +943,7 @@ export default class App extends React.Component {
|
|||
popupNotification,
|
||||
customSiteUrl,
|
||||
t,
|
||||
dir,
|
||||
onAction: (_action, data) => this.dispatchAction(_action, data)
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ const AppContext = React.createContext({
|
|||
onAction: (action, data) => {
|
||||
return {action, data};
|
||||
},
|
||||
t: () => {}
|
||||
t: () => {},
|
||||
dir: 'ltr'
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -19,12 +19,13 @@ export default class Frame extends Component {
|
|||
this.iframeHtml = this.node.contentDocument.documentElement;
|
||||
this.iframeHead = this.node.contentDocument.head;
|
||||
this.iframeRoot = this.node.contentDocument.body;
|
||||
this.iframeHtml.setAttribute('dir', this.props.dataDir);
|
||||
this.forceUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {children, head, title = '', style = {}, dataTestId = '', ...rest} = this.props;
|
||||
const {children, head, title = '', style = {}, dataTestId = '', dataDir = 'ltr', ...rest} = this.props;
|
||||
return (
|
||||
<iframe
|
||||
srcDoc={`<!DOCTYPE html>`}
|
||||
|
|
@ -32,6 +33,7 @@ export default class Frame extends Component {
|
|||
ref={node => (this.node = node)}
|
||||
title={title}
|
||||
style={style} frameBorder="0"
|
||||
dir={dataDir}
|
||||
{...rest}
|
||||
>
|
||||
{this.iframeHead && createPortal(head, this.iframeHead)}
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ const FrameStyles = `
|
|||
.gh-portal-btn-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
|
|
@ -194,6 +194,11 @@ const FrameStyles = `
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .gh-portal-btn-logout {
|
||||
left: unset;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.gh-portal-btn-logout .label {
|
||||
opacity: 0;
|
||||
transform: translateX(-6px);
|
||||
|
|
@ -220,10 +225,13 @@ const FrameStyles = `
|
|||
}
|
||||
|
||||
.gh-portal-btn-site-title-back span {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .gh-portal-btn-site-title-back span {
|
||||
transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.gh-portal-btn-site-title-back:hover span {
|
||||
transform: translateX(-3px);
|
||||
|
|
@ -298,8 +306,8 @@ const FrameStyles = `
|
|||
|
||||
/* Hiding scrollbars */
|
||||
.gh-portal-popup-wrapper {
|
||||
padding-right: 30px !important;
|
||||
margin-right: -30px !important;
|
||||
padding-inline-end: 30px !important;
|
||||
margin-inline-end: -30px !important;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
|
@ -321,7 +329,7 @@ const FrameStyles = `
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-size: 1.5rem;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
letter-spacing: 0;
|
||||
text-rendering: optimizeLegibility;
|
||||
background: var(--white);
|
||||
|
|
@ -417,6 +425,10 @@ const FrameStyles = `
|
|||
left: 24px;
|
||||
z-index: 9999;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-powered {
|
||||
left: unset;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.gh-portal-powered a {
|
||||
border: none;
|
||||
|
|
@ -436,6 +448,9 @@ const FrameStyles = `
|
|||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-powered a {
|
||||
padding: 6px 7px 6px 8px;
|
||||
}
|
||||
|
||||
.gh-portal-powered a:hover {
|
||||
color: #15171A;
|
||||
|
|
@ -457,7 +472,8 @@ const FrameStyles = `
|
|||
.gh-portal-powered a svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 0 6px 0 0;
|
||||
margin: 0;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
|
||||
.gh-portal-powered.outside.full-size {
|
||||
|
|
@ -488,6 +504,10 @@ const FrameStyles = `
|
|||
right: 24px;
|
||||
z-index: 10000;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-closeicon-container {
|
||||
right: unset;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.gh-portal-closeicon {
|
||||
color: var(--grey10);
|
||||
|
|
@ -507,6 +527,11 @@ const FrameStyles = `
|
|||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-popup-wrapper.full-size .gh-portal-closeicon-container,
|
||||
html[dir="rtl"] .gh-portal-popup-container.full-size .gh-portal-closeicon-container {
|
||||
right: unset;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.full-size .gh-portal-closeicon,
|
||||
.gh-portal-popup-container.full-size .gh-portal-closeicon {
|
||||
|
|
@ -521,6 +546,11 @@ const FrameStyles = `
|
|||
left: 8px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .gh-portal-logout-container {
|
||||
left: unset;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.gh-portal-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -669,6 +699,9 @@ const FrameStyles = `
|
|||
color: var(--grey6);
|
||||
word-break: break-word;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-list-detail p {
|
||||
margin: 5px 0 0 8px;
|
||||
}
|
||||
|
||||
.gh-portal-list-detail.gh-portal-list-big p {
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -682,6 +715,9 @@ const FrameStyles = `
|
|||
.gh-portal-list-toggle-wrapper .gh-portal-list-detail {
|
||||
padding: 4px 24px 4px 0px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-list-toggle-wrapper .gh-portal-list-detail {
|
||||
padding: 4px 0px 4px 24px;
|
||||
}
|
||||
|
||||
.gh-portal-list-detail .old-price {
|
||||
text-decoration: line-through;
|
||||
|
|
@ -696,7 +732,7 @@ const FrameStyles = `
|
|||
width: 17px;
|
||||
height: 17px;
|
||||
margin-top: 1px;
|
||||
margin-right: -6px;
|
||||
margin-inline-end: -6px;
|
||||
}
|
||||
|
||||
.gh-portal-expire-warning {
|
||||
|
|
@ -748,16 +784,16 @@ const FrameStyles = `
|
|||
.mt9 { margin-top: 36px; }
|
||||
.mt10 { margin-top: 40px; }
|
||||
|
||||
.mr1 { margin-right: 4px; }
|
||||
.mr2 { margin-right: 8px; }
|
||||
.mr3 { margin-right: 12px; }
|
||||
.mr4 { margin-right: 16px; }
|
||||
.mr5 { margin-right: 20px; }
|
||||
.mr6 { margin-right: 24px; }
|
||||
.mr7 { margin-right: 28px; }
|
||||
.mr8 { margin-right: 32px; }
|
||||
.mr9 { margin-right: 36px; }
|
||||
.mr10 { margin-right: 40px; }
|
||||
.mr1 { margin-inline-end: 4px; }
|
||||
.mr2 { margin-inline-end: 8px; }
|
||||
.mr3 { margin-inline-end: 12px; }
|
||||
.mr4 { margin-inline-end: 16px; }
|
||||
.mr5 { margin-inline-end: 20px; }
|
||||
.mr6 { margin-inline-end: 24px; }
|
||||
.mr7 { margin-inline-end: 28px; }
|
||||
.mr8 { margin-inline-end: 32px; }
|
||||
.mr9 { margin-inline-end: 36px; }
|
||||
.mr10 { margin-inline-end: 40px; }
|
||||
|
||||
.mb1 { margin-bottom: 4px; }
|
||||
.mb2 { margin-bottom: 8px; }
|
||||
|
|
@ -770,16 +806,16 @@ const FrameStyles = `
|
|||
.mb9 { margin-bottom: 36px; }
|
||||
.mb10 { margin-bottom: 40px; }
|
||||
|
||||
.ml1 { margin-left: 4px; }
|
||||
.ml2 { margin-left: 8px; }
|
||||
.ml3 { margin-left: 12px; }
|
||||
.ml4 { margin-left: 16px; }
|
||||
.ml5 { margin-left: 20px; }
|
||||
.ml6 { margin-left: 24px; }
|
||||
.ml7 { margin-left: 28px; }
|
||||
.ml8 { margin-left: 32px; }
|
||||
.ml9 { margin-left: 36px; }
|
||||
.ml10 { margin-left: 40px; }
|
||||
.ml1 { margin-inline-start: 4px; }
|
||||
.ml2 { margin-inline-start: 8px; }
|
||||
.ml3 { margin-inline-start: 12px; }
|
||||
.ml4 { margin-inline-start: 16px; }
|
||||
.ml5 { margin-inline-start: 20px; }
|
||||
.ml6 { margin-inline-start: 24px; }
|
||||
.ml7 { margin-inline-start: 28px; }
|
||||
.ml8 { margin-inline-start: 32px; }
|
||||
.ml9 { margin-inline-start: 36px; }
|
||||
.ml10 { margin-inline-start: 40px; }
|
||||
|
||||
.pt1 { padding-top: 4px; }
|
||||
.pt2 { padding-top: 8px; }
|
||||
|
|
@ -792,16 +828,16 @@ const FrameStyles = `
|
|||
.pt9 { padding-top: 36px; }
|
||||
.pt10 { padding-top: 40px; }
|
||||
|
||||
.pr1 { padding-right: 4px; }
|
||||
.pr2 { padding-right: 8px; }
|
||||
.pr3 { padding-right: 12px; }
|
||||
.pr4 { padding-right: 16px; }
|
||||
.pr5 { padding-right: 20px; }
|
||||
.pr6 { padding-right: 24px; }
|
||||
.pr7 { padding-right: 28px; }
|
||||
.pr8 { padding-right: 32px; }
|
||||
.pr9 { padding-right: 36px; }
|
||||
.pr10 { padding-right: 40px; }
|
||||
.pr1 { padding-inline-end: 4px; }
|
||||
.pr2 { padding-inline-end: 8px; }
|
||||
.pr3 { padding-inline-end: 12px; }
|
||||
.pr4 { padding-inline-end: 16px; }
|
||||
.pr5 { padding-inline-end: 20px; }
|
||||
.pr6 { padding-inline-end: 24px; }
|
||||
.pr7 { padding-inline-end: 28px; }
|
||||
.pr8 { padding-inline-end: 32px; }
|
||||
.pr9 { padding-inline-end: 36px; }
|
||||
.pr10 { padding-inline-end: 40px; }
|
||||
|
||||
.pb1 { padding-bottom: 4px; }
|
||||
.pb2 { padding-bottom: 8px; }
|
||||
|
|
@ -814,16 +850,16 @@ const FrameStyles = `
|
|||
.pb9 { padding-bottom: 36px; }
|
||||
.pb10 { padding-bottom: 40px; }
|
||||
|
||||
.pl1 { padding-left: 4px; }
|
||||
.pl2 { padding-left: 8px; }
|
||||
.pl3 { padding-left: 12px; }
|
||||
.pl4 { padding-left: 16px; }
|
||||
.pl5 { padding-left: 20px; }
|
||||
.pl6 { padding-left: 24px; }
|
||||
.pl7 { padding-left: 28px; }
|
||||
.pl8 { padding-left: 32px; }
|
||||
.pl9 { padding-left: 36px; }
|
||||
.pl10 { padding-left: 40px; }
|
||||
.pl1 { padding-inline-start: 4px; }
|
||||
.pl2 { padding-inline-start: 8px; }
|
||||
.pl3 { padding-inline-start: 12px; }
|
||||
.pl4 { padding-inline-start: 16px; }
|
||||
.pl5 { padding-inline-start: 20px; }
|
||||
.pl6 { padding-inline-start: 24px; }
|
||||
.pl7 { padding-inline-start: 28px; }
|
||||
.pl8 { padding-inline-start: 32px; }
|
||||
.pl9 { padding-inline-start: 36px; }
|
||||
.pl10 { padding-inline-start: 40px; }
|
||||
|
||||
.hidden { display: none !important; }
|
||||
`;
|
||||
|
|
@ -1042,7 +1078,7 @@ const MultipleProductsGlobalStyles = `
|
|||
overflow-y: scroll;
|
||||
overflow-x: clip;
|
||||
margin: 32px auto !important;
|
||||
padding-right: 0 !important; /* Override scrollbar hiding */
|
||||
padding-inline-end: 0 !important; /* Override scrollbar hiding */
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.signin {
|
||||
|
|
@ -1160,7 +1196,7 @@ const MultipleProductsGlobalStyles = `
|
|||
|
||||
.gh-portal-btn-inline {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
|
@ -1174,7 +1210,7 @@ const MultipleProductsGlobalStyles = `
|
|||
.gh-portal-checkmark-container {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
transition: opacity ease 0.4s 0.2s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -177,11 +177,11 @@ export const GlobalStyles = `
|
|||
.gh-longform .gh-portal-btn {
|
||||
width: calc(100% + 4vmin);
|
||||
margin-top: 4rem;
|
||||
margin-right: -4vmin;
|
||||
margin-inline-end: -4vmin;
|
||||
}
|
||||
|
||||
.gh-longform .gh-portal-btn.no-margin-right {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,12 @@ const NotificationStyles = `
|
|||
animation: notification-slidein 0.55s cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .gh-portal-notification {
|
||||
right: unset;
|
||||
left: 12px;
|
||||
padding: 14px 20px 18px 44px;
|
||||
}
|
||||
|
||||
.gh-portal-notification.slideout {
|
||||
animation: notification-slideout 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
}
|
||||
|
|
@ -40,10 +46,11 @@ const NotificationStyles = `
|
|||
flex-grow: 1;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
margin: 0;
|
||||
padding: 0 0 0 40px;
|
||||
padding: 0;
|
||||
color: var(--grey13);
|
||||
padding-inline-start: 40px;
|
||||
}
|
||||
|
||||
.gh-portal-notification p strong {
|
||||
|
|
@ -68,6 +75,10 @@ const NotificationStyles = `
|
|||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-notification-icon {
|
||||
right: 17px;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
.gh-portal-notification-icon.success {
|
||||
color: var(--green);
|
||||
|
|
@ -125,6 +136,10 @@ const NotificationStyles = `
|
|||
max-width: calc(100% - 24px);
|
||||
animation-name: notification-slidein-mobile;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-notification {
|
||||
right: 12px;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
.gh-portal-notification.slideout {
|
||||
animation-duration: 0.55s;
|
||||
|
|
|
|||
|
|
@ -303,7 +303,9 @@ export default class PopupModal extends React.Component {
|
|||
|
||||
return (
|
||||
<div style={Styles.modalContainer}>
|
||||
<Frame style={frameStyle} title="portal-popup" head={this.renderFrameStyles()} dataTestId='portal-popup-frame'>
|
||||
<Frame style={frameStyle} title="portal-popup" head={this.renderFrameStyles()} dataTestId='portal-popup-frame'
|
||||
dataDir={this.context.dir}
|
||||
>
|
||||
<div className={className} onClick = {e => this.handlePopupClose(e)}></div>
|
||||
<PopupContent isMobile={isMobile} />
|
||||
</Frame>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@ const TriggerButtonStyles = `
|
|||
line-height: 1;
|
||||
padding: 10px 28px 0 17px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-triggerbtn-wrapper {
|
||||
padding: 10px 17px 0 28px;
|
||||
}
|
||||
|
||||
.gh-portal-triggerbtn-wrapper span {
|
||||
margin-bottom: 1px;
|
||||
|
|
@ -59,6 +62,9 @@ const TriggerButtonStyles = `
|
|||
.gh-portal-triggerbtn-container.with-label {
|
||||
padding: 0 12px 0 16px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-triggerbtn-container.with-label {
|
||||
padding: 0 16px 0 12px;
|
||||
}
|
||||
|
||||
.gh-portal-triggerbtn-label {
|
||||
padding: 8px;
|
||||
|
|
|
|||
|
|
@ -35,12 +35,16 @@ export const ActionButtonStyles = `
|
|||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-btn-text span.right-arrow {
|
||||
transform: scale(-1, 1);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.gh-portal-loadingicon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
margin-left: -19px;
|
||||
margin-inline-start: -19px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,12 +20,19 @@ export const BackButtonStyles = `
|
|||
border: none;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .gh-portal-btn-back {
|
||||
right: 20px;
|
||||
left: unset;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-btn-back,
|
||||
.gh-portal-btn-back:hover {
|
||||
left: 16px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-btn-back {
|
||||
right: 16px;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-portal-btn-back:hover {
|
||||
|
|
@ -37,7 +44,10 @@ export const BackButtonStyles = `
|
|||
width: 17px;
|
||||
height: 17px;
|
||||
margin-top: 1px;
|
||||
margin-right: 2px;
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-btn-back svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ export default function NewsletterManagement({
|
|||
onClick={() => onAction('switchPage', {page: 'emailReceivingFAQ', pageData: {direct: false}})}
|
||||
>
|
||||
{/* eslint-disable-next-line i18next/no-literal-string */}
|
||||
{t('Get help')} →
|
||||
{t('Get help')} <span className="right-arrow">→</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,10 @@ export const PopupNotificationStyles = `
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-popupnotification-icon {
|
||||
left: unset;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.gh-portal-popupnotification-icon.success {
|
||||
color: var(--green);
|
||||
|
|
@ -73,6 +77,10 @@ export const PopupNotificationStyles = `
|
|||
transition: all 0.15s ease-in-out forwards;
|
||||
opacity: 0.8;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-popupnotification .closeicon {
|
||||
right: unset;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.gh-portal-popupnotification .closeicon:hover {
|
||||
opacity: 1.0;
|
||||
|
|
|
|||
|
|
@ -41,10 +41,17 @@ export const ProductsSectionStyles = () => {
|
|||
border-radius: 999px;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-products-pricetoggle:before {
|
||||
left: 4px;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
.gh-portal-products-pricetoggle.left:before {
|
||||
transform: translateX(calc(-100% + 8px));
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-products-pricetoggle.left:before {
|
||||
transform: translateX(calc(100% - 8px));
|
||||
}
|
||||
|
||||
.gh-portal-products-pricetoggle .gh-portal-btn {
|
||||
border: 0;
|
||||
|
|
@ -80,7 +87,7 @@ export const ProductsSectionStyles = () => {
|
|||
|
||||
.gh-portal-maximum-discount {
|
||||
font-weight: 400;
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +200,7 @@ export const ProductsSectionStyles = () => {
|
|||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-radius: 999px;
|
||||
margin-right: -4px;
|
||||
margin-inline-end: -4px;
|
||||
max-height: 24.5px;
|
||||
}
|
||||
|
||||
|
|
@ -243,7 +250,7 @@ export const ProductsSectionStyles = () => {
|
|||
}
|
||||
|
||||
.gh-portal-product-price .currency-sign.long {
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
||||
.gh-portal-product-price .amount {
|
||||
|
|
@ -264,7 +271,7 @@ export const ProductsSectionStyles = () => {
|
|||
line-height: 1.6em;
|
||||
color: var(--grey5);
|
||||
letter-spacing: 0.3px;
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
}
|
||||
|
||||
.gh-portal-product-alternative-price {
|
||||
|
|
@ -316,6 +323,9 @@ export const ProductsSectionStyles = () => {
|
|||
margin: 3px 10px 0 0;
|
||||
overflow: visible;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-benefit-checkmark {
|
||||
margin: 3px 0 0 10px;
|
||||
}
|
||||
|
||||
.gh-portal-benefit-checkmark polyline,
|
||||
.gh-portal-benefit-checkmark g {
|
||||
|
|
|
|||
|
|
@ -55,6 +55,10 @@ export const SwitchStyles = `
|
|||
transition: .3s;
|
||||
border-radius: 999px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-for-switch .input-toggle-component:before {
|
||||
left: unset !important;
|
||||
right: 3px !important;
|
||||
}
|
||||
|
||||
.gh-portal-for-switch input:checked + .input-toggle-component {
|
||||
background: var(--brandcolor);
|
||||
|
|
@ -65,6 +69,9 @@ export const SwitchStyles = `
|
|||
transform: translateX(18px);
|
||||
box-shadow: none;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-for-switch input:checked + .input-toggle-component:before {
|
||||
transform: translateX(-18px);
|
||||
}
|
||||
|
||||
.gh-portal-for-switch .container {
|
||||
width: 38px !important;
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ describe('Account Email Page', () => {
|
|||
});
|
||||
const {getByText} = setup({site: siteData, member: getMemberData({newsletters: newsletterData, email_suppressions: {suppressed: false}})});
|
||||
expect(getByText('Not receiving emails?')).toBeInTheDocument();
|
||||
expect(getByText('Get help →')).toBeInTheDocument();
|
||||
expect(getByText('Get help')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('redirects to signin page if no member', async () => {
|
||||
|
|
|
|||
|
|
@ -37,11 +37,11 @@ footer.gh-portal-account-footer {
|
|||
}
|
||||
|
||||
.gh-portal-account-footermenu li {
|
||||
margin-right: 16px;
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
|
||||
.gh-portal-account-footermenu li:last-of-type {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.gh-portal-freeaccount-newsletter {
|
||||
|
|
@ -84,13 +84,13 @@ footer.gh-portal-account-footer {
|
|||
.gh-portal-billing-button-loader {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: -3px;
|
||||
margin-inline-end: -3px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.gh-portal-product-icon {
|
||||
width: 52px;
|
||||
margin-right: 12px;
|
||||
margin-inline-end: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ footer.gh-portal-account-footer {
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--brandcolor);
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,13 +25,17 @@
|
|||
}
|
||||
|
||||
.gh-portal-action-footer .gh-email-faq-page-button {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
|
||||
.emailReceivingFAQ .gh-portal-btn-back,
|
||||
.emailReceivingFAQ .gh-portal-btn-back:hover {
|
||||
left: calc(6vmin - 14px);
|
||||
}
|
||||
html[dir="rtl"] .emailReceivingFAQ .gh-portal-btn-back, html[dir="rtl"] .emailReceivingFAQ .gh-portal-btn-back:hover {
|
||||
right: calc(6vmin - 14px);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
.emailReceivingFAQ .gh-portal-closeicon-container {
|
||||
right: calc(6vmin - 20px);
|
||||
|
|
@ -54,4 +58,9 @@
|
|||
background: none;
|
||||
transition: color linear 100ms;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
html[dir="rtl"] .gh-email-faq-page-button span {
|
||||
transform: scaleX(-1);
|
||||
display: inline-flex;
|
||||
|
||||
}
|
||||
|
|
@ -82,6 +82,10 @@ export const FeedbackPageStyles = `
|
|||
background: currentColor;
|
||||
opacity: 0.10;
|
||||
}
|
||||
html[dir="rtl"] .gh-feedback-button::before {
|
||||
right: 0;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
.gh-feedback-button-selected {
|
||||
box-shadow: inset 0 0 0 2px currentColor;
|
||||
|
|
@ -111,8 +115,8 @@ export const FeedbackPageStyles = `
|
|||
}
|
||||
|
||||
.gh-portal-feedback .gh-portal-text-center {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-inline-start: 8px;
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.feedback {
|
||||
|
|
@ -120,7 +124,7 @@ export const FeedbackPageStyles = `
|
|||
position: relative;
|
||||
width: 100%;
|
||||
background: none;
|
||||
padding-right: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
overflow: hidden;
|
||||
overflow-y: hidden !important;
|
||||
animation: none;
|
||||
|
|
|
|||
|
|
@ -53,6 +53,9 @@ export const OfferPageStyles = () => {
|
|||
margin: 0 110px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-offer-title h4 {
|
||||
margin: 0 0 0 110px;
|
||||
}
|
||||
|
||||
.gh-portal-offer-title h4.placeholder {
|
||||
opacity: 0.4;
|
||||
|
|
@ -75,7 +78,7 @@ export const OfferPageStyles = () => {
|
|||
|
||||
.gh-portal-offer-details .gh-portal-plan-name,
|
||||
.gh-portal-offer-details p {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.gh-portal-offer .footnote {
|
||||
|
|
|
|||
|
|
@ -22,12 +22,15 @@ export const RecommendationsPageStyles = `
|
|||
.gh-portal-recommendation-item .gh-portal-list-detail {
|
||||
padding: 4px 24px 4px 0px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-recommendation-item .gh-portal-list-detail {
|
||||
padding: 4px 0px 4px 24px;
|
||||
}
|
||||
|
||||
.gh-portal-recommendation-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-portal-recommendation-item-favicon {
|
||||
|
|
@ -53,7 +56,7 @@ export const RecommendationsPageStyles = `
|
|||
|
||||
.gh-portal-recommendation-item .gh-portal-recommendation-description-container p {
|
||||
font-size: 1.35rem;
|
||||
padding-left: 30px;
|
||||
padding-inline-start: 30px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1px;
|
||||
margin-top: 4px;
|
||||
|
|
@ -75,7 +78,7 @@ export const RecommendationsPageStyles = `
|
|||
.gh-portal-recommendation-arrow-icon {
|
||||
height: 12px;
|
||||
opacity: 0;
|
||||
margin-left: -6px;
|
||||
margin-inline-start: -6px;
|
||||
transition: 0.2s ease-in opacity;
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +97,7 @@ export const RecommendationsPageStyles = `
|
|||
|
||||
.gh-portal-recommendation-subscribed {
|
||||
display: flex;
|
||||
padding-left: 30px;
|
||||
padding-inline-start: 30px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 1.35rem;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@ export const SignupPageStyles = `
|
|||
top: 35px;
|
||||
left: 32px;
|
||||
}
|
||||
html[dir="rtl"] .gh-portal-back-sitetitle {
|
||||
left: unset;
|
||||
right: 32px;
|
||||
}
|
||||
|
||||
.gh-portal-back-sitetitle .gh-portal-btn {
|
||||
padding: 0;
|
||||
|
|
@ -109,7 +113,7 @@ export const SignupPageStyles = `
|
|||
.gh-portal-signup-message button {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin-left: 4px !important;
|
||||
margin-inline-start: 4px !important;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
|
|
@ -256,6 +260,9 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
|
|||
border-radius: 4px;
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
}
|
||||
html[dir=rtl] .gh-portal-signup-terms .checkbox {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.gh-portal-signup-terms label:hover input:not(:checked) + .checkbox {
|
||||
border-color: var(--grey9);
|
||||
|
|
@ -275,6 +282,10 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
|
|||
transition: opacity 0.15s ease-in-out;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
html[dir=rtl] .gh-portal-signup-terms .checkbox:before {
|
||||
left: unset;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.gh-portal-signup-terms input:checked + .checkbox {
|
||||
border-color: var(--black);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue