Add Community Events tab to the Events page

Signed-off-by: Chris Abraham <[email protected]>

Author: cjyabraham

_includes/community_events.html

@@ -0,0 +1,10 @@
+<div id ="community-event" class="events-section hidden">
+  <div>
+    <h1>Community Events</h1>
+    <p>To view the PyTorch community-organized events, go to our Zoom Events calendar:</p>
+    <a href="https://zoom-lfx.platform.linuxfoundation.org/meetings/pytorch" target="_blank" class="btn btn-lg with-right-arrow module-button">
+      View Community Events
+    </a>
+  </div>
+
+</div>

_sass/events.scss

@@ -76,6 +76,19 @@
   }
 }
 
+.events-container {
+  max-width: 920px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 0px;
+  padding-right: 0px;
+  width: 90%;
+}
+
+
+
 .ecosystem .events.main-content .navbar {
   padding-left: 0;
   padding-bottom: 0;
@@ -88,7 +101,7 @@
   }
   @media (min-width: 992px) {
     .nav-item {
-      padding: 2rem;
+      padding: .5rem;
       cursor: pointer;
     }
 
@@ -119,12 +132,12 @@
   }
 
   .events-nav-link {
-    padding-left: rem(20px);
-    padding-right: rem(20px);
+    padding-left: rem(15px);
+    padding-right: rem(5px);
 
     @include desktop {
-      padding-left: rem(30px);
-      padding-right: rem(30px);
+      padding-left: rem(20px);
+      padding-right: rem(20px);
     }
   }
 

events.html

@@ -17,7 +17,7 @@ <h1>Events</h1>
   <div class="events main-content">
     <div class="events-container-fluid container-fluid nav-menu-wrapper">
       <div class="nav-background">
-        <div class="contributor-container">
+        <div class="events-container">
           <nav class="navbar navbar-expand-lg navbar-light main-content-menu">
             <ul class="navbar-nav events-nav">
               <li id="events" class="nav-item nav-select">
@@ -29,6 +29,9 @@ <h1>Events</h1>
               <li id="podcasts" class="nav-item">
                 <span class="nav-link events-nav-link">Podcasts</span>
               </li>
+              <li id="community-events" class="nav-item">
+                <span class="nav-link events-nav-link">Community Events</span>
+              </li>
             </ul>
           </nav>
         </div>
@@ -37,26 +40,33 @@ <h1>Events</h1>
     {% include live_events.html %}
     {% include live_stream.html %}
     {% include podcast.html %}
+    {% include community_events.html %}
   </div>
 </div>
 
 <script type="text/javascript">
   $("#events").on("click", function() {
-    $("#live-stream, #podcast").hide();
+    $("#live-stream, #podcast, #community-event").hide();
     $("#event, #event-side-nav").show();
-    $("#live-streams, #podcasts").removeClass("nav-select");
+    $("#live-streams, #podcasts, #community-events").removeClass("nav-select");
     $(this).addClass("nav-select");
   });
   $("#podcasts").on("click", function() {
-    $("#live-stream, #event, #event-side-nav").hide();
+    $("#live-stream, #event, #event-side-nav, #community-event").hide();
     $("#podcast").show();
-    $("#live-streams, #events").removeClass("nav-select");
+    $("#live-streams, #events, #community-events").removeClass("nav-select");
     $(this).addClass("nav-select");
   });
   $("#live-streams").on("click", function() {
-    $("#podcast, #event, #event-side-nav").hide();
+    $("#podcast, #event, #community-event, #event-side-nav").hide();
     $("#live-stream").show();
-    $("#podcasts, #events").removeClass("nav-select");
+    $("#community-events, #podcasts, #events").removeClass("nav-select");
+    $(this).addClass("nav-select");
+  });
+  $("#community-events").on("click", function() {
+    $("#podcast, #live-stream, #event-side-nav, #event").hide();
+    $("#community-event").show();
+    $("#podcasts, #events, #live-stream").removeClass("nav-select");
     $(this).addClass("nav-select");
   });
 </script>