From 00a0679123d70435ca1ef5ddb6631cfd2693ca53 Mon Sep 17 00:00:00 2001 From: rishsingh07 Date: Thu, 1 Apr 2021 16:09:01 +0530 Subject: [PATCH 1/3] Home page responsiveness --- public/sample.html | 449 +++++++++++++++++++++++++++++++++++++++++ src/TreeMap/App.svelte | 43 +--- 2 files changed, 460 insertions(+), 32 deletions(-) create mode 100644 public/sample.html diff --git a/public/sample.html b/public/sample.html new file mode 100644 index 0000000..3176bc2 --- /dev/null +++ b/public/sample.html @@ -0,0 +1,449 @@ + + + + Bootstrap Example + + + + + Planet Widgets + + + + + + + + + + + +
+
+
+
+
+

Get started with a Widget

+
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+

Customization Options (Optional):

+
+
+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+

Customization Options (Optional):

+
+
+
+ + +
+
+
+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/src/TreeMap/App.svelte b/src/TreeMap/App.svelte index e1e434e..3d69cf9 100644 --- a/src/TreeMap/App.svelte +++ b/src/TreeMap/App.svelte @@ -13,7 +13,7 @@ import deLocale from "./../../public/data/locales/de.json"; import { onMount } from "svelte"; import getTenantConfig from "../../utils/tenantsConfig"; - +let w,h; // Props that can be passed export let user; export let primarycolor = "#68b030"; @@ -188,10 +188,11 @@ }); }; - +
640 ? "treeMapContainer" : "treemap"}`} bind:clientWidth={w} bind:clientHeight={h}> +

Size: {w}px{h}px

An error occurred!

{/await}
+
@@ -362,6 +364,11 @@ /* @import "https://api.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css"; */ @import "https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"; @import "https://widgets.plant-for-the-planet.org/map.css"; + .treeMapContainer{ + display: flex; + flex-direction: column; + background-color: violet; + } .treemap { width: 100%; border-radius: 10px; @@ -521,34 +528,6 @@ border-radius: 50%; } - @media screen and (min-width: 640px) { - .treemap { - flex-direction: row; - } - .treeCounterContainer { - border-top-right-radius: 0px; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - } - .mapContainer { - width: 100%; - } - .view { - width: 100%; - } - } - - @media screen and (min-width: 940px) { - .treemap { - width: 940px; - } - .mapContainer { - width: 520px; - } - .view { - width: 520px; - } - } .marker { height: 30px; From c644b5ed48363b6f60177d2a0c63d202b74c9bcd Mon Sep 17 00:00:00 2001 From: Sarvesh Warge Date: Thu, 1 Apr 2021 18:35:27 +0530 Subject: [PATCH 2/3] remove sample file --- public/sample.html | 449 --------------------------------------------- 1 file changed, 449 deletions(-) delete mode 100644 public/sample.html diff --git a/public/sample.html b/public/sample.html deleted file mode 100644 index 3176bc2..0000000 --- a/public/sample.html +++ /dev/null @@ -1,449 +0,0 @@ - - - - Bootstrap Example - - - - - Planet Widgets - - - - - - - - - - - -
-
-
-
-
-

Get started with a Widget

-
-
-
- -
-
-
-
-
- -
-
-
-
- -
-
-

Customization Options (Optional):

-
-
- -
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
- -
-
-
- -
-
-
-
- -
-
-

Customization Options (Optional):

-
-
-
- - -
-
-
- -
-
-
- - -
-
-
-
- - -
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
- -
-
-
-
-
- - -
-
-
-
-
-
- -
-
-
-
-
- - - - \ No newline at end of file From 903e8b4036dcd8cdd8f0a5064b0418cce5eee995 Mon Sep 17 00:00:00 2001 From: Sarvesh Warge Date: Thu, 1 Apr 2021 19:06:36 +0530 Subject: [PATCH 3/3] fix responsiveness --- src/TreeMap/App.svelte | 362 ++++++++++++++++++++++------------------- 1 file changed, 194 insertions(+), 168 deletions(-) diff --git a/src/TreeMap/App.svelte b/src/TreeMap/App.svelte index 81d9614..feef558 100644 --- a/src/TreeMap/App.svelte +++ b/src/TreeMap/App.svelte @@ -13,7 +13,7 @@ import deLocale from "./../../public/data/locales/de.json"; import { onMount } from "svelte"; import getTenantConfig from "../../utils/tenantsConfig"; - let w, h; + let w; // Props that can be passed export let user; export let primarycolor = "#68b030"; @@ -55,6 +55,8 @@ }, 5000); return () => clearInterval(fast); } else refresh === "none"; + let el = document.getElementById("treeMap"); + el.style.width = "100%"; return; }); @@ -190,182 +192,186 @@
640 ? "treeMapContainer" : "treemap"}`} + class={`treemap ${w > 640 ? "landscape" : "portrait"}`} bind:clientWidth={w} - bind:clientHeight={h} + style="--widgetWidth:{w};--primary-color: {primarycolor};--counter-background-color: {counterbgcolor}; --background-color: {theme === + 'light' + ? '#fff' + : '#2f3336'}; --link-color: {theme === 'light' ? '#6daff0' : '#fff'}" > -

