Fixes on navbar and globe

package.json

@@ -14,6 +14,7 @@
     "polka": "next",
     "satellite.js": "^4.1.3",
     "sirv": "^1.0.0",
+    "svelte-media-query": "^1.0.0",
     "topojson": "^3.0.2"
   },
   "devDependencies": {

src/components/Footer.svelte

@@ -2,19 +2,32 @@
   import FemtoStarLogo from "./FemtoStarLogo.svelte";
 </script>
 
-<div>
+<div class="footer-container">
-  <FemtoStarLogo height={42} width={33} color="#FFFFFF75" />
+  <FemtoStarLogo height={42} width={33} color="#FFFFFF75"/>
+  <div class="footer-text">
+    femtostar[example].onion<br>
+    Copyright 2021 the FemtoStar Project contributors.
+  </div>
 </div>
 
 <style>
-  div {
+  .footer-text{
+    display: block;
+    margin-left: 1.0em;
+  }
+
+  .footer-container {
     font-weight: 300;
     background-color: #00111d;
     color: white;
     width: 100%;
-    height: 48px;
+    font-size: 0.7em;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+    margin-top: auto;
+    text-align: center;
+    margin-bottom: 10px;
   }
 </style>

src/components/Globe.svelte

@@ -1,14 +1,14 @@
 <script>
   import * as d3 from "d3";
+  import MediaQuery from "svelte-media-query";
   import * as sjs from "satellite.js";
   import { onDestroy, onMount } from "svelte";
   import tles from "../../static/tle.js";
   import world110m from "../../static/world-110m.js";
   import * as topojson from "topojson";
 
-  export let width = 300;
-
   let shouldLoop = true;
+  let tta;
 
   async function doThing() {
     let satelliteJs = sjs;
@@ -16,6 +16,8 @@
     var DEGREES = 180 / Math.PI;
     var R_EARTH = 6378.137; // equatorial radius (km)
 
+    var disablescroll = false;
+
     /* =============================================== */
     /* =============== CLOCK ========================= */
     /* =============================================== */
@@ -278,29 +280,31 @@
 
     var svg = d3.select("#globe");
 
-    var marginTop = 0;
     var width = svg.attr("width");
-    var height = svg.attr("height") - marginTop;
+    var height = svg.attr("height");
 
     var projection = d3
       .geoOrthographic()
       .scale((height - 10) / 2)
-      .translate([width / 2, height / 2 + marginTop])
+      .translate([width / 2, height / 2])
       .rotate([45, -30]);
 
     var geoPath = d3.geoPath().projection(projection);
 
-    svg
+    
-      .append("path")
-      .datum({
-        type: "Sphere",
-      })
-      .style("cursor", "grab")
-      .attr("fill", "#2E86AB")
-      .attr("d", geoPath);
 
     function initGlobe() {
       let worldData = world110m;
+
+      svg
+        .append("path")
+        .datum({
+          type: "Sphere",
+        })
+        .style("cursor", "grab")
+        .attr("fill", "#2E86AB")
+        .attr("d", geoPath);
+      
       svg
         .selectAll(".segment")
         .data([topojson.feature(worldData, worldData.objects.land)])
@@ -364,6 +368,20 @@
       allFootprintsDataJoin.attr("d", function (sat) {
         return geoPath(sat.getFootprint());
       });
+
+      if(svg.attr("width") != width){
+        svg.selectAll("*").remove();
+
+        width = svg.attr("width");
+        height = svg.attr("height");
+
+        projection.scale((height - 10) / 2);
+        projection.translate([width / 2, height / 2]);
+        projection.rotate([45, -30]);
+
+        initGlobe();
+        redrawGlobe();        
+      }
     }
 
     async function redrawGlobe() {
@@ -374,6 +392,13 @@
     var m0;
     var o0;
 
+    var preventScroll = function(e){
+      //This function doesn't have to do anything, it just has to exist
+      /*if(disablescroll){
+        e.preventDefault();
+      }*/
+    };
+
     async function mousedown(e) {
       m0 = [e.pageX, e.pageY];
       o0 = projection.rotate();
@@ -399,8 +424,50 @@
       }
     }
 
+    function touchstart(e){
+      m0 = [e.touches[0].pageX, e.touches[0].pageY];;
+      o0 = projection.rotate();
+      e.preventDefault();
+      return false;
+    }
+
+    function touchmove(e){
+      if (m0) {
+        var m1 = [e.touches[0].pageX, e.touches[0].pageY];
+        const o1 = [
+          o0[0] + (m1[0] - m0[0]) / 2.5,
+          o0[1] + (m0[1] - m1[1]) / 2.5,
+        ];
+        projection.rotate(o1);
+        redrawGlobe();
+      }
+      e.preventDefault();
+      return false;
+    }
+
+    function touchend(e){
+      if (m0) {
+        m0 = null;
+      }
+      e.preventDefault();
+      return false;
+    }
+
+    //Stop Chrome from messing up the scroll by adding an event listener on touch events
+    document.addEventListener('touchstart', function(){}, {passive: false});
+    document.addEventListener('touchmove',  function(){}, {passive: false});
+
     svg.on("mousedown", mousedown);
-    d3.select(window).on("mousemove", mousemove).on("mouseup", mouseup);
+    d3.select(window).on("mousemove", mousemove)
+    d3.select(window).on("mouseup", mouseup);
+
+    tta.addEventListener("mousedown", mousedown);
+    tta.addEventListener("mousemove", mousemove);
+    tta.addEventListener("mouseup", mouseup);
+
+    tta.addEventListener("touchstart", touchstart);
+    tta.addEventListener("touchmove", touchmove);
+    tta.addEventListener("touchend", touchend);
 
     async function animateSats(elapsed) {
       var dateInMsI1 = await activeClock.elapsed(elapsed);
@@ -427,7 +494,16 @@
 </script>
 
 <div class="globeContainer">
-  <svg id="globe" {width} height={width} />
+
+  <MediaQuery query="only screen and (max-device-width: 900px) and (orientation: portrait)" let:matches>
+
+    <div class="touch-sensor {matches ? "touch-sensor-small":"touch-sensor-large"}" bind:this={tta} />
+
+    <svg id="globe" width={matches ? 250:400} height={matches ? 250:400}/>
+  </MediaQuery>
+
+  <!--<svg id="globe" {width} height={width}/>-->
+
   <div class="globeText">click and drag</div>
 </div>
 
@@ -443,6 +519,25 @@
     color: #ffffff;
   }
 
+  .touch-sensor{
+    position: absolute;
+    opacity: 0;
+    padding-top: 0.6em;
+    cursor: pointer;
+  }
+
+  .touch-sensor-small{
+    width: 250px;
+    height: 250px;
+    border-radius: 125px;
+  }
+
+  .touch-sensor-large{
+    width: 400px;
+    height: 400px;
+    border-radius: 200px;
+  }
+
   :global(.footprint--LEO) {
     fill: rgba(255, 177, 64, 0.08);
     stroke: rgba(255, 177, 64, 0.5);

src/components/Nav.svelte

@@ -1,10 +1,11 @@
 <script>
   import NavItem from "./NavItem.svelte";
+  import FemtoStarLogo from "./FemtoStarLogo.svelte"
   export let segment;
 </script>
 
 <nav>
-  <NavItem {segment} href="." matchingSegment={undefined} humanName="home" />
+  <NavItem {segment} href="." matchingSegment={undefined} humanName="home"></NavItem>
 
   <NavItem {segment} href="./faq" matchingSegment="faq" humanName="faq" />
 
@@ -71,6 +72,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    cursor: default;
   }
 
   .bold {

src/components/NavItem.svelte

@@ -9,6 +9,7 @@
   class="navItem"
   aria-current={segment === matchingSegment ? "page" : undefined}
 >
+  <div class="width-placeholder">{humanName}</div>
   <a rel="prefetch" {href}>{humanName}</a>
 </div>
 
@@ -16,12 +17,19 @@
   .navItem {
     height: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     padding-left: 0.5em;
     padding-right: 0.5em;
   }
 
+  .width-placeholder{
+    height: 0;
+    font-weight: bold;
+    overflow: hidden;
+  }
+
   a {
     text-decoration: none;
   }

src/routes/_layout.svelte

@@ -5,14 +5,22 @@
   export let segment;
 </script>
 
-<Nav {segment} />
+<div class="wrapper">
+  <Nav {segment} />
 
-<slot />
+  <slot />
 
-<Footer />
+  <Footer />
+</div>
 
 <style>
   :global(body) {
     background-color: #00111d;
   }
+
+  .wrapper {
+    min-height: 100vh;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+}
 </style>

src/routes/faq.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <svelte:head>
-  <title>FemtoStar - Global Open Infrastructure</title>
+  <title>FemtoStar - FAQ</title>
 </svelte:head>
 
 <div class="site">

src/routes/index.svelte

@@ -15,7 +15,7 @@
 <div class="site">
   <div class="hero">
     <div class="container">
-      <Globe width="250" />
+      <Globe/>
       <FemtoHeader />
     </div>
   </div>

yarn.lock

@@ -1307,6 +1307,7 @@ __metadata:
     satellite.js: ^4.1.3
     sirv: ^1.0.0
     svelte: ^3.17.3
+    svelte-media-query: ^1.0.0
     topojson: ^3.0.2
     tslib: ^2.2.0
   languageName: unknown
@@ -3414,6 +3415,13 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
+"svelte-media-query@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "svelte-media-query@npm:1.0.0"
+  checksum: 8f15b02659e0e7e519b41314176b9c86f343b85e66c21537cd0bbc939239015854e37fc7ac7c49d9bee9496a8953a77cc7ef9a936f05ecdc096d626962b3f371
+  languageName: node
+  linkType: hard
+
 "svelte@npm:^3.17.3":
   version: 3.34.0
   resolution: "svelte@npm:3.34.0"