Fix global table styling and tweak historical data padding

vkoves · May 1, 2024 · ee750e3 · ee750e3
1 parent bc61077
commit ee750e3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/components/BuildingsTable.vue b/src/components/BuildingsTable.vue
@@ -33,7 +33,7 @@ export default class BuildingsTable extends Vue {
 </script>
 
 <template>
-  <div class="table-cont">
+  <div class="buildings-table-cont">
     <table :class="{ '-wide': showSquareFootage || showGasUse || showElectricityUse }">
       <thead>
         <tr>
@@ -196,7 +196,7 @@ export default class BuildingsTable extends Vue {
 <style lang="scss">
 // Make the whole table scroll in a constrained container so we can have a sticky header - CSS makes
 // that impossible otherwise
-.table-cont {
+.buildings-table-cont {
   width: 100%;
   max-height: 80vh;
   overflow: auto;

diff --git a/src/templates/BuildingDetails.vue b/src/templates/BuildingDetails.vue
@@ -309,8 +309,8 @@ query ($id: ID!, $ID: String) {
 
       <h2>Historical Data</h2>
 
-      <div class="table-cont">
-        <table>
+      <div class="historical-table-cont">
+        <table class="historical-data">
           <thead>
             <tr>
               <th scope="col">
@@ -734,14 +734,14 @@ export default class BuildingDetails  extends Vue {
     .stat-tile { min-width: 18rem; }
   }
 
-  .table-cont {
+  .historical-table-cont {
     max-width: 100%;
     overflow-x: auto;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
   }
 
-  table {
+  table.historical-data {
     border: solid 0.125rem $grey;
     border-radius: $brd-rad-small;
     border-collapse: collapse;
@@ -755,7 +755,7 @@ export default class BuildingDetails  extends Vue {
     }
 
     th, td {
-      padding: 0.25rem 0.75rem;
+      padding: 0.5rem 0.75rem;
       text-align: left;
     }