Size: {w}px{h}px

-
- {#await promise} - - {:then data} -
-
-
-
+ {#await promise} + + {:then data} +
640 ? "w40" : "w100"}`}> +
+
+
+
+

+ {community === "true" + ? localizedAbbreviatedNumber( + locale, + data.score.personal + data.score.received, + 1 + ) + : localizedAbbreviatedNumber(locale, data.score.personal, 1)} +

+

+ {language[locale].treesPlanted} +

+
+ {#if data.score.target != 0}
-

- {community === "true" - ? localizedAbbreviatedNumber( - locale, - data.score.personal + data.score.received, - 1 - ) - : localizedAbbreviatedNumber( - locale, - data.score.personal, - 1 - )} -

-

- {language[locale].treesPlanted} +

+ {localizedAbbreviatedNumber(locale, data.score.target, 1)}

+

{language[locale].target}

- {#if data.score.target != 0} -
-

- {localizedAbbreviatedNumber(locale, data.score.target, 1)} -

-

{language[locale].target}

-
- {/if} -
+ {/if} +
+ + + +
+ {language[locale].plantTrees} +
+
+
640 ? "w60" : "w100"}`}> + {#if community === "true"} + {#if theme === "light"} +
640 ? "viewLandscape" : "viewPortrait"}`} + use:createMap + /> + {:else} +
640 ? "viewLandscape" : "viewPortrait"}`} + use:createMap + /> + {/if} + {:else if theme === "light"} +
640 ? "viewLandscape" : "viewPortrait"}`} + use:createMap + /> + {:else} +
640 ? "viewLandscape" : "viewPortrait"}`} + use:createMap + /> + {/if} +
+ {language[locale].viewProfile} + + | {language[locale].poweredBy} + + {#if community === "true"} +
- +

+ {localizedAbbreviatedNumber( + locale, + Number(data.score.personal), + 1 + )} + {language[locale].treesPlantedBy} + {data.displayName} + {community === "true" + ? `${language[locale].and} ${localizedAbbreviatedNumber( + locale, + Number(data.score.received), + 1 + )} ${language[locale].treesPlantedByComm}` + : ""} +

- {language[locale].plantTrees} -
-
-
- {#if community === "true"} - {#if theme === "light"} -
- {:else} -
- {/if} - {:else if theme === "light"} -
- {:else} -
{/if} -
+
+
+ {#if data.image} {language[locale].viewProfile} - - | {language[locale].poweredBy} + > + - {#if community === "true"} -
- - - -

- {localizedAbbreviatedNumber( - locale, - Number(data.score.personal), - 1 - )} - {language[locale].treesPlantedBy} - {data.displayName} - {community === "true" - ? `${language[locale].and} ${localizedAbbreviatedNumber( - locale, - Number(data.score.received), - 1 - )} ${language[locale].treesPlantedByComm}` - : ""} -

-
- {/if} -
-
- {#if data.image} - + {/if} + {#if data.hasLogoLicense} +
+ {#if theme === "dark"} - - {/if} - {#if data.hasLogoLicense} -
- {#if theme === "dark"} - Plant-for-the-Planet Logo - {:else} - Plant-for-the-Planet Logo - {/if} -
- {/if} -
+ {:else} + Plant-for-the-Planet Logo + {/if} +
+ {/if}
- {:catch error} -

An error occurred!

- {/await} -
+
+ {:catch error} +

An error occurred!

+ {/await}