Skip to content

Commit b84519b

Browse files
kshetlinekshetline
authored
Android improvements, incompatible browser detection. (#15)
* Improved Android phone browser performances. * Add incompatible web browser detection.
1 parent ba6a632 commit b84519b

9 files changed

Lines changed: 123 additions & 12 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## 1.4.8
2+
3+
* Improved Android phone browser performances.
4+
* Add incompatible web browser detection.
5+
16
## 1.4.7
27

38
* Turned off minimization of CSS, as that seems to be related to unwanted page reloads in iOS Safari when changing from portrait to landscape mode.

‎angular.json‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,8 @@
5959
},
6060
"configurations": {
6161
"production": {
62-
"optimization": {
63-
"scripts": true,
64-
"fonts": true,
65-
"styles": false
66-
},
62+
"optimization": true,
63+
"sourceMap": true,
6764
"fileReplacements": [
6865
{
6966
"replace": "src/environments/environment.ts",

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "prague-clock",
3-
"version": "1.4.7",
3+
"version": "1.4.8",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve --configuration=development",

‎src/app/app.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ svg {
234234

235235
&.controls-collapsed {
236236
height: calc(max(var(--mfvh) - 16px, 320px));
237-
width: calc(max(var(--mfvh) - 16px, 320px));
237+
width: calc(min(max(var(--mfvh) - 16px, 320px), calc(100vw - 28px)));
238238
}
239239
}
240240

@@ -385,8 +385,8 @@ svg {
385385

386386
&.collapsed {
387387
margin-left: 0;
388-
min-width: 400px;
389-
width: 400px;
388+
min-width: 320px;
389+
width: 320px;
390390
}
391391

392392
i.pi-bars.collapsed {

‎src/assets/incompatible.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Pražský Orloj - Simulator incompatible with your web browser</title>
6+
<base href="./">
7+
<style>
8+
body {
9+
align-items: center;
10+
background: rgb(212,150,76);
11+
background: linear-gradient(90deg,
12+
rgba(212, 150, 76, 0.33) 0%, rgba(176, 186, 177, 0.33) 8%, rgba(140, 168, 167, 0.33) 17%, rgba(71, 153, 174, 0.33) 25%,
13+
rgba(24, 146, 178, 0.33) 33%, rgba(11, 138, 176, 0.33) 42%, rgba(18, 133, 174, 0.33) 50%, rgba(11, 138, 176, 0.33) 58%,
14+
rgba(24, 146, 178, 0.33) 67%, rgba(71, 153, 174, 0.33) 75%, rgba(140, 168, 167, 0.33) 83%, rgba(176, 186, 177, 0.33) 92%,
15+
rgba(212, 150, 76, 0.33) 100%);
16+
color: #444;
17+
display: flex;
18+
flex-direction: column;
19+
font: 14px Arial, Helvetica, sans-serif;
20+
margin: 1em;
21+
width: calc(100vw - 2em);
22+
}
23+
24+
.page {
25+
background: none;
26+
width: calc(min(800px, calc(100vw - 2em)));
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="page">
32+
<p>Your web browser does not have the capabilities needed to run the simulator.</p>
33+
<!-- cspell:disable -->
34+
<p>Váš webový prohlížeč nemá schopnosti potřebné ke spuštění simulátoru.</p>
35+
<p>Ihr Webbrowser verfügt nicht über die zum Ausführen des Simulators erforderlichen Funktionen.</p>
36+
<p>Su navegador web no tiene las capacidades necesarias para ejecutar el simulador.</p>
37+
<p>Votre navigateur Web n'a pas les capacités nécessaires pour exécuter le simulateur.</p>
38+
<a href="https://orloj.eu">orloj.eu</a>
39+
</div>
40+
</body>
41+
</html>

‎src/index.html‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,32 @@
1313
<meta property="og:image" content="https://shetline.com/orloj/assets/clock.jpg">
1414
<base href="/">
1515
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
16+
<meta name="mobile-web-app-capable" content="yes">
1617
<link rel="icon" type="image/x-icon" href="favicon.ico">
1718
<script>
18-
(() => {
19+
(function () {
20+
// Test browser feature support.
21+
// noinspection ES6ConvertVarToLetConst
22+
var success;
23+
24+
try {
25+
eval('// noinspection JSUnusedLocalSymbols\nlet a = `a`');
26+
eval('// noinspection JSUnusedLocalSymbols\nconst [x, y] = [1, 2]');
27+
eval('(y = 0) => -y');
28+
eval('Symbol("symbol")');
29+
eval('Array.from([])');
30+
eval('new Promise(resolve => resolve()).finally()');
31+
success = !!(''.startsWith && document.createElement('canvas').getContext('webgl2'));
32+
}
33+
catch (e) {
34+
success = false;
35+
}
36+
37+
if (!success) {
38+
location.href = location.origin + '/orloj/assets/incompatible.html';
39+
return;
40+
}
41+
1942
// Handle forwarding of settings from old site.
2043
if (!location.search)
2144
return;

‎src/main.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,42 @@ if (environment.production) {
88
enableProdMode();
99
}
1010

11+
const width = Math.min(window.innerWidth, document.documentElement.clientWidth);
12+
const height = Math.min(window.innerHeight, document.documentElement.clientHeight);
13+
14+
if (Math.min(width, height) < 428) {
15+
const viewport = document.querySelector('meta[name="viewport"]');
16+
17+
if (viewport) {
18+
viewport.setAttribute('content', 'width=device-width, initial-scale=0.95, minimum-scale=0.95, maximum-scale=0.95');
19+
}
20+
}
21+
22+
let screenOrientationSucceeded = false;
23+
let orientationChangeTimer: any;
24+
25+
function orientationChange(): void {
26+
if (orientationChangeTimer)
27+
clearTimeout(orientationChangeTimer);
28+
29+
document.body.classList.add('orientation-change');
30+
orientationChangeTimer = setTimeout(() => {
31+
orientationChangeTimer = undefined;
32+
document.body.classList.remove('orientation-change');
33+
}, 1000);
34+
}
35+
36+
try {
37+
if (screen.orientation) {
38+
screen.orientation.addEventListener('change', orientationChange);
39+
screenOrientationSucceeded = true;
40+
}
41+
}
42+
catch {}
43+
44+
if (!screenOrientationSucceeded) {
45+
window.addEventListener('orientationchange', orientationChange);
46+
}
47+
1148
platformBrowserDynamic().bootstrapModule(AppModule)
1249
.catch(err => console.error(err));

‎src/styles.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -278,3 +278,11 @@ span.p-menuitem-text {
278278
opacity: 1;
279279
}
280280
}
281+
282+
.orientation-changing {
283+
.controls, svg {
284+
transition-duration: unset !important;
285+
transition-property: unset !important;
286+
transition-timing-function: unset !important;
287+
}
288+
}

0 commit comments

Comments
 (0)