Merge remote-tracking branch 'origin/develop' into develop

lokn · Jun 12, 2021 · a9ec741 · a9ec741
2 parents 51c33d6 + 056f2fa
commit a9ec741
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 16 deletions.
diff --git a/locales/de.json b/locales/de.json
@@ -105,7 +105,7 @@
     "subtitle": "Demnächst.",
     "refs": "Sensor.Community-Kampagne, um Sensoren an jede Referenzstation dieser Welt zu bringen",
     "refs-metaTitle": "Sensor.Community-Kampagne, um Sensoren an jede Referenzstation dieser Welt zu bringen",
-    "refs-phase1": "Anzeige der Standorte aller Referenzstationen auf Maps.Sensor.Community.\n",
+    "refs-phase1": "Anzeige der Standorte Referenzstationen auf Maps.Sensor.Community.\n",
     "refs-phase2": "Messwerte & Informationen aller Referenzstationen anzeigen.\n",
     "refs-phase3": "Mehr Informationen im Jahr 2021 .\n",
     "sensor2school": "Sensor.Community-Kampagne, um Sensoren an jede Schule dieser Welt zu bringen. \n",

diff --git a/locales/en.json b/locales/en.json
@@ -118,7 +118,7 @@
     "phase3": "Phase 3:",
     "refs": "Sensor.Community campaign to bring sensors at every reference station in this world.\n",
     "refs-metaTitle": "Sensor.Community campaign to bring sensors at every reference station in this world.\n",
-    "refs-phase1": "Display locations of all reference stations.\n",
+    "refs-phase1": "Display locations of reference stations.\n",
     "refs-phase2": "Display meta information of reference stations.\n",
     "refs-phase3": "Display measurement values of reference stations.\n",
     "sensor2school": "Sensor.Community campaign to bring sensors at every school in this world.\n",
@@ -135,7 +135,8 @@
     "no2-phase1": "Launching on 01.10.2020 - 9 cities in Europe measure with 30 NO2 diffusion tubes each.\n",
     "no2-phase2": "New Map to display all NO2 diffusion tubes measurements.\n",
     "no2-phase3": "Adding all other NO2 diffusion tube campaigns worldwide to the Map.\n",
