From 94dab08212edda60263c26b2ad510bdc5b892d28 Mon Sep 17 00:00:00 2001
From: wangbertha
Date: Wed, 4 Dec 2024 16:19:01 -0600
Subject: [PATCH 12/20] Fix Building URL path in Email Body
---
src/templates/BuildingDetails.vue | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/templates/BuildingDetails.vue b/src/templates/BuildingDetails.vue
index 4428d2c6..3b859109 100644
--- a/src/templates/BuildingDetails.vue
+++ b/src/templates/BuildingDetails.vue
@@ -3,6 +3,7 @@
query ($id: ID!, $ID: String) {
building(id: $id) {
slugSource
+ path
ID
DataYear
Address
@@ -484,7 +485,7 @@ query ($id: ID!, $ID: String) {
You can see more at
- https://electrifychicago.net/building/{{ $page.building.ID }}
+ https://electrifychicago.net{{ $page.building.path }}
From 3e88fd2616b5f6623ee8c490109c0fb35e4c7ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20K=C3=B6ves?=
<3187531+vkoves@users.noreply.github.com>
Date: Fri, 6 Dec 2024 20:49:25 -0600
Subject: [PATCH 13/20] Move Popup to
What's Our Building's Plan For Reducing Emissions?
@@ -69,7 +69,7 @@
/>
@@ -106,11 +106,13 @@ import Popup from '../components/layout/Popup.vue';
* A modal to email a given building
*/
@Component({
- components: {
- Popup,
- },
+ components: {
+ Popup,
+ },
})
export default class EmailBuildingModal extends Vue {
+ readonly CopyNoticeDurMs: number = 1500;
+
@Prop({required: true}) building!: IBuilding;
/** Emit on modal close */
@@ -119,33 +121,45 @@ export default class EmailBuildingModal extends Vue {
return true;
}
- copyElementTextToClipboard(id: string, noticeRef: HTMLElement): void {
+ copyElementTextToClipboard(contentRef: HTMLElement, noticeRef: HTMLElement): void {
try {
- const content = document.getElementById(id)!.innerText;
+ const content = contentRef.innerText;
navigator.clipboard.writeText(content);
-
- // Show a "Copied" message
- noticeRef.innerText = 'Copied!';
- noticeRef.classList.add('-visible');
-
- setTimeout(() => {
- noticeRef.classList.remove('-visible');
-
- // Wait till after the animation to remove the text
- setTimeout(() => noticeRef.innerText = '', 300);
- }, 1500);
+ this.showCopiedNotice(noticeRef);
}
catch (error) {
console.error(error);
}
}
+ /**
+ * Fade in and out a copy notice
+ */
+ showCopiedNotice(noticeElem: HTMLElement): void {
+ // Show a "Copied" message
+ noticeElem.innerText = 'Copied!';
+ noticeElem.classList.add('-visible');
+
+ setTimeout(() => {
+ noticeElem.classList.remove('-visible');
+
+ // Wait till after the animation to remove the text
+ setTimeout(() => noticeElem.innerText = '', 300);
+ }, this.CopyNoticeDurMs);
+ }
+
copyBody(): void {
- this.copyElementTextToClipboard('email-body', this.$refs['body-copied'] as HTMLElement);
+ this.copyElementTextToClipboard(
+ this.$refs['email-body'] as HTMLElement,
+ this.$refs['body-copied'] as HTMLElement,
+ );
}
copySubject(): void {
- this.copyElementTextToClipboard('email-subj', this.$refs['subj-copied'] as HTMLElement);
+ this.copyElementTextToClipboard(
+ this.$refs['email-subj'] as HTMLElement,
+ this.$refs['subj-copied'] as HTMLElement,
+ );
}
}
From 378a70593e9e8a18c063ec4dce20333bb542ba1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20K=C3=B6ves?=
<3187531+vkoves@users.noreply.github.com>
Date: Fri, 6 Dec 2024 21:19:38 -0600
Subject: [PATCH 17/20] Migrate SCSS
---
src/components/EmailBuildingModal.vue | 90 ++++++++++++++++++++++++++-
src/templates/BuildingDetails.vue | 85 -------------------------
2 files changed, 87 insertions(+), 88 deletions(-)
diff --git a/src/components/EmailBuildingModal.vue b/src/components/EmailBuildingModal.vue
index 24578fda..8152cb2d 100644
--- a/src/components/EmailBuildingModal.vue
+++ b/src/components/EmailBuildingModal.vue
@@ -165,8 +165,92 @@ export default class EmailBuildingModal extends Vue {
diff --git a/src/templates/BuildingDetails.vue b/src/templates/BuildingDetails.vue
index 5fa3349e..8c07c26a 100644
--- a/src/templates/BuildingDetails.vue
+++ b/src/templates/BuildingDetails.vue
@@ -847,91 +847,6 @@ export default class BuildingDetails extends Vue {
li + li { margin-top: 0.25rem; }
}
- .email-this-building {
- .popup-inner {
- max-width: 37.5rem; // 600px
- margin: auto auto;
- }
-
- * {
- margin: 0;
- padding: 0;
- }
-
- .header {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 2rem;
- background-color: #0066ff;
- color: $white;
- padding: 1.5rem;
-
- img { height: 2rem; }
- }
-
- h2 { margin-top: 1rem; }
-
- .email-prompt-wrapper {
- padding: 2rem;
-
- .prompt {
- font-size: 1.75rem;
- font-weight: 700;
- }
-
- .email-this-building-subheader {
- display: flex;
- gap: 0.5rem;
- margin-top: 0.75rem;
- margin-bottom: 0.2rem;
- align-items: flex-end;
-
- button.copy-btn {
- background-color: $blue-dark;
- color: $white;
- font-weight: bold;
- border: none;
- padding: 0.25rem 0.5rem;
- margin-left: 0.5rem;
- margin-bottom: 0.2rem;
-
- &:hover, &:focus { background-color: $blue-very-dark; }
-
- img {
- height: 0.75rem;
- margin-left: 0.4rem;
- }
- }
- }
-
- .copy-notice {
- margin-left: 0.25rem;
- margin-bottom: 0.4rem;
- opacity: 0;
- transition: opacity 0.3s; // fade in text
-
- &.-visible { opacity: 1; }
- }
-
- .email-box {
- border: solid $border-thin $black;
- padding: 0.75rem;
- border-radius: $brd-rad-small;
-
- &.-body { padding: 1rem 0.75rem}
-
- p + p { margin-top: 1em; }
-
- .to-replace {
- font-weight: 700;
- font-style: italic;
- }
- }
- }
-
- }
-
/** Small desktop sizing - split to just two columns from three */
@media (max-width: 1200px) {
.main-cols { flex-direction: column-reverse; }
From 220f5a55992095673b5e018631c974b229d02326 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20K=C3=B6ves?=
<3187531+vkoves@users.noreply.github.com>
Date: Fri, 6 Dec 2024 21:28:48 -0600
Subject: [PATCH 18/20] Add back building-img-cont class
---
src/components/BuildingImage.vue | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/BuildingImage.vue b/src/components/BuildingImage.vue
index 2662fd4d..7b33d1aa 100644
--- a/src/components/BuildingImage.vue
+++ b/src/components/BuildingImage.vue
@@ -1,6 +1,7 @@
From b3a69703d8e0c79ba1db0c596ba98747aa7ac0ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20K=C3=B6ves?=
<3187531+vkoves@users.noreply.github.com>
Date: Fri, 6 Dec 2024 21:32:18 -0600
Subject: [PATCH 19/20] Tweak email subject The What's felt too informal
---
src/components/EmailBuildingModal.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/EmailBuildingModal.vue b/src/components/EmailBuildingModal.vue
index 8152cb2d..62b0e0ae 100644
--- a/src/components/EmailBuildingModal.vue
+++ b/src/components/EmailBuildingModal.vue
@@ -45,7 +45,7 @@
ref="email-subj"
class="email-box"
>
- What's Our Building's Plan For Reducing Emissions?
+ What Is Our Building's Plan For Reducing Emissions?