mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
Merge pull request #4 from vector-im/bwindels/legacy-css
Make CSS compatible with IE11
This commit is contained in:
commit
b9621d9b9b
49
package-lock.json
generated
49
package-lock.json
generated
@ -1514,6 +1514,12 @@
|
|||||||
"homedir-polyfill": "^1.0.1"
|
"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": {
|
"finalhandler": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||||
@ -1957,6 +1963,49 @@
|
|||||||
"supports-color": "^6.1.0"
|
"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": {
|
"postcss-import": {
|
||||||
"version": "12.0.1",
|
"version": "12.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
|
||||||
|
@ -34,6 +34,8 @@
|
|||||||
"impunity": "^0.0.11",
|
"impunity": "^0.0.11",
|
||||||
"mdn-polyfills": "^5.20.0",
|
"mdn-polyfills": "^5.20.0",
|
||||||
"postcss": "^7.0.18",
|
"postcss": "^7.0.18",
|
||||||
|
"postcss-css-variables": "^0.17.0",
|
||||||
|
"postcss-flexbugs-fixes": "^4.2.1",
|
||||||
"postcss-import": "^12.0.1",
|
"postcss-import": "^12.0.1",
|
||||||
"regenerator-runtime": "^0.13.7",
|
"regenerator-runtime": "^0.13.7",
|
||||||
"rollup": "^1.15.6",
|
"rollup": "^1.15.6",
|
||||||
|
@ -33,6 +33,9 @@ import commonjs from '@rollup/plugin-commonjs';
|
|||||||
// multi-entry plugin so we can add polyfill file to main
|
// multi-entry plugin so we can add polyfill file to main
|
||||||
import multi from '@rollup/plugin-multi-entry';
|
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_ID = "hydrogen";
|
||||||
const PROJECT_SHORT_NAME = "Hydrogen";
|
const PROJECT_SHORT_NAME = "Hydrogen";
|
||||||
const PROJECT_NAME = "Hydrogen Chat";
|
const PROJECT_NAME = "Hydrogen Chat";
|
||||||
@ -67,10 +70,11 @@ async function build() {
|
|||||||
await buildHtml(version, bundleName);
|
await buildHtml(version, bundleName);
|
||||||
if (legacy) {
|
if (legacy) {
|
||||||
await buildJsLegacy(bundleName);
|
await buildJsLegacy(bundleName);
|
||||||
|
await buildCssLegacy();
|
||||||
} else {
|
} else {
|
||||||
await buildJs(bundleName);
|
await buildJs(bundleName);
|
||||||
}
|
|
||||||
await buildCss();
|
await buildCss();
|
||||||
|
}
|
||||||
if (offline) {
|
if (offline) {
|
||||||
await buildOffline(version, bundleName);
|
await buildOffline(version, bundleName);
|
||||||
}
|
}
|
||||||
@ -185,6 +189,15 @@ async function buildCss() {
|
|||||||
await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8");
|
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) {
|
function removeOrEnableScript(scriptNode, enable) {
|
||||||
if (enable) {
|
if (enable) {
|
||||||
|
@ -22,14 +22,20 @@ limitations under the License.
|
|||||||
@import url('avatar.css');
|
@import url('avatar.css');
|
||||||
@import url('spinner.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 {
|
.brawl {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
|
||||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: white;
|
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 {
|
.hiddenWithLayout {
|
||||||
|
Loading…
Reference in New Issue
Block a user