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

Web: Components: Utils: Added new device size - "hugeMobile". Fixed displaying GroupMenu items on huge mobile devices

Browse Source
This commit is contained in:
Ilya Oleshko 2022-06-21 16:27:35 +03:00
parent 2abdeddeb6
commit 8b2d2368fa
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/asc-web-components/table-container/GroupMenuItem.js
View File

@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import { ReactSVG } from "react-svg"; import { ReactSVG } from "react-svg";
import styled from "styled-components"; import styled from "styled-components";
import Button from "../button"; import Button from "../button";
import { mobile, tablet } from "../utils/device"; import { mobile, tablet, hugeMobile } from "../utils/device";
import { Base } from "../themes"; import { Base } from "../themes";
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
@ -74,6 +74,13 @@ const StyledButton = styled(Button)`
} }
} }
@media ${hugeMobile} {
padding: 0 16px;
height: 60px;
font-size: 0;
line-height: 0;
}
@media ${mobile} { @media ${mobile} {
padding: 0 16px; padding: 0 16px;
height: 50px; height: 50px;

11
packages/asc-web-components/utils/device.js
View File

@ -1,5 +1,6 @@
export const size = { export const size = {
mobile: 375, mobile: 375,
hugeMobile: 414,
smallTablet: 600, smallTablet: 600,
tablet: 1024, tablet: 1024,
desktop: 1025, desktop: 1025,
@ -7,6 +8,8 @@ export const size = {
export const mobile = `(max-width: ${size.mobile}px)`; export const mobile = `(max-width: ${size.mobile}px)`;
export const hugeMobile = `(max-width: ${size.hugeMobile}px)`;
export const smallTablet = `(max-width: ${size.smallTablet}px)`; export const smallTablet = `(max-width: ${size.smallTablet}px)`;
export const tablet = `(max-width: ${size.tablet}px)`; export const tablet = `(max-width: ${size.tablet}px)`;
@ -17,12 +20,18 @@ export const isMobile = () => {
return window.innerWidth <= size.mobile; return window.innerWidth <= size.mobile;
}; };
export const isHugeMobile = () => {
return window.innerWidth <= size.hugeMobile;
};
export const isSmallTablet = () => { export const isSmallTablet = () => {
return window.innerWidth < size.smallTablet; return window.innerWidth < size.smallTablet;
}; };
export const isTablet = () => { export const isTablet = () => {
return window.innerWidth <= size.tablet && window.innerWidth >= size.mobile; return (
window.innerWidth <= size.tablet && window.innerWidth >= size.hugeMobile
);
}; };
export const isDesktop = () => { export const isDesktop = () => {