Spaces:

hlarcher
/

paf-tracker

Running on CPU Upgrade

App Files Files Community

hlarcher HF Staff commited on Jan 30

Commit

878012f

unverified ·

1 Parent(s): f457ce6

Mobile optimizations and Safran logo

Browse files

- Reduce timeline padding on mobile
- Hide timeline tooltips on mobile
- Move event card to top of map on mobile
- Zoom out to show all France during playback on mobile
- Add embedded Safran Aircraft Engines logo to header

Files changed (5) hide show

index.html +46 -15
src/components/Map.js +8 -0
src/main.js +8 -0
src/styles/main.css +24 -9
src/styles/timeline.css +4 -3

index.html CHANGED Viewed

@@ -1,31 +1,62 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Patrouille de France - Airshow Tracker</title>
-  <link href="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.css" rel="stylesheet">
-  <link rel="stylesheet" href="/src/styles/main.css">
-  <link rel="stylesheet" href="/src/styles/timeline.css">
 </head>
 <body>
-  <div id="app">
     <header class="header">
-      <h1>Patrouille de France</h1>
-      <span class="subtitle">Airshow Tracker</span>
     </header>
     <main class="main">
-      <div id="map" class="map"></div>
-      <div id="countdown" class="countdown-container"></div>
-      <div id="event-card" class="event-card hidden"></div>
     </main>
     <footer class="footer">
-      <div id="timeline" class="timeline"></div>
     </footer>
-  </div>
-  <script type="module" src="/src/main.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Patrouille de France - Airshow Tracker</title>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.css" rel="stylesheet">
+    <link rel="stylesheet" href="/src/styles/main.css">
+    <link rel="stylesheet" href="/src/styles/timeline.css">
 </head>
 <body>
+<div id="app">
     <header class="header">
+        <h1>Patrouille de France</h1>
+        <span class="subtitle">Airshow Tracker</span>
+        <span class="header-spacer"></span>
+        <svg xmlns="http://www.w3.org/2000/svg" class="header-logo"
+             x="0px" y="0px" viewBox="0 0 922 200">
+            <g>
+                <path class="st0" d="M488.8,70.9v25l56.7,0l-3.4,16.2h-53.2v35.8H463V54.6h91.3l-3.5,16.3H488.8z M803,147.9h-29.7l-8.9-18.9h-49.8
+                    l-8.6,18.9h-18.7l43.9-93.3c0,0,11.7,0,17.5,0c6.6,0,9.1,2.7,12.5,9.7C764.4,70.9,803,147.9,803,147.9z M756.7,112.8l-17.6-37.2
+                    l-17,37.2H756.7z M450.2,147.9h-29.7l-8.9-18.9h-49.8l-8.6,18.9h-18.7l44-93.3c0,0,11.7,0,17.5,0c6.6,0,9.1,2.7,12.5,9.7
+                    C411.5,70.9,450.2,147.9,450.2,147.9z M403.8,112.8l-17.6-37.2l-17,37.2H403.8z M280,150.9c33.4,0,48.8-12.2,48.8-30
+                    c0-15.5-14-23.4-44.7-31.8c-18.3-5-29.7-6-29.7-12.2c0-5.9,10.7-9.1,27.1-8.3c20.6,1,33.7,9.7,33.7,9.7l8.1-12.9
+                    c0,0-18.5-13.7-47.9-13.7c-32.1,0-49,9.8-49,27.8c0,17.8,19.2,23.9,47.2,31.9c17.2,4.9,27.2,5.8,27.2,12.4
+                    c0,5.1-5.2,11.4-28.1,10.3c-22-1.1-41.1-13.8-41.1-13.8l-9.8,11.9C221.9,132.1,242.8,150.9,280,150.9z M902.5,54.6v55.7
+                    c0,0-54.7-43.6-59.2-47.2c-8.1-6.4-11.8-8.5-20.8-8.5c-3.8,0-6.7,0-6.7,0v93.3H835V93.1c0,0,54.2,43.3,58.7,46.8
+                    c8.1,6.4,12.2,8,21.2,8c3.8,0,6.7,0,6.7,0V54.6H902.5z M677.4,147.9c0,0-6.7,0-17.5,0c-10.4,0-16.7-7.2-20.5-12.2
+                    c-4.2-5.5-14.7-19.4-14.7-19.4s-1.2,0-1.8,0c-7,0-26.3,0-26.3,0h-0.3v31.6h-25.9V54.6h26.2c0,0,19.2,0,26.3,0
+                    c20.1,0,49,2.1,49,30.9v0c0,16.7-9.8,24.4-21.9,27.9L677.4,147.9z M643.8,85.5L643.8,85.5c0-9.8-6.2-14.6-19.9-14.6h-27.3l-0.3-0.2
+                    v29.6l0.3-0.2h27.3C637.6,100.1,643.8,95.3,643.8,85.5z">
+                </path>
+                <path class="st0" d="M175,141.5h-2.1c-19.2,26.3-50.2,43.4-85.2,43.4c-35,0-66.1-17.1-85.2-43.4H0.4c15.5,32.6,48.8,55.2,87.3,55.2
+                    C126.2,196.6,159.5,174.1,175,141.5z">
+                </path>
+                <path id="_x3C_Tracé_x3E__7_" class="st0" d="M156.9,151.9c4.7-5.2,8.9-12.4,9.8-17.6c4.5-23.8-17.6-35.9-43.7-45
+                    c-20.4-7.1-37.2-12-51.5-16.4c-22.7-7-26.6-13.7-26.4-20.9c0.2-8.4,9.1-19,19.2-25.3c0,0-19-0.1-38.3,14.3
+                    C14.7,49.5,10,58.3,8.3,66.3c-8.1,39.8,70.5,55.6,100.7,65.4c16.5,5.4,18.7,12.6,18.6,18.3c-0.3,13.3-19.1,25.3-19.2,25.3
+                    C123.7,175,144.4,165.9,156.9,151.9">
+                </path>
+                <path class="st0" d="M175,58.5h-2.1c-19.2-26.3-50.2-43.4-85.2-43.4c-35,0-66.1,17.1-85.2,43.4H0.4C15.9,25.9,49.2,3.4,87.7,3.4
+                    C126.2,3.4,159.5,25.9,175,58.5z">
+                </path>
+            </g>
+        </svg>
     </header>
     <main class="main">
