more standalone styles added

web/src/components/App/PWAFooter/index.jsx

@@ -0,0 +1,31 @@
+import { CreditCard as CreditCardIcon } from '@material-ui/icons'
+import { useTranslation } from 'react-i18next'
+import CloseServer from 'components/CloseServer'
+import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import AddDialogButton from 'components/Add'
+import AboutDialog from 'components/About'
+import SettingsDialogButton from 'components/Settings'
+
+import StyledPWAFooter from './style'
+
+export default function PWAFooter({ setIsDonationDialogOpen, isOffline, isLoading }) {
+  const { t } = useTranslation()
+
+  return (
+    <StyledPWAFooter>
+      <CloseServer isOffline={isOffline} isLoading={isLoading} />
+
+      <StyledMenuButtonWrapper onClick={() => setIsDonationDialogOpen(true)}>
+        <CreditCardIcon />
+
+        <div>{t('Donate')}</div>
+      </StyledMenuButtonWrapper>
+
+      <AddDialogButton isOffline={isOffline} isLoading={isLoading} />
+
+      <AboutDialog />
+
+      <SettingsDialogButton isOffline={isOffline} isLoading={isLoading} />
+    </StyledPWAFooter>
+  )
+}

web/src/components/App/PWAFooter/style.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export default styled.div`
+  background: #575757;
+  color: #fff;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 90px;
+
+  display: none;
+
+  @media screen and (display-mode: standalone) {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    justify-items: center;
+  }
+`

web/src/components/App/index.jsx

@@ -1,7 +1,6 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { createContext, useEffect, useState } from 'react'
 import Typography from '@material-ui/core/Typography'
-import IconButton from '@material-ui/core/IconButton'
 import {
   Menu as MenuIcon,
   Close as CloseIcon,
@@ -21,11 +20,12 @@ import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-component
 import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
 import GlobalStyle from 'style/GlobalStyle'
+import { lightTheme, THEME_MODES, useMaterialUITheme } from 'style/materialUISetup'
+import getStyledComponentsTheme from 'style/getStyledComponentsTheme'
 
-import { AppWrapper, AppHeader, HeaderToggle } from './style'
+import { AppWrapper, AppHeader, HeaderToggle, StyledIconButton } from './style'
 import Sidebar from './Sidebar'
-import { lightTheme, THEME_MODES, useMaterialUITheme } from '../../style/materialUISetup'
-import getStyledComponentsTheme from '../../style/getStyledComponentsTheme'
+import PWAFooter from './PWAFooter'
 
 export const DarkModeContext = createContext()
 
@@ -63,14 +63,9 @@ export default function App() {
             <Div100vh>
               <AppWrapper>
                 <AppHeader>
-                  <IconButton
-                    edge='start'
-                    color='inherit'
-                    onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-                    style={{ marginRight: '6px' }}
-                  >
+                  <StyledIconButton edge='start' color='inherit' onClick={() => setIsDrawerOpen(!isDrawerOpen)}>
                     {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
-                  </IconButton>
+                  </StyledIconButton>
 
                   <Typography variant='h6' noWrap>
                     TorrServer {torrServerVersion}
@@ -118,6 +113,12 @@ export default function App() {
 
                 <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
 
+                <PWAFooter
+                  isOffline={isOffline}
+                  isLoading={isLoading}
+                  setIsDonationDialogOpen={setIsDonationDialogOpen}
+                />
+
                 <MuiThemeProvider theme={lightTheme}>
                   {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
                 </MuiThemeProvider>

web/src/components/App/style.js

@@ -1,3 +1,4 @@
+import { IconButton } from '@material-ui/core'
 import { rgba } from 'polished'
 import styled, { css } from 'styled-components'
 
@@ -15,6 +16,12 @@ export const AppWrapper = styled.div`
     grid-template-areas:
       'head head'
       'side content';
+
+    @media screen and (display-mode: standalone) {
+      grid-template-columns: 0 1fr;
+      grid-template-rows: 90px 1fr 90px;
+      height: 100vh;
+    }
   `}
 `
 
@@ -36,6 +43,15 @@ export const AppHeader = styled.div`
     box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
     padding: 0 16px;
     z-index: 3;
+
+    @media screen and (display-mode: standalone) {
+      grid-template-columns: max-content 1fr;
+      align-items: end;
+      padding: 7px 16px;
+      position: fixed;
+      width: 100%;
+      height: 90px;
+    }
   `}
 `
 export const AppSidebarStyle = styled.div`
@@ -58,6 +74,10 @@ export const AppSidebarStyle = styled.div`
     svg {
       fill: ${sidebarFillColor};
     }
+
+    @media screen and (display-mode: standalone) {
+      display: none;
+    }
   `}
 `
 export const TorrentListWrapper = styled.div`
@@ -83,6 +103,11 @@ export const TorrentListWrapper = styled.div`
   @media (max-width: 700px) {
     grid-template-columns: 1fr;
   }
+
+  @media screen and (display-mode: standalone) {
+    height: calc(100vh - 90px);
+    padding-bottom: 105px;
+  }
 `
 
 export const HeaderToggle = styled.div`
@@ -117,3 +142,11 @@ export const HeaderToggle = styled.div`
     }
   `}
 `
+
+export const StyledIconButton = styled(IconButton)`
+  margin-right: 6px;
+
+  @media screen and (display-mode: standalone) {
+    display: none;
+  }
+`