Skip to content

Commit

Permalink
Merge pull request #76 from Plant-for-the-Planet-org/develop
Browse files Browse the repository at this point in the history 
Release with new theme on all counters and fixes
  • Loading branch information
@sagararyal
sagararyal authored Jun 9, 2021
2 parents 1f7552c + bdc7f50 commit 0d15168
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 77 deletions.
25 changes: 15 additions & 10 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,11 +211,14 @@ <h2 class="widgetTitle">Get started with a Widget</h2>
<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('treeMap',this.value,'forestname')"
placeholder="Forest Name"><br />
<select class="form-select" onchange="changeAttribute('treeMap',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="form-check form-switch">
<input class="form-check-input"
Expand Down Expand Up @@ -253,20 +256,22 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
<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('treeProfile',this.value,'forestname')"
placeholder="Forest Name"><br />
<select class="form-select" onchange="changeAttribute('treeProfile',this.value,'theme')"
aria-label="Default select example">
<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="form-check form-switch">
<input class="form-check-input"
onclick="changeAttribute('treeProfile',this.checked,'community')" type="checkbox"
id="treeProfile-community-switch" checked>
<label class="form-check-label" for="treeMap-community-switch">Show community</label>
</div>

<select class="form-select" onchange="changeAttribute('treeProfile',this.value,'theme')"
aria-label="Default select example">
<option value="light" selected>Select Theme</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>

