fix: control the viewport, always show the headerbar, size app contai…

…ner (#267) * fix: control the viewport, always show the headerbar, size app container * chore: fix codestyle and yarn.lock * chore: use 100% width and height in generated App.js
dhis2 · Jan 16, 2020 · 3823d8a · 3823d8a
1 parent 756d92c
commit 3823d8a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 19 deletions.
diff --git a/adapter/src/index.js b/adapter/src/index.js
@@ -4,12 +4,19 @@ import { Provider } from '@dhis2/app-runtime'
 import { FatalErrorBoundary } from './FatalErrorBoundary'
 import { AuthBoundary } from './AuthBoundary'
 
+import { styles } from './styles.js'
+
 // eslint-disable-next-line react/prop-types
 const App = ({ url, apiVersion, appName, children }) => (
  <FatalErrorBoundary>
  <Provider config={{ baseUrl: url, apiVersion: apiVersion }}>
- <HeaderBar appName={appName} />
- <AuthBoundary url={url}>{children}</AuthBoundary>
+ <div className="app-shell-adapter">
+ <style jsx>{styles}</style>
+ <HeaderBar appName={appName} />
+ <AuthBoundary url={url}>
+ <div className="app-shell-app">{children}</div>
+ </AuthBoundary>
+ </div>
  </Provider>
  </FatalErrorBoundary>
 )

diff --git a/adapter/src/styles.js b/adapter/src/styles.js
@@ -0,0 +1,15 @@
+import css from 'styled-jsx/css'
+
+export const styles = css`
+ div.app-shell-adapter {
+ width: 100vw;
+ height: 100vh;
+
+ display: flex;
+ flex-direction: column;
+ }
+ div.app-shell-app {
+ flex: 1 1 auto;
+ overflow: auto;
+ }
+`
diff --git a/cli/config/init.entrypoint.js b/cli/config/init.entrypoint.js
@@ -12,11 +12,8 @@ const MyApp = () => (
  <div className="container">
  <style jsx>{`
  .container {
- position: absolute;
- top: 48px;
- bottom: 0px;
- left: 0px;
- right: 0px;
+ width: 100%;
+ height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

diff --git a/examples/simple-app/src/App.style.js b/examples/simple-app/src/App.style.js
@@ -2,11 +2,9 @@ import css from 'styled-jsx/css'
 
 export default css`
  div {
- position: absolute;
- top: 48px;
- bottom: 0;
- left: 0;
- right: 0;
+ width: 100%;
+ height: 100%;
+
  display: flex;
  flex-direction: column;
  align-items: center;

diff --git a/examples/simple-app/yarn.lock b/examples/simple-app/yarn.lock
@@ -1143,8 +1143,8 @@
  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
  integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@dhis2/app-adapter@3.1.3", "@dhis2/app-adapter@file:../../adapter":
- version "3.1.3"
+"@dhis2/app-adapter@3.2.0", "@dhis2/app-adapter@file:../../adapter":
+ version "3.2.0"
  dependencies:
  "@dhis2/ui-widgets" "^2.0.4"
  moment "^2.24.0"
@@ -1154,10 +1154,10 @@
  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-2.0.4.tgz#9ae202fef3313094aef33a3e38d2c6c5d799c808"
  integrity sha512-w5+C/fHSsuF0am5Tpvz53+tigEZzfz9ahkjXH3BiWxGVxwZGtdHjWfso1T5bJRiKhDTgf76TxIsQiC11W20WyA==
 
-"@dhis2/app-shell@3.1.3", "@dhis2/app-shell@file:../../shell":
- version "3.1.3"
+"@dhis2/app-shell@3.2.0", "@dhis2/app-shell@file:../../shell":
+ version "3.2.0"
  dependencies:
- "@dhis2/app-adapter" "3.1.3"
+ "@dhis2/app-adapter" "3.2.0"
  "@dhis2/app-runtime" "^2.0.4"
  "@dhis2/d2-i18n" "^1.0.5"
  "@dhis2/ui-core" "^4.6.1"
@@ -1173,7 +1173,7 @@
  typescript "^3.6.3"
 
 "@dhis2/cli-app-scripts@file:../../cli":
- version "3.1.3"
+ version "3.2.0"
  dependencies:
  "@babel/core" "^7.6.2"
  "@babel/plugin-proposal-class-properties" "^7.8.3"
@@ -1186,7 +1186,7 @@
  "@babel/preset-env" "^7.6.2"
  "@babel/preset-react" "^7.0.0"
  "@babel/preset-typescript" "^7.6.0"
- "@dhis2/app-shell" "3.1.3"
+ "@dhis2/app-shell" "3.2.0"
  "@dhis2/cli-helpers-engine" "^1.5.0"
  archiver "^3.1.1"
  babel-jest "^24.9.0"