From b1dd3933e276b229c65af27e0a72afdc3a178584 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 7 Aug 2020 11:16:46 +0100 Subject: [PATCH 1/3] WIP --- src/ui/web/css/layout.css | 4 ++-- src/ui/web/css/left-panel.css | 2 +- src/ui/web/css/main.css | 2 ++ 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index b49955ec..feafbb59 100644 --- a/src/ui/web/css/layout.css +++ b/src/ui/web/css/layout.css @@ -51,7 +51,7 @@ body { } .RoomPlaceholderView, .RoomView { - flex: 1 0 0; + flex: 1 0 0px; min-width: 0; } @@ -71,7 +71,7 @@ body { } .TimelinePanel ul { - flex: 1 0 0; + flex: 1 0 0px; } .RoomHeader { diff --git a/src/ui/web/css/left-panel.css b/src/ui/web/css/left-panel.css index e8f82cc5..443ffaeb 100644 --- a/src/ui/web/css/left-panel.css +++ b/src/ui/web/css/left-panel.css @@ -49,7 +49,7 @@ limitations under the License. .LeftPanel div.description { margin: 0; - flex: 1 1 0; + flex: 1 1 0px; min-width: 0; } diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css index 7565d353..56f51fc0 100644 --- a/src/ui/web/css/main.css +++ b/src/ui/web/css/main.css @@ -30,6 +30,8 @@ limitations under the License. color: white; /* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */ overscroll-behavior: none; + /* disable rubberband scrolling on document in IE11 */ + overflow: hidden; } .hiddenWithLayout { From eb92b9a0865a9d8879c09e0d8374c482bb5cb93b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 7 Aug 2020 18:15:17 +0100 Subject: [PATCH 2/3] Disable rubberband scrolling for IE11 --- src/ui/web/css/layout.css | 4 ++-- src/ui/web/css/left-panel.css | 2 +- src/ui/web/css/main.css | 12 ++++++++---- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index feafbb59..b49955ec 100644 --- a/src/ui/web/css/layout.css +++ b/src/ui/web/css/layout.css @@ -51,7 +51,7 @@ body { } .RoomPlaceholderView, .RoomView { - flex: 1 0 0px; + flex: 1 0 0; min-width: 0; } @@ -71,7 +71,7 @@ body { } .TimelinePanel ul { - flex: 1 0 0px; + flex: 1 0 0; } .RoomHeader { diff --git a/src/ui/web/css/left-panel.css b/src/ui/web/css/left-panel.css index 443ffaeb..e8f82cc5 100644 --- a/src/ui/web/css/left-panel.css +++ b/src/ui/web/css/left-panel.css @@ -49,7 +49,7 @@ limitations under the License. .LeftPanel div.description { margin: 0; - flex: 1 1 0px; + flex: 1 1 0; min-width: 0; } diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css index 56f51fc0..d83b6a66 100644 --- a/src/ui/web/css/main.css +++ b/src/ui/web/css/main.css @@ -22,16 +22,20 @@ limitations under the License. @import url('avatar.css'); @import url('spinner.css'); +/* only if the body contains the whole app (e.g. we're not embedded in a page), make some changes */ +body.brawl { + /* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */ + overscroll-behavior: none; + /* disable rubberband scrolling on document in IE11 */ + overflow: hidden; +} + .brawl { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; background-color: black; color: white; - /* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */ - overscroll-behavior: none; - /* disable rubberband scrolling on document in IE11 */ - overflow: hidden; } .hiddenWithLayout { From ab3c7b7d1f76fb1a0fc6312d778e4ecf4292022d Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 7 Aug 2020 18:15:53 +0100 Subject: [PATCH 3/3] Use postcss plugins to fix flexbox bugs in IE11 and lack of css vars --- package-lock.json | 49 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ scripts/build.mjs | 15 ++++++++++++++- 3 files changed, 65 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index d4ef09d8..31b195a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1514,6 +1514,12 @@ "homedir-polyfill": "^1.0.1" } }, + "extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "dev": true + }, "finalhandler": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", @@ -1957,6 +1963,49 @@ "supports-color": "^6.1.0" } }, + "postcss-css-variables": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.17.0.tgz", + "integrity": "sha512-/ZpFnJgksNOrQA72b3DKhExYh+0e2P5nEc3aPZ62G7JLmdDjWRFv3k/q4LxV7uzXFnmvkhXRbdVIiH5tKgfFNA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0", + "escape-string-regexp": "^1.0.3", + "extend": "^3.0.1", + "postcss": "^6.0.8" + }, + "dependencies": { + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "postcss-flexbugs-fixes": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz", + "integrity": "sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==", + "dev": true, + "requires": { + "postcss": "^7.0.26" + } + }, "postcss-import": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz", diff --git a/package.json b/package.json index 9cef3338..f44d51a6 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,8 @@ "impunity": "^0.0.11", "mdn-polyfills": "^5.20.0", "postcss": "^7.0.18", + "postcss-css-variables": "^0.17.0", + "postcss-flexbugs-fixes": "^4.2.1", "postcss-import": "^12.0.1", "regenerator-runtime": "^0.13.7", "rollup": "^1.15.6", diff --git a/scripts/build.mjs b/scripts/build.mjs index d5858082..b872f71a 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -33,6 +33,9 @@ import commonjs from '@rollup/plugin-commonjs'; // multi-entry plugin so we can add polyfill file to main import multi from '@rollup/plugin-multi-entry'; +import cssvariables from "postcss-css-variables"; +import flexbugsFixes from "postcss-flexbugs-fixes"; + const PROJECT_ID = "hydrogen"; const PROJECT_SHORT_NAME = "Hydrogen"; const PROJECT_NAME = "Hydrogen Chat"; @@ -67,10 +70,11 @@ async function build() { await buildHtml(version, bundleName); if (legacy) { await buildJsLegacy(bundleName); + await buildCssLegacy(); } else { await buildJs(bundleName); + await buildCss(); } - await buildCss(); if (offline) { await buildOffline(version, bundleName); } @@ -185,6 +189,15 @@ async function buildCss() { await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8"); } +async function buildCssLegacy() { + // create css bundle + const cssMainFile = path.join(projectDir, "src/ui/web/css/main.css"); + const preCss = await fs.readFile(cssMainFile, "utf8"); + const cssBundler = postcss([postcssImport, cssvariables(), flexbugsFixes()]); + const result = await cssBundler.process(preCss, {from: cssMainFile}); + await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8"); +} + function removeOrEnableScript(scriptNode, enable) { if (enable) {