Skip to content

Commit cee4b89

Browse files
kshetlinekshetline
authored
Fix language submenu positioning for small mobile screens. (#16)
1 parent b84519b commit cee4b89

File tree

11 files changed

+204
-164
lines changed

11 files changed

+204
-164
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 1.4.9
2+
3+
* Fix language submenu positioning for small mobile screens.
4+
15
## 1.4.8
26

37
* Improved Android phone browser performances.

‎messages.xlf‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -248,14 +248,14 @@
248248
<source>Original SVG clock graphics by Jan Tošovský</source>
249249
<context-group purpose="location">
250250
<context context-type="sourcefile">src/app/app.component.html</context>
251-
<context context-type="linenumber">658</context>
251+
<context context-type="linenumber">663</context>
252252
</context-group>
253253
</trans-unit>
254254
<trans-unit id="7419523574846171274" datatype="html">
255255
<source>Change time</source>
256256
<context-group purpose="location">
257257
<context context-type="sourcefile">src/app/app.component.html</context>
258-
<context context-type="linenumber">661</context>
258+
<context context-type="linenumber">666</context>
259259
</context-group>
260260
</trans-unit>
261261
<trans-unit id="5441122631150042416" datatype="html">
@@ -269,210 +269,210 @@
269269
<source>Default</source>
270270
<context-group purpose="location">
271271
<context context-type="sourcefile">src/app/app.component.ts</context>
272-
<context context-type="linenumber">112</context>
272+
<context context-type="linenumber">113</context>
273273
</context-group>
274274
</trans-unit>
275275
<trans-unit id="8682509701325907552" datatype="html">
276276
<source>↔ Equinox/solstice</source>
277277
<context-group purpose="location">
278278
<context context-type="sourcefile">src/app/app.component.ts</context>
279-
<context context-type="linenumber">186</context>
279+
<context context-type="linenumber">189</context>
280280
</context-group>
281281
</trans-unit>
282282
<trans-unit id="3762481572658671790" datatype="html">
283283
<source>↔ Moon phase</source>
284284
<context-group purpose="location">
285285
<context context-type="sourcefile">src/app/app.component.ts</context>
286-
<context context-type="linenumber">188</context>
286+
<context context-type="linenumber">191</context>
287287
</context-group>
288288
</trans-unit>
289289
<trans-unit id="7956486165830795688" datatype="html">
290290
<source>↔ Sunrise/transit/sunset</source>
291291
<context-group purpose="location">
292292
<context context-type="sourcefile">src/app/app.component.ts</context>
293-
<context context-type="linenumber">190</context>
293+
<context context-type="linenumber">193</context>
294294
</context-group>
295295
</trans-unit>
296296
<trans-unit id="1281087965480534519" datatype="html">
297297
<source>Advanced options...</source>
298298
<context-group purpose="location">
299299
<context context-type="sourcefile">src/app/app.component.ts</context>
300-
<context context-type="linenumber">193</context>
300+
<context context-type="linenumber">196</context>
301301
</context-group>
302302
</trans-unit>
303303
<trans-unit id="2826581353496868063" datatype="html">
304304
<source>Language</source>
305305
<context-group purpose="location">
306306
<context context-type="sourcefile">src/app/app.component.ts</context>
307-
<context context-type="linenumber">197</context>
307+
<context context-type="linenumber">200</context>
308308
</context-group>
309309
</trans-unit>
310310
<trans-unit id="6195195247247362503" datatype="html">
311311
<source>Code on GitHub</source>
312312
<context-group purpose="location">
313313
<context context-type="sourcefile">src/app/app.component.ts</context>
314-
<context context-type="linenumber">199</context>
314+
<context context-type="linenumber">204</context>
315315
</context-group>
316316
</trans-unit>
317317
<trans-unit id="3825322612214091906" datatype="html">
318318
<source>Czech Horological Society site</source>
319319
<context-group purpose="location">
320320
<context context-type="sourcefile">src/app/app.component.ts</context>
321-
<context context-type="linenumber">201</context>
321+
<context context-type="linenumber">206</context>
322322
</context-group>
323323
</trans-unit>
324324
<trans-unit id="1316081974854732948" datatype="html">
325325
<source>About the real clock</source>
326326
<context-group purpose="location">
327327
<context context-type="sourcefile">src/app/app.component.ts</context>
328-
<context context-type="linenumber">202</context>
328+
<context context-type="linenumber">207</context>
329329
</context-group>
330330
</trans-unit>
331331
<trans-unit id="6726437050434882980" datatype="html">
332332
<source>https://en.wikipedia.org/wiki/Prague_astronomical_clock</source>
333333
<context-group purpose="location">
334334
<context context-type="sourcefile">src/app/app.component.ts</context>
335-
<context context-type="linenumber">203</context>
335+
<context context-type="linenumber">208</context>
336336
</context-group>
337337
<note priority="1" from="description">Language-specific Wikipedia URL</note>
338338
</trans-unit>
339339
<trans-unit id="8936045027758548398" datatype="html">
340340
<source>About this simulator</source>
341341
<context-group purpose="location">
342342
<context context-type="sourcefile">src/app/app.component.ts</context>
343-
<context context-type="linenumber">205</context>
343+
<context context-type="linenumber">210</context>
344344
</context-group>
345345
</trans-unit>
346346
<trans-unit id="399827913225042410" datatype="html">
347347
<source>Suppress onscreen keyboard</source>
348348
<context-group purpose="location">
349349
<context context-type="sourcefile">src/app/app.component.ts</context>
350-
<context context-type="linenumber">297</context>
350+
<context context-type="linenumber">303</context>
351351
</context-group>
352352
</trans-unit>
353353
<trans-unit id="2807800733729323332" datatype="html">
354354
<source>Yes</source>
355355
<context-group purpose="location">
356356
<context context-type="sourcefile">src/app/app.component.ts</context>
357-
<context context-type="linenumber">333</context>
357+
<context context-type="linenumber">339</context>
358358
</context-group>
359359
<note priority="1" from="description">for dialog button</note>
360360
</trans-unit>
361361
<trans-unit id="3542042671420335679" datatype="html">
362362
<source>No</source>
363363
<context-group purpose="location">
364364
<context context-type="sourcefile">src/app/app.component.ts</context>
365-
<context context-type="linenumber">334</context>
365+
<context context-type="linenumber">340</context>
366366
</context-group>
367367
<note priority="1" from="description">for dialog button</note>
368368
</trans-unit>
369369
<trans-unit id="4667575368715627831" datatype="html">
370370
<source>Turn off &quot;Track current time&quot; so you can edit the time?</source>
371371
<context-group purpose="location">
372372
<context context-type="sourcefile">src/app/app.component.ts</context>
373-
<context context-type="linenumber">946</context>
373+
<context context-type="linenumber">952</context>
374374
</context-group>
375375
</trans-unit>
376376
<trans-unit id="1653085740327060302" datatype="html">
377377
<source>Turn off &quot;Track current time&quot; and change the clock time?</source>
378378
<context-group purpose="location">
379379
<context context-type="sourcefile">src/app/app.component.ts</context>
380-
<context context-type="linenumber">1021</context>
380+
<context context-type="linenumber">1027</context>
381381
</context-group>
382382
</trans-unit>
383383
<trans-unit id="3304972143698843178" datatype="html">
384384
<source>Event</source>
385385
<context-group purpose="location">
386386
<context context-type="sourcefile">src/app/app.component.ts</context>
387-
<context context-type="linenumber">1062</context>
387+
<context context-type="linenumber">1068</context>
388388
</context-group>
389389
<context-group purpose="location">
390390
<context context-type="sourcefile">src/app/app.component.ts</context>
391-
<context context-type="linenumber">1066</context>
391+
<context context-type="linenumber">1072</context>
392392
</context-group>
393393
</trans-unit>
394394
<trans-unit id="5379240220330466138" datatype="html">
395395
<source>Event outside of <x id="PH" equiv-text="this.MIN_YEAR"/>-<x id="PH_1" equiv-text="this.MAX_YEAR"/> year range.</source>
396396
<context-group purpose="location">
397397
<context context-type="sourcefile">src/app/app.component.ts</context>
398-
<context context-type="linenumber">1063</context>
398+
<context context-type="linenumber">1069</context>
399399
</context-group>
400400
</trans-unit>
401401
<trans-unit id="7225188300874994693" datatype="html">
402402
<source>Sunrise</source>
403403
<context-group purpose="location">
404404
<context context-type="sourcefile">src/app/app.component.ts</context>
405-
<context context-type="linenumber">1073</context>
405+
<context context-type="linenumber">1079</context>
406406
</context-group>
407407
</trans-unit>
408408
<trans-unit id="6447558907113574235" datatype="html">
409409
<source>Sunset</source>
410410
<context-group purpose="location">
411411
<context context-type="sourcefile">src/app/app.component.ts</context>
412-
<context context-type="linenumber">1075</context>
412+
<context context-type="linenumber">1081</context>
413413
</context-group>
414414
</trans-unit>
415415
<trans-unit id="6054510843574670830" datatype="html">
416416
<source>Transit</source>
417417
<context-group purpose="location">
418418
<context context-type="sourcefile">src/app/app.component.ts</context>
419-
<context context-type="linenumber">1077</context>
419+
<context context-type="linenumber">1083</context>
420420
</context-group>
421421
</trans-unit>
422422
<trans-unit id="5740316636928173013" datatype="html">
423423
<source>Vernal equinox</source>
424424
<context-group purpose="location">
425425
<context context-type="sourcefile">src/app/app.component.ts</context>
426-
<context context-type="linenumber">1079</context>
426+
<context context-type="linenumber">1085</context>
427427
</context-group>
428428
</trans-unit>
429429
<trans-unit id="2020422354780153562" datatype="html">
430430
<source>Summer solstice</source>
431431
<context-group purpose="location">
432432
<context context-type="sourcefile">src/app/app.component.ts</context>
433-
<context context-type="linenumber">1081</context>
433+
<context context-type="linenumber">1087</context>
434434
</context-group>
435435
</trans-unit>
436436
<trans-unit id="7383670398589052638" datatype="html">
437437
<source>Autumnal equinox</source>
438438
<context-group purpose="location">
439439
<context context-type="sourcefile">src/app/app.component.ts</context>
440-
<context context-type="linenumber">1083</context>
440+
<context context-type="linenumber">1089</context>
441441
</context-group>
442442
</trans-unit>
443443
<trans-unit id="3382598256887949674" datatype="html">
444444
<source>Winter Solstice</source>
445445
<context-group purpose="location">
446446
<context context-type="sourcefile">src/app/app.component.ts</context>
447-
<context context-type="linenumber">1085</context>
447+
<context context-type="linenumber">1091</context>
448448
</context-group>
449449
</trans-unit>
450450
<trans-unit id="5087039501580395567" datatype="html">
451451
<source>New moon</source>
452452
<context-group purpose="location">
453453
<context context-type="sourcefile">src/app/app.component.ts</context>
454-
<context context-type="linenumber">1087</context>
454+
<context context-type="linenumber">1093</context>
455455
</context-group>
456456
</trans-unit>
457457
<trans-unit id="5246077877231873167" datatype="html">
458458
<source>First quarter</source>
459459
<context-group purpose="location">
460460
<context context-type="sourcefile">src/app/app.component.ts</context>
461-
<context context-type="linenumber">1089</context>
461+
<context context-type="linenumber">1095</context>
462462
</context-group>
463463
</trans-unit>
464464
<trans-unit id="315285506816329608" datatype="html">
465465
<source>Full moon</source>
466466
<context-group purpose="location">
467467
<context context-type="sourcefile">src/app/app.component.ts</context>
468-
<context context-type="linenumber">1091</context>
468+
<context context-type="linenumber">1097</context>
469469
</context-group>
470470
</trans-unit>
471471
<trans-unit id="409860942378561532" datatype="html">
472472
<source>Third quarter</source>
473473
<context-group purpose="location">
474474
<context context-type="sourcefile">src/app/app.component.ts</context>
475-
<context context-type="linenumber">1093</context>
475+
<context context-type="linenumber">1099</context>
476476
</context-group>
477477
</trans-unit>
478478
<trans-unit id="3251116876185403930" datatype="html">

‎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.8",
3+
"version": "1.4.9",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve --configuration=development",

‎src/app/app.component.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,11 @@
129129
</div>
130130
</div>
131131

132+
<div *ngIf="smallMobile" id="alt-language-menu" [style.display]="showLanguageMenu ? 'block' : 'none'">
133+
<i class="pi pi-times closer" (click)="showLanguageMenu = false"></i>
134+
<p-menu [model]="menuLanguageList"></p-menu>
135+
</div>
136+
132137
<div id="svg-wrapper"
133138
[class.post-2018]="appearance === CURRENT || appearance === CURRENT_NO_MAP"
134139
[class.orig-1410]="appearance === ORIGINAL_1410">

‎src/app/app.component.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ function formatTimeOfDay(hours: number | DateTime | DateAndTime, force24 = false
108108
}
109109

110110
const menuLanguageList: MenuItem[] = [];
111+
const smallMobile = isLikelyMobile() && (screen.width < 460 || screen.height < 460);
111112

112113
menuLanguageList.push({ label: $localize`Default`, url: basePath, target: '_self' });
113114
menuLanguageList.push({ separator: true });
@@ -130,9 +131,11 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
130131
FAST = PlaySpeed.FAST;
131132
MODERN = Timing.MODERN;
132133
MAX_YEAR = 2399;
134+
menuLanguageList = menuLanguageList;
133135
MIN_YEAR = 1400;
134136
NORMAL = PlaySpeed.NORMAL;
135137
ORIGINAL_1410 = Appearance.ORIGINAL_1410;
138+
smallMobile = smallMobile;
136139
SOUTH_NORTH = SOUTH_NORTH;
137140
specificLocale = specificLocale;
138141
toZodiac = (angle: number): string => '♈♉♊♋♌♍♎♏♐♑♒♓'.charAt(floor(mod(angle, 360) / 30)) + '\uFE0E';
@@ -194,7 +197,9 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
194197
this.collapsed = false;
195198
this.advancedOptions?.show();
196199
} },
197-
{ label: $localize`Language`, icon: 'pi pi-circle', items: menuLanguageList },
200+
{ label: $localize`Language` + (smallMobile ? '...' : ''), icon: 'pi pi-circle',
201+
items: smallMobile ? undefined : menuLanguageList,
202+
command: smallMobile ? (): boolean => this.showLanguageMenu = true : undefined },
198203
{ separator : true },
199204
{ label: $localize`Code on GitHub`, icon: 'pi pi-github', url: 'https://github.com/kshetline/prague-clock',
200205
target: '_blank' },
@@ -251,6 +256,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
251256
saturnAngle = ZeroAngles;
252257
showErrors = false;
253258
showInfoPanel = false;
259+
showLanguageMenu = false;
254260
siderealAngle = 0;
255261
siderealTime = '';
256262
siderealTimeOrloj = '';

0 commit comments

Comments
 (0)