-    "getNotified": "\uD83D\uDC8C Subscribe"
+    "getNotified": "\uD83D\uDC8C Subscribe",
+    "map": "Open the map in a separate tab"
   },
   "collaborations": {
     "h1": "Collaborations",

diff --git a/src/routes/[lang]/campaign/no2/index.svelte b/src/routes/[lang]/campaign/no2/index.svelte
@@ -40,6 +40,16 @@
         </div>
 
         <div class="relative z-20 md:block mx-auto md:bg-white md:shadow-lg z-10 mb-10">
+            <div class="relative bg-teal-500 hover:bg-teal-700">
+                <a href="https://no2.maps.sensor.communityhttps://no2.maps.sensor.community" target="_blank">
+                    <div class="max-w-6xl mx-auto py-3">
+                        <div class="pr-16 text-center sm:px-16">
+                            <div class="text-white hover:text-white"> {i18n.t('campaign:map')} <span aria-hidden="true">&rarr;</span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            </div>
             <div class="flex" style="height: 40em;">
                 <iframe scrolling="no" class="z-10" id="map-frame" onLoad="{delayMap()}"
                         src=""

diff --git a/src/routes/[lang]/campaign/sensorAtRefs/index.svelte b/src/routes/[lang]/campaign/sensorAtRefs/index.svelte
@@ -7,14 +7,21 @@
     $: lang = $page.params.lang;
     $: i18n = initI18n(lang);
 
+    function delayMap() {
+        if (process.browser) {
+            setTimeout(function () {
+                document.getElementById('map-frame').src = 'https://sensors2ref.maps.sensor.community/#13/51.5072/-0.1275';
+            }, 900);
+        }
+    }
 </script>
 
 <svelte:head>
     <title>{i18n.t('campaign:refs-metaTitle')}</title>
-    <meta property="og:title" content="{i18n.t('campaign:refs-metaTitle')}"/>
-    <meta property="og:type" content="website"/>
-    <meta property="og:url" content=""/>
-    <meta property="og:image" content=""/>
+    <meta content="{i18n.t('campaign:refs-metaTitle')}" property="og:title"/>
+    <meta content="website" property="og:type"/>
+    <meta content="" property="og:url"/>
+    <meta content="" property="og:image"/>
 </svelte:head>
 
 <div class="bg-white">
@@ -26,19 +33,33 @@
                 <p class="text-gray-700 text-2xl mt-6">{i18n.t('campaign:refs')}</p>
             </div>
             <div class="text-gray-700 text-xl p-8">
-                <p class="pb-4"><span class="font-bold">{i18n.t('campaign:phase1')} </span>{i18n.t('campaign:refs-phase1')}</p>
-                <p class="pb-4"><span class="font-bold">{i18n.t('campaign:phase2')} </span>{i18n.t('campaign:refs-phase2')}</p>
-                <p class="pb-4"><span class="font-bold">{i18n.t('campaign:phase3')} </span>{i18n.t('campaign:refs-phase3')}</p>
+                <p class="pb-4"><span
+                        class="font-bold">{i18n.t('campaign:phase1')} </span>{i18n.t('campaign:refs-phase1')} ✔</p>
+                <p class="pb-4"><span
+                        class="font-bold">{i18n.t('campaign:phase2')} </span>{i18n.t('campaign:refs-phase2')} ✔</p>
+                <p class="pb-4"><span
+                        class="font-bold">{i18n.t('campaign:phase3')} </span>{i18n.t('campaign:refs-phase3')} ✔</p>
             </div>
         </div>
 
+        <div class="relative bg-teal-500 hover:bg-teal-700">
+            <a href="https://sensors2ref.maps.sensor.community/#13/51.5072/-0.1275" target="_blank">
+                <div class="max-w-6xl mx-auto py-3">
+                    <div class="pr-16 text-center sm:px-16">
+                        <div class="text-white hover:text-white"> {i18n.t('campaign:map')} <span aria-hidden="true">&rarr;</span>
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </div>
 
-        <div class="container mx-auto mb-48">
-            <div class="container mx-auto text-center">
-                <a href="mailto:[email protected]"
-                   class="bg-teal-500 text-center hover:bg-teal-700 hover:text-white mx-auto rounded-lg inline-block shadow px-8 py-6 text-white text-xl">
-                    <div>{i18n.t('campaign:getNotified')}</div>
-                </a></div>
+        <div class="relative z-20 md:block mx-auto md:bg-white md:shadow-lg z-10 mb-10">
+            <div class="flex" style="height: 40em;">
+                <iframe class="z-10" id="map-frame" onLoad="{delayMap()}" scrolling="no"
+                        src=""
+                        style="width: 97%; height: 95%; margin: auto; "
+                        title="sensor.community particulate matter map"></iframe>
+            </div>
         </div>
     </section>
 </div>
diff --git a/static/index.css b/static/index.css
@@ -1169,6 +1169,10 @@ h1 {
   max-width: 36rem;
 }
 
+.max-w-6xl {
+  max-width: 72rem;
+}
+
 .max-w-screen-xl {
   max-width: 1280px;
 }
@@ -1368,6 +1372,10 @@ h1 {
   padding-bottom: 3rem;
 }
 
+.pr-16 {
+  padding-right: 4rem;
+}
+
 .pt-20 {
   padding-top: 5rem;
 }
@@ -1995,6 +2003,11 @@ pre[class*="language-"].language-css > code, pre[class*="language-"].language-sa
     padding-right: 1.5rem;
   }
 
+  .sm\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .sm\:gap-x-6 {
     grid-column-gap: 1.5rem;
     column-gap: 1.5rem;