Web: Components: Utils: Added new device size - "hugeMobile". Fixed displaying GroupMenu items on huge mobile devices
This commit is contained in:
parent
2abdeddeb6
commit
8b2d2368fa
@ -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;
|
||||||
|
@ -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 = () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user