Skip to content

Commit 2cd3be0

Browse files
kshetlinekshetline
authored
Added ability to open info display from collapsed control panel, iPad fixes, more (#19)
* Added ability to open info display from collapsed control panel. * Remove feature for displaying equatorial position - confusing, and not as useful as I thought. * Fix iOS keyboard input bug. * Enable "Suppress onscreen keyboard" option even when iOS is requesting a desktop version of the website.
1 parent ba085a3 commit 2cd3be0

File tree

14 files changed

+1645
-1555
lines changed

14 files changed

+1645
-1555
lines changed

‎CHANGELOG.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
## 1.6.1
2+
3+
* Added ability to open info display from collapsed control panel.
4+
* Remove feature for displaying equatorial position - confusing, and not as useful as I thought.
5+
* Fix iOS keyboard input bug.
6+
* Enable "Suppress onscreen keyboard" option even when iOS is requesting a desktop version of the website.
7+
8+
## 1.6.0
9+
10+
* Add option for sun/moon hour angle markers.
11+
112
## 1.5.0
213

314
* Add new "Sun constrained by hour hand".

‎messages.xlf‎

Lines changed: 89 additions & 89 deletions
Large diffs are not rendered by default.

‎package-lock.json‎

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

‎package.json‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "prague-clock",
3-
"version": "1.5.0",
3+
"version": "1.6.1",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve --configuration=development",
@@ -33,44 +33,44 @@
3333
"@fortawesome/free-solid-svg-icons": "^6.1.1",
3434
"@tubular/astronomy": "^3.1.0",
3535
"@tubular/math": "^3.1.0",
36-
"@tubular/ng-widgets": "^2.1.1",
36+
"@tubular/ng-widgets": "^2.1.2",
3737
"@tubular/time": "^3.8.1",
38-
"@tubular/util": "^4.7.1",
38+
"@tubular/util": "^4.9.1",
3939
"primeicons": "^5.0.0",
4040
"primeng": "^13.3.3",
4141
"rxjs": "~7.5.0",
42-
"three": "^0.138.3",
43-
"tslib": "^2.3.0",
44-
"zone.js": "~0.11.4"
42+
"three": "^0.140.0",
43+
"tslib": "^2.4.0",
44+
"zone.js": "~0.11.5"
4545
},
4646
"devDependencies": {
4747
"@angular-devkit/build-angular": "~13.2.5",
48-
"@angular-eslint/eslint-plugin": "^13.1.0",
49-
"@angular-eslint/eslint-plugin-template": "^13.1.0",
50-
"@angular-eslint/template-parser": "^13.1.0",
48+
"@angular-eslint/eslint-plugin": "^13.2.1",
49+
"@angular-eslint/eslint-plugin-template": "^13.2.1",
50+
"@angular-eslint/template-parser": "^13.2.1",
5151
"@angular/cli": "~13.2.5",
5252
"@angular/compiler-cli": "~13.2.0",
5353
"@angular/localize": "^13.2.7",
54-
"@types/jasmine": "~3.10.0",
55-
"@types/node": "^12.11.1",
56-
"@types/three": "^0.138.0",
57-
"@typescript-eslint/eslint-plugin": "^5.9.1",
58-
"@typescript-eslint/parser": "^5.9.1",
54+
"@types/jasmine": "~3.10.6",
55+
"@types/node": "^12.20.50",
56+
"@types/three": "^0.139.0",
57+
"@typescript-eslint/eslint-plugin": "^5.21.0",
58+
"@typescript-eslint/parser": "^5.21.0",
5959
"eslint": "^7.32.0",
6060
"eslint-config-standard": "^16.0.3",
61-
"eslint-plugin-import": "^2.25.4",
61+
"eslint-plugin-import": "^2.26.0",
6262
"eslint-plugin-jasmine": "^4.1.3",
6363
"eslint-plugin-node": "^11.1.0",
6464
"jasmine-core": "~4.0.0",
65-
"karma": "~6.3.0",
66-
"karma-chrome-launcher": "~3.1.0",
67-
"karma-coverage": "~2.1.0",
68-
"karma-jasmine": "~4.0.0",
65+
"karma": "~6.3.19",
66+
"karma-chrome-launcher": "~3.1.1",
67+
"karma-coverage": "~2.2.0",
68+
"karma-jasmine": "~4.0.2",
6969
"karma-jasmine-html-reporter": "~1.7.0",
70-
"postcss-scss": "^4.0.3",
71-
"stylelint": "^14.6.1",
70+
"postcss-scss": "^4.0.4",
71+
"stylelint": "^14.8.1",
7272
"stylelint-config-standard": "^25.0.0",
7373
"stylelint-scss": "^4.2.0",
74-
"typescript": "~4.5.2"
74+
"typescript": "~4.5.5"
7575
}
7676
}

