Merge pull request #60 from Plant-for-the-Planet-org/develop

Release with fixes
Plant-for-the-Planet-org · May 31, 2021 · 1f7552c · 1f7552c · vercel · May 31, 2021
2 parents c0a46b1 + a9ea67a
commit 1f7552c
Show file tree

Hide file tree

Showing 12 changed files with 315 additions and 67 deletions.
diff --git a/public/data/locales/de.json b/public/data/locales/de.json
@@ -1,14 +1,16 @@
 {
-    "treesPlanted":"Bäume gepflanzt",
-    "target":"Ziel",
-    "plantTrees":"Bäume pflanzen",
-    "viewProfile":"Profil anzeigen",
-    "poweredBy":"Powered by Plant-for-the-Planet",
-    "treesPlantedBy":"Bäume gepflanzt von",
-    "and":"und",
-    "treesPlantedByComm":"Bäume gepflanzt von der Community.",
-    "forestfrontrunners": "Baum-Bestenliste",
-    "mostrecent": "NEUESTE SPENDEN",
-    "mosttrees": "DIE MEISTEN BÄUME",
-    "trees": "Bäume"
+  "treesPlanted": "Bäume gepflanzt",
+  "target": "Ziel",
+  "plantTrees": "Bäume pflanzen",
+  "viewProfile": "Profil anzeigen",
+  "poweredBy": "Powered by Plant-for-the-Planet",
+  "treesPlantedBy": "Bäume gepflanzt von",
+  "and": "und",
+  "treesPlantedByComm": "Bäume gepflanzt von der Community.",
+  "forestfrontrunners": "Baum-Bestenliste",
+  "mostrecent": "NEUESTE SPENDEN",
+  "mosttrees": "DIE MEISTEN BÄUME",
+  "trees": "Bäume",
+  "the": "Der",
+  "forestGrows": "Wald Wächst."
 }
diff --git a/public/data/locales/en.json b/public/data/locales/en.json
@@ -1,14 +1,16 @@
 {
-    "treesPlanted":"Trees Planted",
-    "target":"Target",
-    "plantTrees":"Plant Trees",
-    "viewProfile":"View Profile",
-    "poweredBy":"Powered by Plant-for-the-Planet",
-    "treesPlantedBy":"trees planted by",
-    "and":"and",
-    "treesPlantedByComm":"trees planted by community.",
-    "forestfrontrunners": "Forest Frontrunners",
-    "mostrecent": "MOST RECENT",
-    "mosttrees": "MOST TREES",
-    "trees": "Trees"
+  "treesPlanted": "Trees Planted",
+  "target": "Target",
+  "plantTrees": "Plant Trees",
+  "viewProfile": "View Profile",
+  "poweredBy": "Powered by Plant-for-the-Planet",
+  "treesPlantedBy": "trees planted by",
+  "and": "and",
+  "treesPlantedByComm": "trees planted by community.",
+  "forestfrontrunners": "Forest Frontrunners",
+  "mostrecent": "MOST RECENT",
+  "mosttrees": "MOST TREES",
+  "trees": "Trees",
+  "the": "The",
+  "forestGrows": "Forest Grows."
 }
diff --git a/public/data/locales/es.json b/public/data/locales/es.json
@@ -0,0 +1,16 @@
+{
+  "treesPlanted": "Árboles plantados",
+  "target": "Objetivo",
+  "plantTrees": "Plantar árboles",
+  "viewProfile": "Ver perfil",
+  "poweredBy": "Desarrollado por Plant-for-the-Planet",
+  "treesPlantedBy": "árboles plantados por",
+  "and": "y",
+  "treesPlantedByComm": "árboles plantados por la comunidad.",
+  "forestfrontrunners": "Fronteras del bosque",
+  "mostrecent": "MÁS RECIENTES",
+  "mosttrees": "LA MAYORÍA DE LOS ÁRBOLES",
+  "trees": "Árboles",
+  "the": "El",
+  "forestGrows": "El bosque crece."
+}
diff --git a/public/data/locales/fr.json b/public/data/locales/fr.json
@@ -0,0 +1,16 @@
+{
+  "treesPlanted": "Arbres plantés",
+  "target": "Cible",
+  "plantTrees": "Planter des arbres",
+  "viewProfile": "Voir le profil",
+  "poweredBy": "Propulsé par Plant-for-the-Planet",
+  "treesPlantedBy": "arbres plantés par",
+  "and": "et",
+  "treesPlantedByComm": "arbres plantés par la communauté.",
+  "forestfrontrunners": "Les pionniers de la forêt",
+  "mostrecent": "LE PLUS RÉCENT",
+  "mosttrees": "LA PLUPART DES ARBRES",
+  "trees": "Arbres",
+  "the": "Le",
+  "forestGrows": "La forêt grandit."
+}
diff --git a/public/data/locales/it.json b/public/data/locales/it.json
@@ -0,0 +1,16 @@
+{
+  "treesPlanted": "Alberi piantati",
+  "target": "Obiettivo",
+  "plantTrees": "Piantare alberi",
+  "viewProfile": "Visualizza il profilo",
+  "poweredBy": "Alimentato da Plant-for-the-Planet",
+  "treesPlantedBy": "alberi piantati da",
+  "and": "e",
+  "treesPlantedByComm": "alberi piantati dalla comunità.",
+  "forestfrontrunners": "Frontisti della foresta",
+  "mostrecent": "PIÙ RECENTI",
+  "mosttrees": "PIÙ ALBERI",
+  "trees": "Alberi",
+  "the": "Il sito",
+  "forestGrows": "La foresta cresce."
+}
diff --git a/public/data/locales/pt-BR.json b/public/data/locales/pt-BR.json
@@ -0,0 +1,16 @@
+{
+  "treesPlanted": "Árvores Plantadas",
+  "target": "Alvo",
+  "plantTrees": "Árvores de plantas",
+  "viewProfile": "Ver Perfil",
+  "poweredBy": "Movido por Planta para o Planeta",
+  "treesPlantedBy": "árvores plantadas por",
+  "and": "e",
+  "treesPlantedByComm": "árvores plantadas pela comunidade.",
+  "forestfrontrunners": "Frontrunners Florestais",
+  "mostrecent": "MAIS RECENTES",
+  "mosttrees": "MAIS ÁRVORES",
+  "trees": "Árvores",
+  "the": "O",
+  "forestGrows": "Forest Grows."
+}
diff --git a/public/index.html b/public/index.html
@@ -203,8 +203,12 @@ <h2 class="widgetTitle">Get started with a Widget</h2>
 					<select class="form-select" onchange="changeAttribute('treeMap',this.value,'locale')"
 						aria-label="Default select example">
 						<option value="en" selected>Select Language</option>
