diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js
index 1979f694da..12d9edff3c 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js
@@ -1,6 +1,6 @@
import React from "react";
import { withTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
import FieldContainer from "@appserver/components/field-container";
import ToggleButton from "@appserver/components/toggle-button";
import ComboBox from "@appserver/components/combobox";
@@ -21,6 +21,7 @@ import config from "../../../../../../package.json";
import history from "@appserver/common/history";
import { isMobile } from "react-device-detect";
import { Consumer } from "@appserver/components/utils/context";
+import Scrollbar from "@appserver/components/scrollbar";
const mapTimezonesToArray = (timezones) => {
return timezones.map((timezone) => {
@@ -32,16 +33,61 @@ const findSelectedItemByKey = (items, selectedItemKey) => {
return items.find((item) => item.key === selectedItemKey);
};
-const StyledComponent = styled.div`
- /* .section-wrapper-content {
- min-height: 0px;
- } */
- .settings-block {
- overflow: auto;
- min-height: calc(100vh - 164px);
- height: calc(100vh - 164px);
- }
+const menuHeight = "48px";
+const sectionHeight = "50px";
+const paddingSectionWrapperContent = "22px";
+const saveCancelButtons = "56px";
+//const minHeight = "64px";
+const flex = "4px";
+const heightScrollbar = css`calc(
+ 100vh -
+ (
+ ${menuHeight} + ${sectionHeight} + ${paddingSectionWrapperContent} +
+ ${saveCancelButtons} + ${flex}
+ )
+ )`;
+
+const landscapeMobile = css`
+ ${(props) =>
+ (isMobile || props.sectionWidth <= 375) &&
+ css`
+ max-width: 343px;
+
+ .settings-block {
+ height: auto;
+ }
+ `}
+`;
+
+const portraitMobile = css`
+ ${(props) =>
+ (isMobile || props.sectionWidth <= 375) &&
+ css`
+ .settings-block {
+ height: calc(
+ 100vh -
+ (
+ ${menuHeight} + ${sectionHeight} + ${paddingSectionWrapperContent} +
+ ${saveCancelButtons} + ${flex}
+ )
+ );
+ }
+ `}
+`;
+
+const StyledScrollbar = styled(Scrollbar)`
+ height: calc(
+ 100vh -
+ (
+ ${menuHeight} + ${sectionHeight} + ${paddingSectionWrapperContent} +
+ ${saveCancelButtons} + ${flex}
+ )
+ );
+ width: 343;
+`;
+
+const StyledComponent = styled.div`
.combo-button-label {
max-width: 100%;
font-weight: 400;
@@ -64,13 +110,12 @@ const StyledComponent = styled.div`
line-height: 20px;
}
+ @media (orientation: portrait) {
+ ${portraitMobile}
+ }
+
@media (orientation: landscape) {
- max-width: 343px;
- .settings-block {
- overflow: hidden;
- min-height: auto;
- height: auto;
- }
+ ${landscapeMobile}
}
`;
@@ -128,7 +173,7 @@ class LanguageAndTimeZone extends React.Component {
hasChanged: false,
showReminder: false,
sectionWidth: null,
- border: false,
+ hasScroll: false,
};
}
@@ -188,7 +233,7 @@ class LanguageAndTimeZone extends React.Component {
}
componentDidUpdate(prevProps, prevState) {
- const { timezones, timezoneDefault, languageDefault, border } = this.state;
+ const { timezones, timezoneDefault, languageDefault } = this.state;
const {
i18n,
language,
@@ -205,12 +250,21 @@ class LanguageAndTimeZone extends React.Component {
if (this.settingsDiv.scrollHeight > height) {
this.setState({
- border: true,
+ hasScroll: true,
});
}
}
}
+ // TODO: Переделать, убрать div c 64 высотой
+ const settingsMobile = document.getElementsByClassName(
+ "settings-mobile"
+ )[0];
+
+ if (settingsMobile) {
+ settingsMobile.style.display = "none";
+ }
+
if (timezones.length && !prevState.isLoadedData) {
this.setState({ isLoadedData: true });
}
@@ -362,13 +416,61 @@ class LanguageAndTimeZone extends React.Component {
timezone,
showReminder,
hasChanged,
- border,
+ hasScroll,
} = this.state;
const tooltipLanguageTimeSettings = (