<div class="input-group">
<label for="primaryColor">Primary Color:</label>
<input class="colorPicker" type="color" id="primaryColor" name="primaryColor"
Expand Down Expand Up @@ -344,7 +349,7 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
<div class="col-lg-12 col-xl-8 widgetContainer">
<div id="treeMapWidget">
<div id="treeMapComponent">
<tree-map user='sagar-aryal' tenantkey="ten_I9TW3ncG" id="treeMap">
<tree-map user='sagar-aryal' tenantkey="ten_I9TW3ncG" theme="forest" id="treeMap">
</tree-map>
</div>
<div id="treeMapCode" class="code-container"></div>
Expand All @@ -355,7 +360,7 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
</div>
<div id="treeProfileWidget">
<div id="treeProfileComponent">
<tree-profile user='sagar-aryal' tenantkey="ten_I9TW3ncG" id="treeProfile">
<tree-profile user='sagar-aryal' tenantkey="ten_I9TW3ncG" theme="forest" id="treeProfile">
</tree-profile>
</div>
<div id="treeProfileCode" class="code-container"></div>
Expand Down
83 changes: 58 additions & 25 deletions src/TreeMap/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
import ptBRLocale from "./../../public/data/locales/pt-BR.json";
import { onMount } from "svelte";
import getTenantConfig from "../../utils/tenantsConfig";
import TcBackground from '../common/themes/leniKlum/TcBackground.svelte';
let w;
// Props that can be passed
export let user;
Expand All @@ -27,6 +28,8 @@
export let locale = "en";
export let refresh = "none";
export let tenantkey = "ten_I9TW3ncG";
export let forestname;
$: primarycolor = primarycolor;
$: counterbgcolor = circlebgcolor
? circlebgcolor
Expand Down Expand Up @@ -84,7 +87,7 @@
// https://svelte.school/tutorials/introduction-to-actions
const createMap = async (domNode) => {
fetchTiles(
theme === "light" ? mapStyleLight : mapStyleDark,
theme === "light" || "forest" ? mapStyleLight : mapStyleDark,
"https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer"
).then((style) => {
if (style) {
Expand Down Expand Up @@ -202,42 +205,63 @@
<div
class={`treemap ${w > 640 ? "landscape" : "portrait"}`}
bind:clientWidth={w}
style="--widgetWidth:{w};--primary-color: {primarycolor};--counter-background-color: {counterbgcolor}; --background-color: {theme ===
'light'
? '#fff'
: '#2f3336'}; --link-color: {theme === 'light' ? '#6daff0' : '#fff'}"
style="--widgetWidth:{w};--primary-color: {primarycolor};
--counter-background-color: {theme === 'forest'
? 'transparent'
: counterbgcolor};
--background-color: {theme === 'light'
? '#fff'
: theme === 'dark'
? '#2f3336'
: '#fff'};
--link-color: {theme === 'light' || "forest" ? '#6daff0' : '#fff'}"
>
{#await promise}
<UserProfileLoader />
{:then data}
<div class={`treeCounterContainer ${w > 640 ? "w40" : "w100"}`}>
<div class="mainContainer">
<div class="treeCounterComponent">
<div class="treeCounter">
{#if theme === "forest"}
<div class={"customBackground"}>
<TcBackground />
</div>
{/if}
<div class="treeCounter">
<div class="textContainer">
<p class={`treecount ${theme === "dark" ? "planted" : ""}`}>
{community === "true"
? localizedAbbreviatedNumber(
locale,
data.score.personal + data.score.received,
1
)
: localizedAbbreviatedNumber(locale, data.score.personal, 1)}
</p>
</div>
{#if forestname}
<div class="textContainer">
<p class={`treecount ${theme === "dark" ? "planted" : ""}`}>
{community === "true"
? localizedAbbreviatedNumber(
locale,
data.score.personal + data.score.received,
1
)
: localizedAbbreviatedNumber(locale, data.score.personal, 1)}
<p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
{language[locale].trees}.
</p>
<p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
{language[locale].treesPlanted}
{language[locale].the} {forestname} {language[locale].forestGrows}
</p>
</div>
{#if data.score.target != 0}
<div class="textContainer">
<p class="treecount">
{localizedAbbreviatedNumber(locale, data.score.target, 1)}
</p>
<p class="treecountLabel">{language[locale].target}</p>
</div>
{/if}
</div>

{:else}
<div class="textContainer">
<p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
{language[locale].treesPlanted}
</p>
{#if data.score.target != 0}
<p class="treecount">
{localizedAbbreviatedNumber(locale, data.score.target, 1)}
</p>
<p class="treecountLabel">{language[locale].target}</p>
{/if}
</div>
{/if}
</div>
<svg
style={`width:${size * 2}px; height:${
size * 2
Expand Down Expand Up @@ -473,6 +497,12 @@
padding-right: 10px;
padding-left: 10px;
}
.customBackground {
width: 100%;
height: 100%;
position: absolute;
}
.treeCounterComponent {
height: 295px;
width: 295px;
Expand All @@ -493,6 +523,7 @@
justify-content: center;
align-items: center;
text-align: center;
z-index: 1;
}
.treecount {
font-size: 48px;
Expand All @@ -508,6 +539,8 @@
text-align: center;
color: white;
margin: 0px;
max-width: 220px;
word-wrap: break-word;
}
.planted {
color: var(--primary-color);
Expand Down
63 changes: 44 additions & 19 deletions src/TreeProfile/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
import ptBRLocale from "./../../public/data/locales/pt-BR.json";
import { onMount } from "svelte";
import getTenantConfig from "../../utils/tenantsConfig";
import TcBackground from '../common/themes/leniKlum/TcBackground.svelte'
// Props that can be passed
export let user;
export let primarycolor = "#68b030";
Expand All @@ -23,6 +23,8 @@
export let locale = "en";
export let refresh = "none";
export let tenantkey = "ten_I9TW3ncG";
export let forestname;
$: primarycolor = primarycolor;
$: counterbgcolor = circlebgcolor
? circlebgcolor
Expand Down Expand Up @@ -67,20 +69,29 @@
</script>

<div
class="treecounter"
class="treeProfile"
style="--primary-color: {primarycolor};
--counter-background-color: {counterbgcolor};
--counter-background-color: {theme === 'forest'
? 'transparent'
: counterbgcolor};
--background-color: {theme ===
'light'
? '#fff'
: '#2f3336'};
--link-color: {theme === 'light' ? '#6daff0' : '#fff'}"
: theme === "dark" ?
'#2f3336' :
'#fff'};
--link-color: {theme === 'light'|| "forest" ? '#6daff0' : '#fff'}"
>
{#await promise}
<UserProfileLoader />
{:then data}
<div class="treeCounterContainer">
<div class="treeCounterComponent">
{#if theme === "forest"}
<div class={"customBackground"}>
<TcBackground />
</div>
{/if}
<div class="treeCounter">
<div class="textContainer">
<p class={`treecount ${theme === "dark" ? "planted" : ""}`}>
Expand All @@ -92,24 +103,30 @@
)
: localizedAbbreviatedNumber(locale, data.score.personal, 1)}
</p>
<p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
{language[locale].treesPlanted}
</p>
</div>
{#if data.score.target != 0}
{#if forestname}
<div class="textContainer">
<p class="treecount">
{localizedAbbreviatedNumber(
locale,
Number(data.score.target),
1
)}
<p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
{language[locale].trees}.
</p>
<p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
{language[locale].the} {forestname} {language[locale].forestGrows}
</p>
<p class="treecountLabel">{language[locale].target}</p>
</div>
{/if}
{:else}
<div class="textContainer">
<p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
{language[locale].treesPlanted}
</p>
{#if data.score.target != 0}
<p class="treecount">
{localizedAbbreviatedNumber(locale, data.score.target, 1)}
</p>
<p class="treecountLabel">{language[locale].target}</p>
{/if}
</div>
{/if}
</div>

<svg
style={`width:${size * 2}px; height:${size * 2}px;position:absolute;`}
>
Expand Down Expand Up @@ -250,7 +267,7 @@
all: initial;
}
.treecounter {
.treeProfile {
width: 100%;
max-width: 420px;
border-radius: 10px;
Expand Down Expand Up @@ -304,6 +321,12 @@
justify-content: center;
align-items: center;
text-align: center;
z-index: 1;
}
.customBackground {
width: 100%;
height: 100%;
position: absolute;
}
.treecount {
font-size: 48px;
Expand All @@ -320,6 +343,8 @@
color: white;
margin: 0px;
margin-top: 6px;
max-width: 195px;
word-wrap: break-word;
}
.primaryButton {
color: white;
Expand Down
Loading

1 comment on commit 0d15168

@vercel
Copy link

@vercel vercel bot commented on 0d15168 Jun 9, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.