IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Settings: Appearance: fixed mobile styles

Browse Source
This commit is contained in:
Nikita Gopienko 2023-09-07 13:08:32 +03:00
parent 61c478770a
commit a54463404b
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
View File

@ -4,6 +4,7 @@ import ModalDialog from "@docspace/components/modal-dialog";
import styled, { css } from "styled-components";
import Button from "@docspace/components/button";
import { withTranslation } from "react-i18next";
import { isMobileOnly } from "react-device-detect";
const StyledComponent = styled(ModalDialog)`
.modal-dialog-aside-footer {
@ -65,7 +66,19 @@ const StyledComponent = styled(ModalDialog)`
cursor: pointer;
}
.drop-down-container-hex {
${isMobileOnly &&
css`
width: 100%;
`}
}
.drop-down-item-hex {
${isMobileOnly &&
css`
width: calc(100vw - 32px);
`}
:hover {
background-color: unset;
}
@ -102,7 +115,8 @@ const ColorSchemeDialog = props => {
displayType="aside"
currentColorAccent={currentColorAccent}
currentColorButtons={currentColorButtons}
withFooterBorder={showSaveButtonDialog}>
withFooterBorder={showSaveButtonDialog}
>
<ModalDialog.Header>{header}</ModalDialog.Header>
<ModalDialog.Body>
<div>

11
packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js
View File

@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
import styled, { css } from "styled-components";
import Button from "@docspace/components/button";
import { HexColorPicker, HexColorInput } from "react-colorful";
import { isMobile } from "react-device-detect";
import { isMobileOnly } from "react-device-detect";
const StyledComponent = styled.div`
.save-button {
@ -30,6 +30,11 @@ const StyledComponent = styled.div`
.hex-color-picker .react-colorful__interactive {
width: 183px;
${isMobileOnly &&
css`
width: calc(100vw - 76px);
`}
}
.hex-color-picker .react-colorful__saturation-pointer {
@ -87,9 +92,9 @@ const StyledComponent = styled.div`
padding-bottom: 16px;
width: 195px;
${isMobile &&
${isMobileOnly &&
css`
width: calc(100vw - 60px);
width: calc(100vw - 64px);
`}
}