diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index 86cb57db8d..4160cbd2f4 100644 --- a/packages/apps/src/Content/index.tsx +++ b/packages/apps/src/Content/index.tsx @@ -116,5 +116,13 @@ export default React.memo(styled(Content)` margin-left: auto; width: 100%; padding: 0 1.5rem; + + @media only screen and (max-width: 1100px) { + padding: 0 1rem; + } + + @media only screen and (max-width: 800px) { + padding: 0 0.75rem; + } } `); diff --git a/packages/apps/src/Menu/index.tsx b/packages/apps/src/Menu/index.tsx index 21b7a769aa..d3b0df8de5 100644 --- a/packages/apps/src/Menu/index.tsx +++ b/packages/apps/src/Menu/index.tsx @@ -168,20 +168,6 @@ export default React.memo(styled(Menu)` display: none; } - @media only screen and (max-width: 800px) { - .groupHdr { - padding: 0.857rem; - } - - .smallShow { - display: initial; - } - - .smallHide { - display: none; - } - } - & .menuContainer { flex-direction: row; align-items: center; @@ -247,4 +233,25 @@ export default React.memo(styled(Menu)` align-self: center; } + @media only screen and (max-width: 800px) { + .groupHdr { + padding: 0.857rem 0.75rem; + } + + .smallShow { + display: initial; + } + + .smallHide { + display: none; + } + + .menuItems { + margin-right: 0; + + > li + li { + margin-left: 0.25rem; + } + } + } `); diff --git a/packages/react-components/src/Columar.tsx b/packages/react-components/src/Columar.tsx index 42a9373141..49e623b954 100644 --- a/packages/react-components/src/Columar.tsx +++ b/packages/react-components/src/Columar.tsx @@ -80,7 +80,7 @@ const ColumarStyled = React.memo(styled(Columar)` } &.defaultSize { - @media (min-width: ${MIN_WIDTH_DEFAULT}) { + @media only screen and (min-width: ${MIN_WIDTH_DEFAULT}) { ${FLEX_OPTIONS} } @@ -90,7 +90,7 @@ const ColumarStyled = React.memo(styled(Columar)` } &.smallSize { - @media (min-width: ${MIN_WIDTH_SMALL}) { + @media only screen and (min-width: ${MIN_WIDTH_SMALL}) { ${FLEX_OPTIONS} } @@ -100,7 +100,7 @@ const ColumarStyled = React.memo(styled(Columar)` } &.tinySize { - @media (min-width: ${MIN_WIDTH_TINY}) { + @media only screen and (min-width: ${MIN_WIDTH_TINY}) { ${FLEX_OPTIONS} } @@ -109,6 +109,22 @@ const ColumarStyled = React.memo(styled(Columar)` } } + &.defaultSize, &.smallSize { + @media only screen and (max-width: ${MIN_WIDTH_SMALL}) { + &.isPadded > .ui--Column { + padding: 0 0.5rem; + } + } + } + + &.defaultSize, &.smallSize, &.tinySize { + @media only screen and (max-width: ${MIN_WIDTH_TINY}) { + &.isPadded > .ui--Column { + padding: 0 0.25rem; + } + } + } + > .ui--Column { box-sizing: border-box; max-width: 100%; diff --git a/packages/react-components/src/FilterOverlay.tsx b/packages/react-components/src/FilterOverlay.tsx index 7e98532e41..3962926f7c 100644 --- a/packages/react-components/src/FilterOverlay.tsx +++ b/packages/react-components/src/FilterOverlay.tsx @@ -4,8 +4,6 @@ import React from 'react'; import styled from 'styled-components'; -import media from './media'; - interface Props { children: React.ReactNode; className?: string; @@ -23,11 +21,19 @@ export default React.memo(styled(FilterOverlay)` display: none; right: calc(50% - var(--width-half) + 1.5rem); - ${media.DESKTOP` + .ui--Labelled label { + display: none; + } + + && .ui--Input { + margin: 0.29rem 0; + } + + @media only screen and (min-width: 1150px) { display: flex; justify-content: flex-end; position: absolute; - top: 0rem; + top: 0; > div { max-width: 35rem !important; @@ -40,18 +46,10 @@ export default React.memo(styled(FilterOverlay)` .ui.selection.dropdown { white-space: nowrap; } - `}; - - .ui--Labelled label { - display: none; - } - - && .ui--Input { - margin: 0.29rem 0; } /* hardcoded: var(--width-full) doesn't work in media */ - @media (max-width: 1750px) { + @media only screen and (max-width: 1750px) { right: 1.5rem; } `); diff --git a/packages/react-components/src/constants.ts b/packages/react-components/src/constants.ts index ee4b630148..0634cfb865 100644 --- a/packages/react-components/src/constants.ts +++ b/packages/react-components/src/constants.ts @@ -5,12 +5,6 @@ import type { ComponentMap } from '@polkadot/react-params/types'; import BalanceParam from '@polkadot/react-params/Param/Balance'; -export const ScreenSizes = { - DESKTOP: 992, - PHONE: 576, - TABLET: 768 -}; - export const rewardDestinationOptions = [ { text: 'Stash account (increase the amount at stake)', value: 0 }, { text: 'Stash account (do not increase the amount at stake)', value: 1 }, diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index 59255c36e8..f1a09c3cf5 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -104,5 +104,3 @@ export { default as TextArea } from './TextArea'; export { default as ExpandButton } from './ExpandButton'; export { default as SortDropdown } from './SortDropdown'; export { default as FilterInput } from './FilterInput'; - -export { default as media } from './media'; diff --git a/packages/react-components/src/media.ts b/packages/react-components/src/media.ts deleted file mode 100644 index dd929718b4..0000000000 --- a/packages/react-components/src/media.ts +++ /dev/null @@ -1,27 +0,0 @@ -// Copyright 2017-2023 @polkadot/react-components authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -import { css } from 'styled-components'; - -import { ScreenSizes } from './constants'; - -type MediaCss = { - [index in keyof typeof ScreenSizes]: (values: TemplateStringsArray) => any -}; - -const media = Object - .keys(ScreenSizes) - .reduce((acc: MediaCss, label: any): MediaCss => { - const size: number = ScreenSizes[label as 'TABLET']; - - acc[label as 'TABLET'] = (values: TemplateStringsArray): unknown => - css` - @media (min-width: ${size / 16}em) { - ${values} - } - `; - - return acc; - }, {} as unknown as MediaCss); - -export default media;