From 7d413c6963efef27b2c248bdcc4a0a3260353a86 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Sun, 19 Jun 2022 21:40:41 +0300 Subject: [PATCH] standaloneMedia added --- web/.eslintrc | 1 + web/src/components/About/style.js | 5 +++-- web/src/components/App/PWAFooter/style.js | 7 ++++--- web/src/components/App/style.js | 21 +++++++++++---------- web/src/style/CustomMaterialUiStyles.js | 16 +++++++++------- web/src/style/GlobalStyle.js | 9 ++++++--- web/src/style/standaloneMedia.js | 7 +++++++ 7 files changed, 41 insertions(+), 25 deletions(-) create mode 100644 web/src/style/standaloneMedia.js diff --git a/web/.eslintrc b/web/.eslintrc index 5ff8941..344d47b 100644 --- a/web/.eslintrc +++ b/web/.eslintrc @@ -12,6 +12,7 @@ "endOfLine": "crlf" }], "import/no-anonymous-default-export": 0, // Allow "export default" + "import/prefer-default-export": 0, "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.js", "**/*.spec.js"]}], "react/jsx-one-expression-per-line": 0, "import/order": ["warn", { diff --git a/web/src/components/About/style.js b/web/src/components/About/style.js index c011e35..903bad6 100644 --- a/web/src/components/About/style.js +++ b/web/src/components/About/style.js @@ -1,4 +1,5 @@ import styled, { css } from 'styled-components' +import { standaloneMedia } from 'style/standaloneMedia' export const DialogWrapper = styled.div` height: 100%; @@ -27,9 +28,9 @@ export const HeaderSection = styled.section` } } - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` padding-top: 30px; - } + `)} ` export const ThanksSection = styled.section` diff --git a/web/src/components/App/PWAFooter/style.js b/web/src/components/App/PWAFooter/style.js index 5e5f0ed..52f8370 100644 --- a/web/src/components/App/PWAFooter/style.js +++ b/web/src/components/App/PWAFooter/style.js @@ -1,4 +1,5 @@ -import styled from 'styled-components' +import { standaloneMedia } from 'style/standaloneMedia' +import styled, { css } from 'styled-components' export const pwaFooterHeight = 90 @@ -12,9 +13,9 @@ export default styled.div` display: none; - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; - } + `)} ` diff --git a/web/src/components/App/style.js b/web/src/components/App/style.js index dbc8678..84428d8 100644 --- a/web/src/components/App/style.js +++ b/web/src/components/App/style.js @@ -1,5 +1,6 @@ import { IconButton } from '@material-ui/core' import { rgba } from 'polished' +import { standaloneMedia } from 'style/standaloneMedia' import styled, { css } from 'styled-components' import { pwaFooterHeight } from './PWAFooter/style' @@ -19,11 +20,11 @@ export const AppWrapper = styled.div` 'head head' 'side content'; - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` grid-template-columns: 0 1fr; grid-template-rows: ${pwaFooterHeight}px 1fr ${pwaFooterHeight}px; height: 100vh; - } + `)} `} ` @@ -46,14 +47,14 @@ export const AppHeader = styled.div` padding: 0 16px; z-index: 3; - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` grid-template-columns: max-content 1fr; align-items: end; padding: 7px 16px; position: fixed; width: 100%; height: ${pwaFooterHeight}px; - } + `)} `} ` export const AppSidebarStyle = styled.div` @@ -77,9 +78,9 @@ export const AppSidebarStyle = styled.div` fill: ${sidebarFillColor}; } - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` display: none; - } + `)} `} ` export const TorrentListWrapper = styled.div` @@ -106,10 +107,10 @@ export const TorrentListWrapper = styled.div` grid-template-columns: 1fr; } - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` height: calc(100vh - ${pwaFooterHeight}px); padding-bottom: 105px; - } + `)} ` export const HeaderToggle = styled.div` @@ -148,7 +149,7 @@ export const HeaderToggle = styled.div` export const StyledIconButton = styled(IconButton)` margin-right: 6px; - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` display: none; - } + `)} ` diff --git a/web/src/style/CustomMaterialUiStyles.js b/web/src/style/CustomMaterialUiStyles.js index 99f81a4..53ad621 100644 --- a/web/src/style/CustomMaterialUiStyles.js +++ b/web/src/style/CustomMaterialUiStyles.js @@ -1,12 +1,14 @@ import { ListItem } from '@material-ui/core' import Dialog from '@material-ui/core/Dialog' import { pwaFooterHeight } from 'components/App/PWAFooter/style' -import styled from 'styled-components' +import styled, { css } from 'styled-components' import { Header } from 'style/DialogStyles' import { isStandaloneApp } from 'utils/Utils' +import { standaloneMedia } from './standaloneMedia' + export const StyledMenuButtonWrapper = styled(ListItem).attrs({ button: true })` - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` width: 100%; height: 60px; display: flex; @@ -14,23 +16,23 @@ export const StyledMenuButtonWrapper = styled(ListItem).attrs({ button: true })` justify-content: center; align-items: center; font-size: 10px; - } + `)} ` export const StyledDialog = styled(Dialog).attrs({ ...(isStandaloneApp && { hideBackdrop: true, transitionDuration: 0 }), })` - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` margin-bottom: ${pwaFooterHeight}px; .MuiDialog-container .MuiPaper-root { box-shadow: none; } - } + `)} ` export const StyledHeader = styled(Header)` - @media screen and (display-mode: standalone) { + ${standaloneMedia(css` padding-top: 47px; - } + `)} ` diff --git a/web/src/style/GlobalStyle.js b/web/src/style/GlobalStyle.js index f22a69d..e4e1f89 100755 --- a/web/src/style/GlobalStyle.js +++ b/web/src/style/GlobalStyle.js @@ -1,4 +1,6 @@ -import { createGlobalStyle } from 'styled-components' +import { createGlobalStyle, css } from 'styled-components' + +import { standaloneMedia } from './standaloneMedia' export default createGlobalStyle` *, @@ -17,9 +19,10 @@ export default createGlobalStyle` letter-spacing: -0.1px; -webkit-tap-highlight-color: transparent; - @media screen and (display-mode: standalone) { + + ${standaloneMedia(css` height: 100vh; - } + `)} } button { diff --git a/web/src/style/standaloneMedia.js b/web/src/style/standaloneMedia.js new file mode 100644 index 0000000..df13ab8 --- /dev/null +++ b/web/src/style/standaloneMedia.js @@ -0,0 +1,7 @@ +import { css } from 'styled-components' + +export const standaloneMedia = styles => css` + @media screen and (display-mode: standalone) { + ${styles}; + } +`