+        <div id="map" class="map"></div>
+        <div id="countdown" class="countdown-container"></div>
+        <div id="event-card" class="event-card hidden"></div>
     </main>
     <footer class="footer">
+        <div id="timeline" class="timeline"></div>
     </footer>
+</div>
+<script type="module" src="/src/main.js"></script>
 </body>
 </html>

src/components/Map.js CHANGED Viewed

@@ -136,6 +136,14 @@ export class MapView {
     this.hideFlightPath();
   }
   getMap() {
     return this.map;
   }

     this.hideFlightPath();
   }
+  zoomToFrance() {
+    this.map.flyTo({
+      center: MAP_CONFIG.center,
+      zoom: 4.3,
+      duration: 800
+    });
+  }
   getMap() {
     return this.map;
   }

src/main.js CHANGED Viewed

@@ -6,6 +6,9 @@ import { HOME_BASE } from './config.js';
 import airshowData from './data/airshows.json';
 const FLIGHT_ANIMATION_DURATION = 2000; // ms
 class App {
   constructor() {
@@ -103,6 +106,11 @@ class App {
     this.isPlaying = playing;
     if (playing) {
       // Start playback
       if (this.timeline.selectedIndex < 0) {
         // No event selected, start from first

 import airshowData from './data/airshows.json';
 const FLIGHT_ANIMATION_DURATION = 2000; // ms
+const MOBILE_BREAKPOINT = 768;
+const isMobile = () => window.innerWidth <= MOBILE_BREAKPOINT;
 class App {
   constructor() {
     this.isPlaying = playing;
     if (playing) {
+      // On mobile, zoom out to show all of France during playback
+      if (isMobile()) {
+        this.map.zoomToFrance();
+      }
       // Start playback
       if (this.timeline.selectedIndex < 0) {
         // No event selected, start from first

src/styles/main.css CHANGED Viewed

@@ -67,6 +67,16 @@ body {
   color: var(--color-text-muted);
 }
 /* Main content */
 .main {
   flex: 1;
@@ -340,20 +350,21 @@ body {
     display: none;
   }
-  /* Event card - bottom sheet style */
   .event-card {
-    top: auto;
-    bottom: var(--timeline-height);
-    left: 0;
-    right: 0;
-    width: 100%;
-    border-radius: 12px 12px 0 0;
-    padding: 16px;
     transform: translateY(0);
   }
   .event-card.hidden {
-    transform: translateY(100%);
   }
   .event-card h2 {
@@ -381,4 +392,8 @@ body {
   .header .subtitle {
     display: none;
   }
 }

   color: var(--color-text-muted);
 }
+.header-spacer {
+  flex: 1;
+}
+.header-logo {
+  height: 24px;
+  opacity: 0.6;
+  filter: brightness(0) invert(1);
+}
 /* Main content */
 .main {
   flex: 1;
     display: none;
   }
+  /* Event card - top position on mobile */
   .event-card {
+    top: 8px;
+    bottom: auto;
+    left: 8px;
+    right: 8px;
+    width: auto;
+    border-radius: 8px;
+    padding: 12px;
     transform: translateY(0);
   }
   .event-card.hidden {
+    transform: translateY(-100%);
+    opacity: 0;
   }
   .event-card h2 {
   .header .subtitle {
     display: none;
   }
+  .header-logo {
+    height: 18px;
+  }
 }

src/styles/timeline.css CHANGED Viewed

@@ -198,7 +198,7 @@
 /* Mobile: horizontal scrolling timeline */
 @media (max-width: 768px) {
   .timeline {
-    padding: 12px 16px;
     gap: 12px;
   }
@@ -214,7 +214,7 @@
   .timeline-months {
     gap: 16px;
-    padding: 8px 16px 8px 0;
   }
   .timeline-year {
@@ -239,7 +239,8 @@
     height: 14px;
   }
   .timeline-event-tooltip {
-    font-size: 0.6rem;
   }
 }

 /* Mobile: horizontal scrolling timeline */
 @media (max-width: 768px) {
   .timeline {
+    padding: 4px 16px;
     gap: 12px;
   }
   .timeline-months {
     gap: 16px;
+    padding: 4px 16px 4px 0;
   }
   .timeline-year {
     height: 14px;
   }
+  /* Hide tooltip on mobile */
   .timeline-event-tooltip {
+    display: none;
   }
 }