Hide Site & Source EUI behind <details>

vkoves · Aug 21, 2024 · 530d507 · 530d507
1 parent 879f1e4
commit 530d507
Showing 1 changed file with 41 additions and 26 deletions.
diff --git a/src/templates/BuildingDetails.vue b/src/templates/BuildingDetails.vue
@@ -231,32 +231,6 @@ query ($id: ID!, $ID: String) {
           </dd>
         </div>
 
-        <div>
-          <dt>Source Energy Usage Intensity</dt>
-          <dd>
-            <StatTile
-              :building="$page.building"
-              :stat-key="'SourceEUI'"
-              :stats="BuildingBenchmarkStats"
-              :unit="'kBtu / sqft'"
-            />
-          </dd>
-        </div>
-
-        <div>
-          <dt>Site Energy Usage Intensity</dt>
-          <dd>
-            <StatTile
-              :building="$page.building"
-              :stat-key="'SiteEUI'"
-              :stats="BuildingBenchmarkStats"
-              :unit="'kBtu / sqft'"
-            />
-
-            {{ $page.buildingSiteEUIRank }}
-          </dd>
-        </div>
-
         <div>
           <dt>Natural Gas Use</dt>
           <dd>
@@ -308,6 +282,40 @@ query ($id: ID!, $ID: String) {
         </div>
       </dl>
 
+      <details>
+        <summary class="bold">
+          View Technical Info
+        </summary>
+
+        <dl class="supp-info">
+          <div>
+            <dt>Source Energy Usage Intensity</dt>
+            <dd>
+              <StatTile
+                :building="$page.building"
+                :stat-key="'SourceEUI'"
+                :stats="BuildingBenchmarkStats"
+                :unit="'kBtu / sqft'"
+              />
+            </dd>
+          </div>
+
+          <div>
+            <dt>Site Energy Usage Intensity</dt>
+            <dd>
+              <StatTile
+                :building="$page.building"
+                :stat-key="'SiteEUI'"
+                :stats="BuildingBenchmarkStats"
+                :unit="'kBtu / sqft'"
+              />
+
+              {{ $page.buildingSiteEUIRank }}
+            </dd>
+          </div>
+        </dl>
+      </details>
+
       <h2>Historical Data</h2>
 
       <HistoricalBuildingDataTable :historic-benchmarks="historicData" />
@@ -711,6 +719,8 @@ export default class BuildingDetails  extends Vue {
     flex-wrap: wrap;
     gap: 2rem;
     margin: 0;
+
+    &.supp-info { margin-top: 1rem; }
   }
 
   .emission-stats {
@@ -736,6 +746,11 @@ export default class BuildingDetails  extends Vue {
     .stat-tile { min-width: 18rem; }
   }
 
+  details {
+    border: solid 0.01625rem $grey-dark;
+    padding: 1rem;
+  }
+
   ul {
     margin-top: 0.5rem;