Merge pull request #287 from scala/add-events-page

add events page

Author: darjutak

_data/events.yml

@@ -0,0 +1,42 @@
+scala_lunches:
+  description: |
+    The Scala Lunches are a series of talks on Scala and related topics.
+    They are held once per month at EPFL in Lausanne, Switzerland.
+    The talks are open to everyone and are free of charge.
+    The talks are in English.
+  events:
+    - date: 8 May 2023
+      time: "12:00pm"
+      place: BC 410, EPFL
+      speaker: # to be announced
+      title: # to be announced
+    - date: 12 June 2023
+      time: "12:00pm"
+      place: BC 410, EPFL
+      speaker: # to be announced
+      title: # to be announced
+    - date: 10 July 2023
+      time: "12:00pm"
+      place: BC 410, EPFL
+      speaker: # to be announced
+      title: # to be announced
+    - date: 4 September 2023
+      time: "12:00pm"
+      place: BC 410, EPFL
+      speaker: # to be announced
+      title: # to be announced
+    - date: 2 October 2023
+      time: "12:00pm"
+      place: BC 410, EPFL
+      speaker: # to be announced
+      title: # to be announced
+    - date: 13 November 2023
+      time: "12:00pm"
+      place: BC 410, EPFL
+      speaker: # to be announced
+      title: # to be announced
+    - date: 11 December 2023
+      time: "12:00pm"
+      place: BC 410, EPFL
+      speaker: # to be announced
+      title: # to be announced

_includes/event-block.html

@@ -0,0 +1,42 @@
+<table class="col-md-12">
+    <thead>
+        <tr>
+            <th class="col-xs-2">Date</th>
+            <th class="col-xs-3">Speaker</th>
+            <th class="col-xs-4">Title</th>
+            <th class="col-xs-2">Place</th>
+            <th class="col-xs-1">Time</th>
+        </tr>
+    </thead>
+    <tbody>
+    {% for event in events %}
+    <tr class="card">
+        <td>
+            <span class="status ongoing fl-right">
+                {{event.date}}
+            </span>
+        </td>
+        <td>
+            {% if event.speaker.size > 0 %}
+            <span class="speaker">{{event.speaker}}</span>
+            {% else %}
+            <span class="speaker">Speaker TBA...</span>
+            {% endif %}
+        </td>
+        <td>
+            {% if event.title.size > 0 %}
+            <span class="title">{{event.title}}</span>
+            {% else %}
+            <span class="title">Talk title TBA...</span>
+            {% endif %}
+        </td>
+        <td>
+            <span class="place">{{event.place}}</span>
+        </td>
+        <td>
+            <span class="place">{{event.time}}</span>
+        </td>
+    </tr>
+    {% endfor %}
+    </tbody>
+</table>

events.html

@@ -0,0 +1,28 @@
+---
+layout: page
+---
+<div class="row mb-30">
+  <!-- <div class="col-md-12 search">
+    <input class="col-xs-12 form-control" value="" placeholder="Search an Event..." type="text">
+  </div>-->
+
+  <div class="col-md-12">
+    <p>Events organised by, or in collaboration with, the Scala Center</p>
+  </div>
+  <div class="clearfix"></div>
+
+  <div class="cards">
+    {% assign events = site.data.events.scala_lunches.events %}
+    <div class="col-md-12 title scala-lunches">
+      <h2>Scala Lunches at EPFL</h2>
+      <p>{{site.data.events.scala_lunches.description}}</p>
+    </div>
+    <div class="card-list scala-lunches">
+      {% include event-block.html %}
+    </div>
+    <!-- <div class="col-md-12 no-results">
+      <h3>No results found</h3>
+    </div> -->
+  </div>
+
+</div>

resources/css/main.scss

@@ -563,10 +563,11 @@ body.home {
   }
 
   /* HOME OUR PROJECTS */
-  .projects {
+  .cards {
     padding-left: 1%;
     padding-top: 10px;
-    .project {
+
+    .card, .project {
       position: relative;
       width: 18%;
       float: left;
@@ -727,8 +728,8 @@ body.home {
 
   /* Projects Mobile */
   @media (max-width: $screen-md) {
-    .projects {
-      .project {
+    .cards {
+      .card, .project {
         width: 48% !important;
       }
     }
@@ -920,7 +921,19 @@ div.search {
   }
 }
 
-.projects, .description-dialog {
+/* UTILITIES */
+
+.fl-right {
+  float: right;
+}
+
+.mb-30 {
+  margin-bottom: 30px;
+}
+
+/* CARDS */
+
+.cards, .description-dialog {
   margin-top: 10px;
   @media(max-width: 991px) {
     margin-top: 25px;
@@ -954,15 +967,25 @@ div.search {
   }
 
   .project {
-    background-color: #fafafa;
-    border-radius: 3px;
-    padding: 40px 30px 0px 30px;
-    margin-bottom: 30px;
-    word-wrap: break-word;
-
     .project-logo {
       max-height: 40px;
     }
+  }
+
+  tr.card {
+    border-bottom: 1px solid #e6e6e6;
+
+    td {
+      padding: 0 5px;
+    }
+  }
+
+  .card, .project {
+    background-color: #fafafa;
+    border-radius: 3px;
+    padding: 0px 30px 0px 30px;
+    margin-bottom: 5px;
+    word-wrap: break-word;
 
     .status {
       font-size: 12px;

resources/css/sass/_base.scss

@@ -97,5 +97,5 @@ a:hover {
 
 #main {
     overflow:auto;
-    padding-bottom:350px; /* this needs to be bigger than footer height*/
+    padding-bottom:360px; /* this needs to be bigger than footer height*/
 }