mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #4 from vector-im/bwindels/legacy-css

Browse source 
Make CSS compatible with IE11
This commit is contained in:
Bruno Windels 2020-08-07 16:18:37 +00:00 committed by GitHub
commit b9621d9b9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 73 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
package-lock.json generated
View file

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

2
package.json
View file

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

15
scripts/build.mjs
View file

@ -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) {

10
src/ui/web/css/main.css
View file

@ -22,14 +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;
}
.hiddenWithLayout {