feat(docs-infra): add no upcoming events message (#40055)

This commit adds a message that is displayed instead
of the events table if there are no upcoming events.

Fixes #40052

PR Close #40055

aio/src/app/custom-elements/events/events.component.html

@@ -1,5 +1,12 @@
-<p>Where we'll be presenting:</p>
-<table class="is-full-width">
+<h2>Where we'll be presenting:</h2>
+<div *ngIf="!upcomingEvents?.length">
+  <p>We don't have any upcoming speaking engagements at the moment.</p>
+  <p>Until something comes up, make sure you check our <a href="https://www.youtube.com/angular">YouTube channel</a>
+    and follow us on <a href="https://twitter.com/angular">social media</a>.</p>
+  <p>If you want us to be part of your event reach out on <a href="mailto:devrel@angular.io">devrel@angular.io</a>!</p>
+</div>
+
+<table class="is-full-width" *ngIf="upcomingEvents?.length">
   <thead>
     <tr>
       <th>Event</th>
@@ -7,7 +14,7 @@
       <th>Date</th>
     </tr>
   </thead>
-  <tbody >
+  <tbody>
     <tr *ngFor="let event of upcomingEvents">
       <th><a href="{{event.linkUrl}}" title="{{event.tooltip}}">{{event.name}}</a></th>
       <td>{{event.location}}</td>
@@ -20,7 +27,7 @@
   </tbody>
 </table>
 
-<p>Where we already presented:</p>
+<h2>Where we already presented:</h2>
 <table class="is-full-width">
   <thead>
     <tr>
@@ -40,4 +47,4 @@
       </td>
     </tr>
   </tbody>
-</table>
+</table>

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -273,7 +273,7 @@ aio-shell {
     }
   }
 
-  &.page-home, &.page-resources, &.page-events, &.page-contribute {
+  &.page-home, &.page-resources, &.page-contribute {
     article {
       padding: 32px;
 
@@ -283,7 +283,7 @@ aio-shell {
     }
   }
 
-  &.page-features {
+  &.page-features, &.page-events {
     article {
       padding: 0 3rem;
     }