-						<option value="en">English</option>
-						<option value="de">Deutsch</option>
+						<option value="en">EN</option>
+						<option value="de">DE</option>
+						<option value="es">ES</option>
+						<option value="fr">FR</option>
+						<option value="it">IT</option>
+						<option value="pt-br">PT-BR</option>
 					</select>
 					<h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (Optional): </h2>
 						<select class="form-select" onchange="changeAttribute('treeMap',this.value,'theme')"
@@ -241,8 +245,12 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
 					<select class="form-select" onchange="changeAttribute('treeProfile',this.value,'locale')"
 						aria-label="Default select example">
 						<option value="en" selected>Select Language</option>
-						<option value="en">English</option>
-						<option value="de">Deutsch</option>
+						<option value="en">EN</option>
+						<option value="de">DE</option>
+						<option value="es">ES</option>
+						<option value="fr">FR</option>
+						<option value="it">IT</option>
+						<option value="pt-br">PT-BR</option>
 					</select>
 					<h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (Optional): </h2>
 						<div class="form-check form-switch">
@@ -280,15 +288,22 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
 					<select class="form-select" onchange="changeAttribute('treeTenantCounter',this.value,'locale')"
 						aria-label="Default select example">
 						<option value="en" selected>Select Language</option>
-						<option value="en">English</option>
-						<option value="de">Deutsch</option>
+						<option value="en">EN</option>
+						<option value="de">DE</option>
+						<option value="es">ES</option>
+						<option value="fr">FR</option>
+						<option value="it">IT</option>
+						<option value="pt-br">PT-BR</option>
 					</select>
 					<h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (Optional): </h2>
+						<input type="text" class="form-control" onblur="changeAttribute('treeTenantCounter',this.value,'forestname')"
+							placeholder="Forest Name"><br />
 						<select class="form-select" onchange="changeAttribute('treeTenantCounter',this.value,'theme')"
 							aria-label="Default select example">
-							<option value="light" selected>Select Theme</option>
+							<option value="light" >Select Theme</option>
 							<option value="light">Light</option>
 							<option value="dark">Dark</option>
+							<option value="forest" selected>Forest</option>
 						</select>
 						<div class="input-group">
 							<label for="primaryColor">Primary Color:</label>
@@ -307,8 +322,12 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
 					<select class="form-select" onchange="changeAttribute('treeTenantLeaderboard',this.value,'locale')"
 						aria-label="Default select example">
 						<option value="en" selected>Select Language</option>
-						<option value="en">English</option>
-						<option value="de">Deutsch</option>
+						<option value="en">EN</option>
+						<option value="de">DE</option>
+						<option value="es">ES</option>
+						<option value="fr">FR</option>
+						<option value="it">IT</option>
+						<option value="pt-br">PT-BR</option>
 					</select>
 					<h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (Optional): </h2>
 						<select class="form-select" onchange="changeAttribute('treeTenantLeaderboard',this.value,'theme')"
@@ -347,7 +366,7 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
 			</div>
 			<div id="treeTenantCounterWidget">
 				<div id="treeTenantCounterComponent">
