Fix Bug 62348: Settings are not available when splitting the screen
This commit is contained in:
parent
0bca20f496
commit
6538be2c38
@ -6,25 +6,38 @@ import StyledBreakpointWarning from "./sub-components/StyledBreakpointWarning";
|
||||
import Loader from "./sub-components/loader";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
const BreakpointWarning = ({ t, sectionName, tReady, theme }) => {
|
||||
const BreakpointWarning = ({
|
||||
t,
|
||||
sectionName,
|
||||
tReady,
|
||||
theme,
|
||||
isSmallWindow,
|
||||
}) => {
|
||||
const textHeader = isSmallWindow
|
||||
? t("BreakpointSmallText")
|
||||
: t("BreakpointWarningText");
|
||||
|
||||
const textPrompt = isSmallWindow ? (
|
||||
t("BreakpointSmallTextPrompt")
|
||||
) : (
|
||||
<Trans t={t} i18nKey="BreakpointWarningTextPrompt" ns="Settings">
|
||||
"Please use the desktop site to access the {{ sectionName }}
|
||||
settings."
|
||||
</Trans>
|
||||
);
|
||||
|
||||
const img = theme.isBase
|
||||
? BreakpointWarningSvgUrl
|
||||
: BreakpointWarningSvgDarkUrl;
|
||||
|
||||
return !tReady ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<StyledBreakpointWarning>
|
||||
<img
|
||||
src={
|
||||
theme.isBase ? BreakpointWarningSvgUrl : BreakpointWarningSvgDarkUrl
|
||||
}
|
||||
/>
|
||||
|
||||
<img src={img} />
|
||||
<div className="description">
|
||||
<div className="text-breakpoint">{t("BreakpointWarningText")}</div>
|
||||
<div className="text-prompt">
|
||||
<Trans t={t} i18nKey="BreakpointWarningTextPrompt" ns="Settings">
|
||||
"Please use the desktop site to access the {{ sectionName }}
|
||||
settings."
|
||||
</Trans>
|
||||
</div>
|
||||
<div className="text-breakpoint">{textHeader}</div>
|
||||
<div className="text-prompt">{textPrompt}</div>
|
||||
</div>
|
||||
</StyledBreakpointWarning>
|
||||
);
|
||||
|
@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { isMobile, isDesktop } from "react-device-detect";
|
||||
|
||||
import withLoading from "SRC_DIR/HOCs/withLoading";
|
||||
import Whitelabel from "./Branding/whitelabel";
|
||||
@ -60,7 +60,7 @@ const Branding = ({
|
||||
isSettingPaid,
|
||||
standalone,
|
||||
}) => {
|
||||
const [viewDesktop, setViewDesktop] = useState(false);
|
||||
const [isSmallWindow, setIsSmallWindow] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@ -78,14 +78,19 @@ const Branding = ({
|
||||
}, []);
|
||||
|
||||
const onCheckView = () => {
|
||||
if (!isMobile && window.innerWidth > 1024) {
|
||||
setViewDesktop(true);
|
||||
if (isDesktop && window.innerWidth < 795) {
|
||||
setIsSmallWindow(true);
|
||||
} else {
|
||||
setViewDesktop(false);
|
||||
setIsSmallWindow(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!viewDesktop)
|
||||
if (isSmallWindow)
|
||||
return (
|
||||
<BreakpointWarning sectionName={t("Settings:Branding")} isSmallWindow />
|
||||
);
|
||||
|
||||
if (isMobile)
|
||||
return <BreakpointWarning sectionName={t("Settings:Branding")} />;
|
||||
|
||||
return (
|
||||
|
Loading…
Reference in New Issue
Block a user