Add timeline page

_layouts/base.html

@@ -69,7 +69,6 @@ <h1>{{page.title}}</h1>
 
 <script src="/assets/vendor/js/jquery.min.js"></script>
 <script src="/assets/js/countdown.js?_={{ site.time |  date: '%s' }}"></script>
-<script src="/assets/js/liveSchedule.js?_={{ site.time |  date: '%s' }}"></script>
 
 
 

_sections/schedule.html

@@ -23,3 +23,6 @@
 	<h5>Due to the amount of traffic to this page, we're experiencing occasional outtages.</h5>
 	<h5>If the schedule is not loading, you can also find it <a target="blank" href="https://bit.ly/hackcu-schedule">here.</a></h5>
 </div>
+
+<script src="/assets/vendor/js/jquery.min.js"></script>
+<script src="/assets/js/liveSchedule.js?_={{ site.time |  date: '%s' }}"></script>

_sections/timeline.html

@@ -0,0 +1,24 @@
+---
+layout: base
+title: Timeline
+description: Event timeline
+---
+
+<link rel="stylesheet" href="/assets/css/timeline.css?_={{ site.time |  date: '%s' }}">
+{% raw %}
+
+
+<div id="app">
+    <div class="timeline">
+        <div class="item" v-for="event in events">
+            <div class="inner-item">
+                <div class="hours"><p>{{ event.start }}</p><p><small>{{ event.end }}</small></p></div>
+                <h5>{{ event.description }}<br> <small v-if="event.location != ''">at {{event.location}}</small></h5>
+            </div>
+        </div>
+    </div>
+</div>
+{% endraw %}
+<script src="/assets/vendor/js/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script src="/assets/js/liveTimeline.js?_={{ site.time |  date: '%s' }}"></script>

assets/css/main.scss

@@ -48,6 +48,7 @@ body {
     font-size: 17.5px;
     margin-top: 50px;
     padding-bottom: 40px;
+
     li {
       list-style-type: square !important;
       margin-left: 1em;

assets/css/timeline.scss

@@ -0,0 +1,150 @@
+---
+---
+@charset "utf-8";
+@import "../_sass/mixins";
+
+$main-color: #fff;
+$footer-text: #fff;
+$accent-color: {{site.color}};
+$secondary-color: {{site.secondary_color}};
+
+/* The actual timeline (the vertical ruler) */
+.timeline {
+    position: relative;
+    max-width: 1200px;
+    height: 100%;
+    margin: 0 auto;
+
+    /* The actual timeline (the vertical ruler) */
+    &::after {
+        content: '';
+        position: absolute;
+        width: 6px;
+        background-color: $accent-color;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        margin-left: -3px;
+        @include box-shadow(inset 0px 11px 8px -5px #fff, inset 0px -11px 8px -5px #fff); 
+    }
+}
+
+/* Container around content */
+.item {
+    padding: 10px 30px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+    margin-bottom: -50px;
+
+
+    &:nth-child(even) {
+        left: 0;
+
+        /* Add arrows to the left item (pointing right) */
+        &::before {
+            content: " ";
+            height: 0;
+            position: absolute;
+            top: 22px;
+            width: 0;
+            z-index: 1;
+            right: 20px;
+            border: medium solid $accent-color;
+            border-width: 10px 0 10px 10px;
+            border-color: transparent transparent transparent $accent-color;
+        }
+    }
+
+    &:nth-child(odd) {
+        left: 50%;
+
+        /* Add arrows to the right item (pointing left) */
+        &::before {
+            content: " ";
+            height: 0;
+            position: absolute;
+            top: 22px;
+            width: 0;
+            z-index: 1;
+            left: 20px;
+            border: medium solid $accent-color;
+            border-width: 10px 10px 10px 0;
+            border-color: transparent $accent-color transparent transparent;
+        }
+
+    }
+}
+
+/* The actual content */
+.inner-item {
+    padding: 10px 20px;
+    position: relative;
+    border:  medium solid $accent-color;
+    @include box-shadow(10px 10px 18px -12px rgba(0,0,0,0.75)); 
+    display: flex;
+
+    .hours {
+        display: flex;
+        flex-direction: column;
+    }
+    p, h5 {
+        margin:0;
+        line-height: 1em;
+        white-space: pre-line;
+        padding-right: 20px;
+    }
+
+    p {
+        white-space: nowrap;
+        text-align: right;
+    }
+}
+
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+/* Place the timelime to the left */
+    .timeline::after {
+        left: 0px;
+    }
+
+    .inner-item {
+        flex-direction: column;
+
+        .hours {
+            flex-direction: row;
+            padding-bottom: 10px;
+        }
+
+        p {
+            text-align: left;
+        }
+    }
+
+/* Full-width items */
+    .item {
+        width: 100%;
+        padding-left: 20px;
+        padding-right: 0;
+        margin-bottom: 0;
+
+        /* Make sure that all arrows are pointing leftwards */
+        &::before, &:nth-child(even)::before, &:nth-child(odd)::before {
+            left: 10px;
+            border: medium solid $accent-color;
+            border-width: 10px 10px 10px 0;
+            border-color: transparent $accent-color transparent transparent;
+        }
+
+        /* Make sure all circles are at the same spot */
+        &:nth-child(even)::after, &:nth-child(odd)::after {
+            left: 15px;
+        }
+
+        /* Make all right items behave like the left ones */
+        &:nth-child(odd) {
+            left: 0%;
+        }
+    }    
+}

assets/js/liveTimeline.js

@@ -0,0 +1,51 @@
+
+var app = new Vue({
+    el: '#app',
+    data: {
+        events: [
+            { description: 'Learn JavaScript', start:"10:30", end:"11:30", location:"HERE"},
+            { description: 'Learn JavaScript', start:"10:30", end:"11:30", location:"HERE"},
+            { description: 'Learn JavaScript', start:"10:30", end:"11:30", location:"HERE"},
+        ]
+    }
+})
+
+
+// URLs for google sheet and CORS
+var scheduleUrl = "https://docs.google.com/spreadsheets/d/1MkLve58YjYuJdRrmG8-7rpTCaa7v9mspzmMninApx5g";
+// var corsUrl = "http://cors-proxy.htmldriven.com/?url=" + scheduleUrl + "/export?format=csv";
+var corsUrl = "https://cors-anywhere.herokuapp.com/" + scheduleUrl + "/export?format=csv";
+
+function csvJSON(csv){
+
+    var lines=csv.split("\n");
+
+    var result = [];
+
+    var headers=lines[0].toLowerCase().replace("\r","").split(",");
+
+    for(var i=1;i<lines.length;i++){
+
+        var obj = {};
+        var currentline=lines[i].split(",");
+
+        for(var j=0;j<headers.length;j++){
+            obj[headers[j]] = currentline[j];
+        }
+
+        result.push(obj);
+
+    }
+
+    //return result; //JavaScript object
+    return result; //JSON
+  }
+
+
+
+$.get(corsUrl, function(data) {
+    // var timetable = updateTable(data.body);
+    data = csvJSON(data);
+    console.log(data)
+    app.events = data;
+});