standaloneMedia added

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", {

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`

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;
-  }
+  `)}
 `

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;
-  }
+  `)}
 `

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;
-  }
+  `)}
 `

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 {

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};
+  }
+`