diff --git a/src/main/index.js b/src/main/index.js index 48580b9..b5bf913 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -35,9 +35,11 @@ const createWindow = async () => { frame: process.platform === 'darwin' ? false : true, show: false, title: pkg.productName, + autoHideMenuBar: true, webPreferences: { nodeIntegration: true, - scrollBounce: true + scrollBounce: true, + enableBlinkFeatures: 'OverlayScrollbars' } }) @@ -86,9 +88,7 @@ app.on('ready', () => { // add platform as class mainWindow.webContents.executeJavaScript( - `document.getElementsByTagName('html')[0].classList.add('${ - process.platform - }')` + `document.getElementsByTagName('html')[0].classList.add('${process.platform}')` ) }) }) diff --git a/src/renderer/App.css b/src/renderer/App.css index 1494821..ea9ad65 100644 --- a/src/renderer/App.css +++ b/src/renderer/App.css @@ -38,9 +38,6 @@ html.fullscreen { font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0, 'onum' 0, 'lnum' 0, 'dlig' 1; color: #303030; - display: flex; - flex-wrap: wrap; - justify-content: center; transform: translate3d(0, 0, 0); -webkit-app-region: drag; -webkit-user-select: none; @@ -69,29 +66,16 @@ a h1 { } .app { - padding: 5% 7%; + padding: 10% 7% 5% 7%; cursor: default; - height: calc(100vh - 5%); transition: .15s ease-out; width: 100%; + height: 100%; overflow-y: auto; } .darwin .app { - margin-top: 35px; -} - -.app > div, -.app > div > div { - width: 100%; - height: 100%; -} - -.app > div > div { - display: flex; - justify-content: center; - flex-wrap: wrap; - width: 100%; + padding-top: calc(35px + 10%); } .fullscreen.darwin .app { diff --git a/src/renderer/App.jsx b/src/renderer/App.jsx index 33b0c24..b04c4e6 100644 --- a/src/renderer/App.jsx +++ b/src/renderer/App.jsx @@ -1,6 +1,12 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { Router, Location, navigate } from '@reach/router' +import { + Router, + createMemorySource, + createHistory, + LocationProvider, + navigate +} from '@reach/router' import { webFrame, ipcRenderer } from 'electron' import posed, { PoseGroup } from 'react-pose' import Titlebar from './components/Titlebar' @@ -17,8 +23,13 @@ webFrame.setLayoutZoomLevelLimits(0, 0) const Animation = posed.div(defaultAnimation) +// Fix reach-router in packaged Electron +// https://github.com/reach/router/issues/25#issuecomment-394003652 +let source = createMemorySource('/') +let history = createHistory(source) + const PosedRouter = ({ children }) => ( - + {({ location }) => ( @@ -26,7 +37,7 @@ const PosedRouter = ({ children }) => ( )} - + ) PosedRouter.propTypes = { diff --git a/src/renderer/components/Ticker.css b/src/renderer/components/Ticker.css index dacbfed..67b2bc3 100644 --- a/src/renderer/components/Ticker.css +++ b/src/renderer/components/Ticker.css @@ -1,6 +1,5 @@ .ticker { margin-top: 3rem; - margin-bottom: 4rem; width: 100%; } diff --git a/src/renderer/index.js b/src/renderer/index.js index 4d5050c..631d13d 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -2,6 +2,7 @@ import React from 'react' import { render } from 'react-dom' import AppProvider from './store/AppProvider' import App from './App' +import pkg from '../../package.json' document.body.style.backgroundColor = '#141414' @@ -9,6 +10,7 @@ document.body.style.backgroundColor = '#141414' let root = document.createElement('div') root.id = 'root' document.body.appendChild(root) +document.title = pkg.productName render( diff --git a/src/renderer/screens/Home.css b/src/renderer/screens/Home.css index 71dbabb..d603c96 100644 --- a/src/renderer/screens/Home.css +++ b/src/renderer/screens/Home.css @@ -1,5 +1,4 @@ .main { - margin-top: 7vh; min-height: 222px; display: flex; align-items: center; @@ -28,7 +27,7 @@ .number-unit-wrap { display: grid; grid-gap: .5rem; - grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); justify-items: start; width: 100%; } diff --git a/src/renderer/screens/Preferences/index.css b/src/renderer/screens/Preferences/index.css index 1095292..2eade08 100644 --- a/src/renderer/screens/Preferences/index.css +++ b/src/renderer/screens/Preferences/index.css @@ -2,11 +2,11 @@ text-align: left; width: 100%; position: relative; - margin-top: 7vh; padding-bottom: 4rem; } .preferences__title { + width: 100%; font-size: 2.2rem; margin-top: -1rem; margin-bottom: 2rem; @@ -16,7 +16,7 @@ text-decoration: none; font-size: 2rem; position: absolute; - top: -1.5rem; + top: 0; right: 0; color: #8b98a9; }