From 6cda98a8f11ae2aed7700ca3b77c83276e46a5ac Mon Sep 17 00:00:00 2001 From: wangbertha Date: Sun, 24 Nov 2024 10:56:03 -0600 Subject: [PATCH 01/20] Create popup for Email This Building message --- src/components/layout/Popup.vue | 46 +++++++++++++++ src/templates/BuildingDetails.vue | 97 +++++++++++++++++++++++++++++++ 2 files changed, 143 insertions(+) create mode 100644 src/components/layout/Popup.vue diff --git a/src/components/layout/Popup.vue b/src/components/layout/Popup.vue new file mode 100644 index 00000000..e28d8a4c --- /dev/null +++ b/src/components/layout/Popup.vue @@ -0,0 +1,46 @@ + + + + + \ No newline at end of file diff --git a/src/templates/BuildingDetails.vue b/src/templates/BuildingDetails.vue index ddcce133..389a7bcd 100644 --- a/src/templates/BuildingDetails.vue +++ b/src/templates/BuildingDetails.vue @@ -466,6 +466,34 @@ query ($id: ID!, $ID: String) {

+ + +
+ +

Email This Building

+
+ +
@@ -496,6 +524,8 @@ import { } from '../common-functions.vue'; import { IGraphPoint } from '../components/graphs/BarGraph.vue'; import PieChart, { IPieSlice } from '../components/graphs/PieChart.vue'; +import Popup from '../components/layout/Popup.vue'; +import { ref } from 'vue'; const EnergyBreakdownColors = { DistrictChilling: '#01295F', @@ -521,6 +551,7 @@ const EnergyBreakdownColors = { PieChart, StatTile, ReportingTile, + Popup, }, filters: { titlecase(value: string) { @@ -846,6 +877,72 @@ export default class BuildingDetails extends Vue { li + li { margin-top: 0.25rem; } } + .email-this-building { + .popup-inner { + width: 24rem; + margin: auto auto; + } + + * { + margin: 0; + padding: 0; + } + + header { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + background-color: #0066ff; + color: #fff; + padding: 0.75rem; + + img { + height: 1.25rem; + } + } + + .email-prompt-wrapper { + padding: 1rem; + + .prompt { + font-size: 1.25rem; + font-weight: 700; + } + + .description { + font-size: 0.75rem; + } + + .email-this-building-subheader { + display: flex; + gap: 0.5rem; + margin-top: 0.75rem; + margin-bottom: 0.25rem; + + button { + background-color: #0066ff; + color: #fff; + line-height: 0.75rem; + font-size: 0.75rem; + font-weight: 300; + border: none; + padding: 0 0.25rem 0 0.25rem; + + img { + height: 0.75rem; + } + } + } + } + + .email-box { + border: 1px solid #555555; + padding: 0.25rem; + font-size: 0.75rem; + } + } + /** Small desktop sizing - split to just two columns from three */ @media (max-width: 1200px) { .main-cols { flex-direction: column-reverse; } From de95c96249d2ad15e1a5550a9f517ce1c686ad0d Mon Sep 17 00:00:00 2001 From: wangbertha Date: Tue, 3 Dec 2024 21:14:41 -0600 Subject: [PATCH 02/20] Create open/close functionality in Popup modal --- src/components/layout/Popup.vue | 10 ++++++++-- src/templates/BuildingDetails.vue | 6 +++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/layout/Popup.vue b/src/components/layout/Popup.vue index e28d8a4c..1e3b3abe 100644 --- a/src/components/layout/Popup.vue +++ b/src/components/layout/Popup.vue @@ -2,14 +2,20 @@ diff --git a/src/templates/BuildingDetails.vue b/src/templates/BuildingDetails.vue index 389a7bcd..09811303 100644 --- a/src/templates/BuildingDetails.vue +++ b/src/templates/BuildingDetails.vue @@ -467,7 +467,9 @@ query ($id: ID!, $ID: String) {

-