‎src/app/app.component.html‎

Lines changed: 607 additions & 601 deletions
Large diffs are not rendered by default.

‎src/app/app.component.scss‎

Lines changed: 100 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
@import "../colors";
22

3-
:host {
3+
.wrapper {
44
box-sizing: border-box;
55
display: grid;
66
font-family: Horologium, NoEmojiAstronomy, sans-serif;
77
gap: 12px;
8-
grid-template-columns: 1fr auto;
8+
grid-template-columns: 1fr 400px;
99
min-height: var(--mfvh);
1010
place-items: center;
1111
padding: 8px;
12+
13+
&.collapsed {
14+
grid-template-columns: 1fr 160px;
15+
}
16+
17+
&.narrow {
18+
grid-template-columns: 1fr auto;
19+
}
1220
}
1321

1422
p-toast, p-confirmDialog {
@@ -25,6 +33,7 @@ p-toast, p-confirmDialog {
2533
font: 14px Arial, sans-serif;
2634
gap: 4px;
2735
grid-area: 1 / 2;
36+
justify-self: end;
2837
min-height: 400px;
2938
min-width: 400px;
3039
padding: 1em 0.5em;
@@ -134,17 +143,40 @@ p-toast, p-confirmDialog {
134143
}
135144

136145
i.pi-info-circle {
146+
background: inherit;
137147
bottom: 0;
138148
cursor: pointer;
149+
display: block;
139150
padding: 0.5em;
140151
position: absolute;
141152
right: 0;
142-
opacity: 1;
143-
transition: opacity 0.5s ease-in-out;
144153

145154
&.collapsed {
146-
opacity: 0;
147-
pointer-events: none;
155+
padding: 0.5em 0 0.5em 0.5em;
156+
right: 1.5em;
157+
top: 0;
158+
width: 2em;
159+
}
160+
}
161+
162+
.time-text {
163+
background: inherit;
164+
bottom: 0;
165+
display: none;
166+
font: 14px Verdana, sans-serif;
167+
font-variant-numeric: tabular-nums;
168+
padding: 0.5em 0 0.5em 0.5em;
169+
position: absolute;
170+
right: 4em;
171+
top: 0;
172+
white-space: nowrap;
173+
174+
&.collapsed {
175+
display: block;
176+
}
177+
178+
&.track-time {
179+
color: #0A0;
148180
}
149181
}
150182

@@ -176,27 +208,6 @@ p-toast, p-confirmDialog {
176208
margin: 0.5em 0;
177209
}
178210

179-
.time-text {
180-
background: inherit;
181-
bottom: 0;
182-
display: none;
183-
font: 14px Verdana, sans-serif;
184-
font-variant-numeric: tabular-nums;
185-
padding: 0.5em 0 0.5em 0.5em;
186-
position: absolute;
187-
right: 2em;
188-
top: 0;
189-
white-space: nowrap;
190-
191-
&.collapsed {
192-
display: block;
193-
}
194-
195-
&.track-time {
196-
color: #0A0;
197-
}
198-
}
199-
200211
#now {
201212
margin: -4px 0;
202213
}
@@ -235,11 +246,23 @@ svg {
235246
&.controls-collapsed {
236247
height: calc(max(var(--mfvh) - 16px, 320px));
237248
width: calc(min(max(var(--mfvh) - 16px, 320px), calc(100vw - 28px)));
249+
250+
&.show-info-panel {
251+
height: calc(min(max(var(--mfvh) - 16px, 320px), calc(100vw - 200px)));
252+
width: calc(min(max(var(--mfvh) - 16px, 320px), calc(100vw - 200px)));
253+
}
238254
}
239255
}
240256

241257
#svg-wrapper {
258+
align-self: start;
259+
justify-self: start;
242260
position: relative;
261+
262+
&.wide {
263+
align-self: center;
264+
justify-self: center;
265+
}
243266
}
244267

245268
.svg-overlay {
@@ -250,12 +273,24 @@ svg {
250273
top: 0;
251274
}
252275

276+
.info-panel-overlay {
277+
font-size: calc(14px * var(--font-scaler));
278+
position: static;
279+
280+
&.expanded {
281+
bottom: 0.5em;
282+
position: fixed;
283+
right: 0.5em;
284+
}
285+
}
286+
253287
.info-panel {
254288
background-color: $controls-background;
255289
border: 1px solid #999;
256290
box-sizing: border-box;
257291
color: $controls-text;
258-
font: 14px NoEmojiAstronomy, Arial, sans-serif;
292+
font-size: 1em;
293+
font-family: NoEmojiAstronomy, Arial, sans-serif;
259294
max-width: 400px;
260295
padding: 0.5em 2.5em 0.5em 0.5em;
261296
position: relative;
@@ -274,19 +309,19 @@ svg {
274309

275310
.num {
276311
color: #64B5F6;
277-
font: 12.5px NoEmojiAstronomy, Verdana, sans-serif;
278-
min-width: 52px;
312+
font: 0.9em NoEmojiAstronomy, Verdana, sans-serif;
313+
min-width: 4.2em;
279314
white-space: nowrap;
280315
}
281316

282317
.diff {
283318
color: #F63;
284-
font: 12.5px Verdana, sans-serif;
319+
font: 0.9em Verdana, sans-serif;
285320
white-space: nowrap;
286321
}
287322

288323
.wide {
289-
min-width: 125px;
324+
min-width: 10.5em;
290325
}
291326

292327
.recalibration {
@@ -308,12 +343,6 @@ svg {
308343
}
309344
}
310345

311-
.svg-info-overlay {
312-
bottom: 8px;
313-
position: fixed;
314-
right: 8px;
315-
}
316-
317346
.below-control-panel {
318347
position: absolute;
319348
right: 0;
@@ -342,14 +371,9 @@ svg {
342371
margin: -2px;
343372
}
344373
}
345-
346-
.info-panel {
347-
margin: -20px 13px;
348-
transform: scale(0.9);
349-
}
350374
}
351375

352-
@media screen and (max-height: 820px) {
376+
@media screen and (max-height: 600px) {
353377
.info-panel {
354378
bottom: 8px;
355379
left: unset;
@@ -368,22 +392,27 @@ svg {
368392
margin: -4px -40px;
369393
}
370394
}
371-
372-
.info-panel {
373-
margin: -40px 26px;
374-
transform: scale(0.8);
375-
}
376395
}
377396

378397
@media screen and (orientation: portrait) {
379-
:host {
398+
.wrapper {
380399
grid-template-columns: auto;
381-
grid-template-rows: auto 1fr;
400+
grid-template-rows: auto 1fr auto;
382401
overflow: auto;
402+
403+
&.collapsed, &.narrow {
404+
grid-template-columns: auto;
405+
}
406+
}
407+
408+
#svg-wrapper {
409+
align-self: center;
410+
justify-self: center;
383411
}
384412

385413
.controls {
386414
grid-area: unset;
415+
justify-self: center;
387416

388417
&.collapsed {
389418
margin-left: 0;
@@ -405,12 +434,17 @@ svg {
405434

406435
svg {
407436
grid-area: unset;
408-
height: calc(min(calc(100vw - 16px), calc(var(--mfvh) - 428px)));
409-
width: calc(min(calc(100vw - 16px), calc(var(--mfvh) - 428px)));
437+
height: calc(min(calc(100vw - 16px), calc(var(--mfvh) - 440px)));
438+
width: calc(min(calc(100vw - 16px), calc(var(--mfvh) - 440px)));
410439

411440
&.controls-collapsed {
412441
height: calc(max(min(var(--mfvh) - 28px - 2.25em, 100vw - 16px), 320px));
413442
width: calc(max(min(var(--mfvh) - 28px - 2.25em, 100vw - 16px), 320px));
443+
444+
&.show-info-panel {
445+
height: calc(max(min(var(--mfvh) - 40px - calc(260px * var(--font-scaler)) - 2.25em, 100vw - 16px), 320px));
446+
width: calc(max(min(var(--mfvh) - 40px - calc(260px * var(--font-scaler)) - 2.25em, 100vw - 16px), 320px));
447+
}
414448
}
415449
}
416450

@@ -420,8 +454,17 @@ svg {
420454
}
421455

422456
@media screen and (orientation: landscape) {
423-
.svg-info-overlay {
424-
display: none;
457+
.info-panel-overlay {
458+
bottom: 0.5em;
459+
position: fixed;
460+
right: 0.5em;
461+
}
462+
}
463+
464+
@media screen and (orientation: landscape) and (min-width: 740px) {
465+
#svg-wrapper {
466+
align-self: center;
467+
justify-self: center;
425468
}
426469
}
427470

@@ -808,7 +851,7 @@ svg {
808851
}
809852

810853
.handSymbol {
811-
fill: #DCC393;
854+
fill: #D6BD90;
812855
}
813856

814857
.eclipticSymbol,
@@ -820,7 +863,7 @@ svg {
820863

821864
.sunBeamLargeSymbol,
822865
.sunBeamSmallSymbol {
823-
fill: #DFC388;
866+
fill: #D9BD88;
824867
}
825868

826869
.baseCircle,

0 commit comments

Comments
 (0)