-					<tree-tenantcounter tenantkey="ten_I9TW3ncG" goal="10000000000" id="treeTenantCounter">
+					<tree-tenantcounter tenantkey="ten_I9TW3ncG" theme="forest" id="treeTenantCounter">
 					</tree-tenantcounter>
 				</div>
 				<div id="treeTenantCounterCode" class="code-container"></div>

diff --git a/src/TreeMap/App.svelte b/src/TreeMap/App.svelte
@@ -11,6 +11,10 @@
   import getImageUrl from "../../utils/getImageUrl";
   import enLocale from "./../../public/data/locales/en.json";
   import deLocale from "./../../public/data/locales/de.json";
+  import esLocale from "./../../public/data/locales/es.json";
+  import frLocale from "./../../public/data/locales/fr.json";
+  import itLocale from "./../../public/data/locales/it.json";
+  import ptBRLocale from "./../../public/data/locales/pt-BR.json";
   import { onMount } from "svelte";
   import getTenantConfig from "../../utils/tenantsConfig";
   let w;
@@ -33,6 +37,10 @@
   let language = [];
   language["en"] = enLocale;
   language["de"] = deLocale;
+  language["es"] = esLocale;
+  language["fr"] = frLocale;
+  language["it"] = itLocale;
+  language["pt-br"] = ptBRLocale;
 
   let promise = fetchData();
   let mapStyle;
@@ -235,6 +243,7 @@
               size * 2
             }px;position:absolute;`}
           >
+          {#if data.score.target > data.score.personal + data.score.received}
             <circle
               cx={size}
               cy={size}
@@ -250,6 +259,23 @@
                     data.score.target)}
               fill="transparent"
             />
+            {:else if data.score.target < data.score.personal + data.score.received}
+            <circle
+              cx={size}
+              cy={size}
+              r={radius}
+              stroke={primarycolor}
+              stroke-linecap="round"
+              stroke-width="16"
+              transform={`rotate(-90,${size},${size})`}
+              stroke-dasharray={circumference}
+              stroke-dashoffset={circumference *
+                (1 ==
+                  (data.score.personal + data.score.received) /
+                    data.score.target)}
+              fill="transparent"
+            />
+            {/if}
           </svg>
         </div>
         <a
@@ -289,18 +315,23 @@
         />
       {/if}
       <div class="footer">
-        <a
-          href={`${getTenantConfig(tenantkey).url}/t/${data.slug}`}
-          target="_blank"
-          class="footerLink"
-          >{language[locale].viewProfile}
-        </a>
-        <a
-          class="footerLinkBold"
-          href={"https://a.plant-for-the-planet.org/"}
-          target="_blank"
-          >| {language[locale].poweredBy}
-        </a>
+        <div class="footerContainer">
+          <div class="footerLink">
+            <a
+              href={`${getTenantConfig(tenantkey).url}/t/${data.slug}`}
+              target="_blank"
+              >{language[locale].viewProfile}
+            </a>
+          </div>
+          <div class="footerLinkBold">
+            <a
+              href={"https://a.plant-for-the-planet.org/"}
+              target="_blank"
+              >
+              <div class="seperater">|</div>
+              {language[locale].poweredBy}
+            </a>
+
         {#if community === "true"}
           <div
             class="infoIcon"
@@ -335,9 +366,15 @@
             </p>
           </div>
         {/if}
+        </div>
+        </div>
       </div>
       <div class="imageHeader">
         {#if data.image}
+        <div
+            class="logoPlanet"
+            style={`background-color:${theme === "dark" ? "#2f3336" : ""}`}
+          >
           <a
             href={`${getTenantConfig(tenantkey).url}/t/${data.slug}`}
             target="_blank"
@@ -348,6 +385,7 @@
               alt={data.displayName}
             />
           </a>
+        </div>
         {/if}
         {#if data.hasLogoLicense}
           <div
@@ -518,24 +556,48 @@
     bottom: 12px;
     right: 12px;
   }
-  .footerLink {
+  .footerLink > a, .footerLinkBold > a {
     color: var(--link-color);
     text-decoration: none;
   }
   .footerLinkBold {
-    color: var(--link-color);
     font-weight: bold;
     margin-left: 4px;
-    text-decoration: none;
+    display: flex;
+    flex-direction: row;
+  }
+  .seperater{
+    padding-right: 4px;
+  }
+  .footerContainer{
+    display: flex;
+    flex-direction: row;
   }
-
   .imageHeader {
     position: absolute;
     top: 12px;
     right: 12px;
     display: flex;
     flex-direction: row;
   }
+  @media screen and (max-width: 376px){
+    .footerContainer{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+    margin-right: 6px;
+  }
+  .footerLink{
+    margin-bottom: 6px;
+  }
+  .seperater{
+    display: none;
+  }
+  }
+
+
 
   .logo {
     border-radius: 50%;
@@ -599,6 +661,8 @@
   }
 
   a {
+    display: flex;
+    flex-direction: row;
     text-decoration: none;
   }
 
@@ -627,6 +691,7 @@
     width: 220px;
     border-radius: 4px;
     text-align: center;
+    font-weight: normal;
   }
 
   .infoIcon > .infoText {