Update the 'no data' view

Author: Rick Butterfield

src/Umbraco.Community.Sustainability.TestSite.10.x/Umbraco.Community.Sustainability.TestSite.10.x.csproj

@@ -7,7 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Umbraco.Cms" Version="10.8.1" />
+    <PackageReference Include="Umbraco.Cms" Version="10.8.0" />
     <PackageReference Include="Umbraco.TheStarterKit" Version="10.0.0" />
   </ItemGroup>
 

src/Umbraco.Community.Sustainability/wwwroot/UmbracoCommunitySustainability/backoffice/sustainability/overview.html

@@ -16,39 +16,44 @@
     </umb-editor-header>
 
     <umb-editor-container>
-      <div class="umb-package-details" ng-if="recentData.length != 0">
+      <div class="umb-package-details">
         <div class="umb-package-details__main-content">
           <uui-box headline="Recently tested pages">
-            <uui-table style="margin-bottom: 24px;">
-              <uui-table-head>
-                <uui-table-head-cell></uui-table-head-cell>
-                <uui-table-head-cell>Last Run Date</uui-table-head-cell>
-                <uui-table-head-cell>Carbon Rating</uui-table-head-cell>
-              </uui-table-head>
+            <div ng-if="recentData.length != 0">
+              <uui-table style="margin-bottom: 24px;">
+                <uui-table-head>
+                  <uui-table-head-cell></uui-table-head-cell>
+                  <uui-table-head-cell>Last Run Date</uui-table-head-cell>
+                  <uui-table-head-cell>Carbon Rating</uui-table-head-cell>
+                </uui-table-head>
 
-              <uui-table-row ng-repeat="data in recentData">
-                <uui-table-cell>
-                  <a style="text-decoration: underline;" href="/umbraco/#/content/content/edit/{{data.NodeId}}">{{data.NodeName}}</a>
-                </uui-table-cell>
+                <uui-table-row ng-repeat="data in recentData">
+                  <uui-table-cell>
+                    <a style="text-decoration: underline;" href="/umbraco/#/content/content/edit/{{data.NodeId}}">{{data.NodeName}}</a>
+                  </uui-table-cell>
 
-                <uui-table-cell>
-                  {{data.RequestDate}}
-                </uui-table-cell>
+                  <uui-table-cell>
+                    {{data.RequestDate}}
+                  </uui-table-cell>
 
-                <uui-table-cell>
-                  <uui-tag style="font-size: 14px" color="{{vm.getTagColour(data.CarbonRating)}}">
-                    {{data.CarbonRating}}
-                  </uui-tag>
-                </uui-table-cell>
-              </uui-table-row>
-            </uui-table>
+                  <uui-table-cell>
+                    <uui-tag style="font-size: 14px" color="{{vm.getTagColour(data.CarbonRating)}}">
+                      {{data.CarbonRating}}
+                    </uui-tag>
+                  </uui-table-cell>
+                </uui-table-row>
+              </uui-table>
 
-            <uui-button look="primary" href="/umbraco#sustainability/sustainability/stats">
-              See more data
-            </uui-button>
+              <uui-button look="primary" href="/umbraco#sustainability/sustainability/stats">
+                See more data
+              </uui-button>
+            </div>
+            <div ng-if="recentData.length == 0">
+              No data to show yet. Once you've run some tests, you'll see an overview of all your data here.
+            </div>
           </uui-box>
         </div>
-        <div class="umb-package-details__sidebar">
+        <div class="umb-package-details__sidebar" ng-if="recentData.length != 0">
           <div class="umb-user-cards">
             <uui-box headline="Average carbon rating">
               <uui-tag style="font-size: 14px;" color="{{vm.getTagColour(grade)}}">
@@ -74,10 +79,6 @@
         </div>
       </div>
 
-      <umb-empty-state ng-if="recentData.length == 0"
-                       position="center">
-        <p>No data to show yet.</p>
-      </umb-empty-state>
     </umb-editor-container>
 
   </umb-editor-view>