Skip to content

Commit 8d8a948

Browse files
vicbvicb
committed
Add ozone logo
1 parent 500d49c commit 8d8a948

File tree

6 files changed

+56
-6
lines changed

6 files changed

+56
-6
lines changed

‎frontend/src/viewer/components/2d/map-element.ts

+9
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export class MapElement extends connect(store)(LitElement) {
8585
private centerMap = false;
8686
private lockPanBefore = 0;
8787
private subscriptions: UnsubscribeHandle[] = [];
88+
private readonly adRatio = store.getState().browser.isSmallScreen ? 0.7 : 1;
8889

8990
stateChanged(state: RootState): void {
9091
this.tracks = sel.tracks(state);
@@ -161,6 +162,14 @@ export class MapElement extends connect(store)(LitElement) {
161162
controls.map = this.map;
162163
this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controls);
163164

165+
const ad = document.createElement('a');
166+
ad.setAttribute('href', 'https://www.flyozone.com/');
167+
ad.setAttribute('target', '_blank');
168+
ad.innerHTML = `<img width="${Math.round(210 * this.adRatio)}" height="${Math.round(
169+
35 * this.adRatio,
170+
)}" src="img/ozone.svg">`;
171+
this.map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(ad);
172+
164173
this.map.addListener('click', (e: google.maps.MouseEvent) => {
165174
const latLng = e.latLng;
166175
const found = findClosestFix(this.tracks, latLng.lat(), latLng.lng());

‎frontend/src/viewer/components/2d/planner-element.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export class PlannerElement extends connect(store)(LitElement) {
107107
return html`
108108
<style>
109109
.control > div {
110-
display: ${this.hideDetails ? 'block' : 'none'};
110+
display: ${this.hideDetails ? 'none' : 'block'};
111111
}
112112
</style>
113113
<div class="control">

‎frontend/src/viewer/components/3d/map3d-element.ts

+16
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export class Map3dElement extends connect(store)(LitElement) {
5656
private updateCamera = false;
5757
private originalQuality = 'medium';
5858
private qualityTimer?: number;
59+
private readonly adRatio = store.getState().browser.isSmallScreen ? 0.7 : 1;
5960

6061
stateChanged(state: RootState): void {
6162
this.tracks = sel.tracks(state);
@@ -136,6 +137,15 @@ export class Map3dElement extends connect(store)(LitElement) {
136137
const controls = document.createElement('controls3d-element');
137138
this.view.ui.add(controls, 'top-right');
138139

140+
const ad = document.createElement('a');
141+
ad.setAttribute('href', 'https://www.flyozone.com/');
142+
ad.setAttribute('target', '_blank');
143+
ad.className = 'ad';
144+
ad.innerHTML = `<img width="${Math.round(210 * this.adRatio)}" height="${Math.round(
145+
35 * this.adRatio,
146+
)}" src="img/ozone.svg">`;
147+
this.view.ui.add(ad);
148+
139149
const layerSwitcher = this.renderRoot.querySelector('#layers') as HTMLSelectElement;
140150
this.view.ui.add(layerSwitcher, 'top-left');
141151
this.view.ui.move([layerSwitcher, 'compass', 'navigation-toggle'], 'top-left');
@@ -296,6 +306,12 @@ export class Map3dElement extends connect(store)(LitElement) {
296306
#layers {
297307
font: 18px Roboto, arial, sans-serif !important;
298308
}
309+
.ad {
310+
box-shadow: none;
311+
bottom: 10px;
312+
left: 50%;
313+
transform: translate(-50%, 0);
314+
}
299315
</style>
300316
<div id="map"></div>
301317
<select id="layers" @change=${(e: any) => this.map?.set('basemap', this.basemaps[e.target.value])}>

‎frontend/src/viewer/components/loader-element.ts

+28-4
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class LoaderElement extends LitElement {
1515
height: 100%;
1616
}
1717
#bkg {
18-
background-color: #111;
18+
background-color: #222;
1919
opacity: 0.99;
2020
width: 100%;
2121
height: 100%;
@@ -39,18 +39,42 @@ export class LoaderElement extends LitElement {
3939
protected render(): TemplateResult {
4040
return html`
4141
<div id="bkg">
42-
<svg id="bat" viewBox="0 0 512 512" preserveAspectRatio="xMaxYMax meet">
42+
<svg id="bat" preserveAspectRatio="xMidYMax meet" viewBox="0 -14 512 295">
4343
<path
4444
fill="#fa8c00"
45-
d="M390 169.3c-20.1 7.3-31.9 16.2-35.5 19.2C342.4 252 310.7 274 286 281a5.4 5.4 0 0 1-6.8-4.1c-.2-.7-.2-.9.2-25.3l-12.3 8.4c-1 .7-2.3 1-3.5 1h-15.4c-1.2 0-2.5-.3-3.5-1l-12.3-8.4c.4 24.4.3 24.6.2 25.3a5.4 5.4 0 0 1-6.8 4.1c-24.6-7.1-56.3-29-68.4-92.5-3.6-3-15.4-11.9-35.6-19.2-21-7.5-55.2-14.6-102.7-8.2a118.3 118.3 0 0 1 41 93.2 101 101 0 0 1 34.8 6.6c18 7 40.5 22.6 50.3 57.3 10.9-8.7 27.8-12.6 53.8-12.6a60.8 60.8 0 0 1 48 22.5 72 72 0 0 1 8.8 13.5c2.3-4.5 5.3-9.2 8.9-13.5a60.8 60.8 0 0 1 48-22.5c26 0 43 4 54 12.7A82.2 82.2 0 0 1 417 261a101 101 0 0 1 34.8-6.6 118.3 118.3 0 0 1 41-93.2c-47.5-6.4-81.8.7-102.7 8.2z"
45+
d="M390 7.43c-20.1 7.3-31.9 16.2-35.5 19.2-12.1 63.5-43.8 85.5-68.5 92.5a5.4 5.4 0 01-6.8-4.1c-.2-.7-.2-.9.2-25.3l-12.3 8.4c-1 .7-2.3 1-3.5 1h-15.4c-1.2 0-2.5-.3-3.5-1l-12.3-8.4c.4 24.4.3 24.6.2 25.3a5.4 5.4 0 01-6.8 4.1c-24.6-7.1-56.3-29-68.4-92.5-3.6-3-15.4-11.9-35.6-19.2-21-7.5-55.2-14.6-102.7-8.2a118.3 118.3 0 0141 93.2c11.9.14 23.68 2.37 34.8 6.6 18 7 40.5 22.6 50.3 57.3 10.9-8.7 27.8-12.6 53.8-12.6a60.8 60.8 0 0148 22.5 71.9 71.9 0 018.8 13.5c2.3-4.5 5.3-9.2 8.9-13.5a60.8 60.8 0 0148-22.5c26 0 43 4 54 12.7a82.2 82.2 0 0150.3-57.3 101 101 0 0134.8-6.6 118.3 118.3 0 0141-93.2c-47.5-6.4-81.8.7-102.7 8.2z"
4646
/>
4747
<path
48-
d="M507.5 152.4c-57-10.2-97.7-1.8-121.8 7a120.2 120.2 0 0 0-40 22.4c-.8.7-1.4 1.8-1.6 2.9-9.7 53.3-33.4 75-54 83.4l.5-26.8a5.4 5.4 0 0 0-8.5-4.6L262.5 250h-13l-19.6-13.3a5.4 5.4 0 0 0-8.5 4.6l.5 26.8c-20.6-8.5-44.3-30.1-54-83.4a5.4 5.4 0 0 0-1.6-3c-.6-.5-13.4-12.7-40-22.3-24.1-8.8-64.9-17.2-121.8-7a5.4 5.4 0 0 0-1.8 10 95 95 0 0 1 24.9 23.1c16 20.8 23.2 45.7 21.6 74a5.4 5.4 0 0 0 5.9 5.8c.2 0 17.2-1.5 36 5.8 24.8 9.6 40.2 29.5 45.8 59.2a5.4 5.4 0 0 0 5.4 4.4 6 6 0 0 0 4.4-2.3c5.6-7.9 16.1-15.9 52.4-15.9 35.9 0 48.7 30.2 51.4 42 .1.9 1.4 5.8 5.5 5.8 4 0 5.3-5.2 5.4-5.7 2.2-10.6 15.5-42 51.3-42 36.4 0 47 8 52.4 15.8 0 0 1.5 1.9 3.6 2.2 3 .4 5.8-1.4 6.4-4.3 5.6-29.5 20.9-49.4 45.5-59.1 18.7-7.4 36.1-6 36.3-6a5.4 5.4 0 0 0 6-5.6 107.6 107.6 0 0 1 21.5-74.1 95 95 0 0 1 24.8-23 5.4 5.4 0 0 0-1.7-10.1zm-31.4 26c-11.6 15-25 40.2-24.3 75.9-7.5 0-20.7 1.1-34.8 6.6-18 7-40.6 22.6-50.3 57.4-11-8.8-27.9-12.7-54-12.7a60.8 60.8 0 0 0-48 22.5 72 72 0 0 0-8.8 13.5 72 72 0 0 0-8.8-13.5 60.8 60.8 0 0 0-48-22.5c-26 0-42.9 3.9-53.8 12.6A82.2 82.2 0 0 0 95 261a101 101 0 0 0-34.8-6.6 118.3 118.3 0 0 0-41-93.2c47.5-6.4 81.8.7 102.7 8.2 20.2 7.3 32 16.2 35.6 19.2C169.6 252 201.3 274 226 281a5.4 5.4 0 0 0 6.8-4.1c.1-.7.2-.9-.2-25.3l12.3 8.4c1 .7 2.3 1 3.5 1h15.4c1.2 0 2.5-.3 3.5-1l12.3-8.4c-.4 24.4-.4 24.6-.2 25.3a5.4 5.4 0 0 0 6.8 4.1c24.6-7.1 56.3-29 68.4-92.5 3.6-3 15.4-11.9 35.6-19.2 21-7.5 55.2-14.6 102.7-8.2a115 115 0 0 0-16.7 17.4z"
48+
d="M507.5-9.46c-57-10.2-97.7-1.8-121.8 7a120.2 120.2 0 00-40 22.4c-.8.7-1.4 1.8-1.6 2.9-9.7 53.3-33.4 75-54 83.4l.5-26.8a5.4 5.4 0 00-8.5-4.6l-19.6 13.3h-13l-19.6-13.3a5.4 5.4 0 00-8.5 4.6l.5 26.8c-20.6-8.5-44.3-30.1-54-83.4a5.4 5.4 0 00-1.6-3c-.6-.5-13.4-12.7-40-22.3-24.1-8.8-64.9-17.2-121.8-7a5.4 5.4 0 00-1.8 10 94.98 94.98 0 0124.9 23.1c16 20.8 23.2 45.7 21.6 74a5.4 5.4 0 005.9 5.8c.2 0 17.2-1.5 36 5.8 24.8 9.6 40.2 29.5 45.8 59.2a5.4 5.4 0 005.4 4.4 6 6 0 004.4-2.3c5.6-7.9 16.1-15.9 52.4-15.9 35.9 0 48.7 30.2 51.4 42 .1.9 1.4 5.8 5.5 5.8 4 0 5.3-5.2 5.4-5.7 2.2-10.6 15.5-42 51.3-42 36.4 0 47 8 52.4 15.8 0 0 1.5 1.9 3.6 2.2 3 .4 5.8-1.4 6.4-4.3 5.6-29.5 20.9-49.4 45.5-59.1 18.7-7.4 36.1-6 36.3-6a5.4 5.4 0 006-5.6 107.6 107.6 0 0121.5-74.1 95.02 95.02 0 0124.8-23 5.4 5.4 0 00-1.7-10.1zm-31.4 26c-11.6 15-25 40.2-24.3 75.9-7.5 0-20.7 1.1-34.8 6.6-18 7-40.6 22.6-50.3 57.4-11-8.8-27.9-12.7-54-12.7a60.8 60.8 0 00-48 22.5 72 72 0 00-8.8 13.5 71.9 71.9 0 00-8.8-13.5 60.8 60.8 0 00-48-22.5c-26 0-42.9 3.9-53.8 12.6A82.2 82.2 0 0095 99.14a100.99 100.99 0 00-34.8-6.6 118.3 118.3 0 00-41-93.2c47.5-6.4 81.8.7 102.7 8.2 20.2 7.3 32 16.2 35.6 19.2 12.1 63.4 43.8 85.4 68.5 92.4a5.4 5.4 0 006.8-4.1c.1-.7.2-.9-.2-25.3l12.3 8.4c1 .7 2.3 1 3.5 1h15.4c1.2 0 2.5-.3 3.5-1l12.3-8.4c-.4 24.4-.4 24.6-.2 25.3a5.4 5.4 0 006.8 4.1c24.6-7.1 56.3-29 68.4-92.5 3.6-3 15.4-11.9 35.6-19.2 21-7.5 55.2-14.6 102.7-8.2a115.07 115.07 0 00-16.7 17.4z"
4949
/>
5050
<circle cx="256" cy="295" r="15">
5151
<animate attributeName="r" dur="0.8s" values="15;9;15" repeatCount="indefinite" />
5252
<animate attributeName="fill-opacity" dur="0.8s" values="1;.5;1" repeatCount="indefinite" />
5353
</circle>
54+
<filter id="a" width="140%" height="140%" x="-20%" y="-20%">
55+
<feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="4" />
56+
<feOffset dx="4" dy="4" in="blur" result="offsetBlur" />
57+
<feSpecularLighting in="blur" lighting-color="#fff" result="specOut" specularExponent="10" surfaceScale="5">
58+
<fePointLight x="-5000" y="-10000" z="-20000" />
59+
</feSpecularLighting>
60+
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
61+
<feComposite in="SourceGraphic" in2="specOut" k2="1" k3="1" operator="arithmetic" result="litPaint" />
62+
<feMerge>
63+
<feMergeNode in="offsetBlur" />
64+
<feMergeNode in="litPaint" />
65+
</feMerge>
66+
</filter>
67+
<g filter="url(#a)" transform="matrix(.34471 0 0 .41558 130.07 203.62)">
68+
<path
69+
fill="#fff"
70+
d="M170.6 92.13c-5-5-12-7-21-7h-57l-7 18h57c2 0 3 0 5 2l1 4-13 29c0 2-2 3-4 5l-6 1h-59c-2 0-3 0-5-2l-1-4 12-27h-25l-12 27c-2 7-1 12 3 17 5 5 12 7 21 7h58c9 0 18-2 27-7 8-5 13-10 16-17l13-29c2-7 1-12-3-17m420 52c-1 0-3 0-4-2-2-1-2-2-1-4l2-6h71l7-17h-70l2-6 4-5 7-1h65l8-18h-66c-9 0-18 2-26 7-9 5-14 10-17 17l-12 29c-3 7-2 12 2 17 5 5 12 7 21 7h67l7-18h-67zm-301-30l12-6c4-2 6-5 7-8 2-4 1-8-2-11-2-3-7-4-12-4h-103l-8 18h87l-89 31-11 5-6 8c-2 4-1 8 1 11 3 3 8 4 13 4h105l8-18h-90l88-30zm147-22c-5-5-11-7-20-7h-59c-9 0-18 2-26 7-9 5-14 10-17 17l-12 29c-3 7-2 12 3 17 4 5 11 7 20 7h58c10 0 18-2 27-7 8-4 14-10 16-17l13-29c3-7 2-12-3-17zm-22 17l-13 29c0 2-2 3-4 5l-6 1h-59c-2 0-3 0-4-2-2-1-2-2-1-4l12-29c1-2 2-3 5-4 2-2 4-2 6-2h58c2 0 4 0 5 2 1 1 2 2 1 4zm147-17c-5-5-12-7-21-7h-50c-9 0-18 2-26 7-9 5-14 10-17 17l-22 53h25l22-53 4-5 7-1h50c2 0 4 0 5 2l1 4-23 53h25l23-53c2-7 1-12-3-17"
71+
class="st4"
72+
/>
73+
<path
74+
fill="#dd1407"
75+
d="M72.6 111.13l1-2c0-2 2-3 5-4 2-2 4-2 5-2h2l7-18h-1c-9 0-18 2-26 7-9 5-15 10-17 17l-1 2h25z"
76+
/>
77+
</g>
5478
</svg>
5579
</div>
5680
`;

‎frontend/src/viewer/redux/browser-slice.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const initialState: BrowserState = {
1616
isInIframe: window.parent !== window,
1717
// https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
1818
isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent),
19-
isSmallScreen: window.matchMedia('(min-width: 640px)').matches,
19+
isSmallScreen: !window.matchMedia('(min-width: 640px)').matches,
2020
};
2121

2222
const browserSlice = createSlice({

‎frontend/static/img/ozone.svg

+1
Loading

0 commit comments

Comments
 (0)