From be4f5ceee2e997f7c31cd98e4a0239a1c6105af6 Mon Sep 17 00:00:00 2001 From: Gerard Casas Saez Date: Sun, 21 Oct 2018 16:55:19 -0600 Subject: [PATCH 1/4] add timeline view --- _layouts/base.html | 1 - _sections/schedule.html | 3 + _sections/timeline.html | 24 ++++++ assets/css/main.scss | 1 + assets/css/timeline.scss | 165 ++++++++++++++++++++++++++++++++++++++ assets/js/liveTimeline.js | 51 ++++++++++++ 6 files changed, 244 insertions(+), 1 deletion(-) create mode 100644 _sections/timeline.html create mode 100644 assets/css/timeline.scss create mode 100644 assets/js/liveTimeline.js diff --git a/_layouts/base.html b/_layouts/base.html index 6e946ba..8b16eb6 100644 --- a/_layouts/base.html +++ b/_layouts/base.html @@ -69,7 +69,6 @@

{{page.title}}

- diff --git a/_sections/schedule.html b/_sections/schedule.html index dd68a4e..3071c19 100644 --- a/_sections/schedule.html +++ b/_sections/schedule.html @@ -23,3 +23,6 @@
Due to the amount of traffic to this page, we're experiencing occasional outtages.
If the schedule is not loading, you can also find it here.
+ + + diff --git a/_sections/timeline.html b/_sections/timeline.html new file mode 100644 index 0000000..fa9c1fc --- /dev/null +++ b/_sections/timeline.html @@ -0,0 +1,24 @@ +--- +layout: base +title: Timeline +description: Event timeline +--- + + +{% raw %} + + +
+
+
+
+

{{ event.start }}

{{ event.end }}

+
{{ event.description }}
at {{event.location}}
+
+
+
+
+{% endraw %} + + + diff --git a/assets/css/main.scss b/assets/css/main.scss index 2b21f5b..432869e 100644 --- a/assets/css/main.scss +++ b/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; diff --git a/assets/css/timeline.scss b/assets/css/timeline.scss new file mode 100644 index 0000000..e06caec --- /dev/null +++ b/assets/css/timeline.scss @@ -0,0 +1,165 @@ +--- +--- +@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 40px; + position: relative; + background-color: inherit; + width: 50%; + margin-bottom: -50px; + + /* The circles on the timeline */ + // &::after { + // content: ''; + // position: absolute; + // width: 29px; + // height: 29px; + // right: -14px; + // background-color: $accent-color; + // top: 15px; + // border-radius: 50%; + // z-index: 1; + // } + + &: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: 30px; + 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: 30px; + border: medium solid $accent-color; + border-width: 10px 10px 10px 0; + border-color: transparent $accent-color transparent transparent; + } + + /* Fix the circle for items on the right side */ + &::after { + left: -14px; + } + } +} + +/* 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; + 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: 31px; + } + + .inner-item { + flex-direction: column; + + .hours { + flex-direction: row; + padding-bottom: 10px; + } + + p { + text-align: left; + } + } + +/* Full-width items */ + .item { + width: 100%; + padding-left: 70px; + padding-right: 25px; + margin-bottom: 0; + + /* Make sure that all arrows are pointing leftwards */ + &::before, &:nth-child(even)::before, &:nth-child(odd)::before { + left: 60px; + 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%; + } + } +} \ No newline at end of file diff --git a/assets/js/liveTimeline.js b/assets/js/liveTimeline.js new file mode 100644 index 0000000..78c6369 --- /dev/null +++ b/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 Date: Sun, 21 Oct 2018 17:05:56 -0600 Subject: [PATCH 2/4] fix wrapping problem --- assets/css/timeline.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/timeline.scss b/assets/css/timeline.scss index e06caec..dd79346 100644 --- a/assets/css/timeline.scss +++ b/assets/css/timeline.scss @@ -107,6 +107,7 @@ $secondary-color: {{site.secondary_color}}; p, h5 { margin:0; line-height: 1em; + white-space: pre-line; padding-right: 20px; } From a88554c9382784a077be1715a57a57d5ce7b883e Mon Sep 17 00:00:00 2001 From: Gerard Casas Saez Date: Sun, 21 Oct 2018 17:35:05 -0600 Subject: [PATCH 3/4] reduce unneeded borders --- assets/css/timeline.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/css/timeline.scss b/assets/css/timeline.scss index dd79346..68a9753 100644 --- a/assets/css/timeline.scss +++ b/assets/css/timeline.scss @@ -31,7 +31,7 @@ $secondary-color: {{site.secondary_color}}; /* Container around content */ .item { - padding: 10px 40px; + padding: 10px 30px; position: relative; background-color: inherit; width: 50%; @@ -61,7 +61,7 @@ $secondary-color: {{site.secondary_color}}; top: 22px; width: 0; z-index: 1; - right: 30px; + right: 20px; border: medium solid $accent-color; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent $accent-color; @@ -79,7 +79,7 @@ $secondary-color: {{site.secondary_color}}; top: 22px; width: 0; z-index: 1; - left: 30px; + left: 20px; border: medium solid $accent-color; border-width: 10px 10px 10px 0; border-color: transparent $accent-color transparent transparent; @@ -122,7 +122,7 @@ $secondary-color: {{site.secondary_color}}; @media screen and (max-width: 600px) { /* Place the timelime to the left */ .timeline::after { - left: 31px; + left: 0px; } .inner-item { @@ -141,13 +141,13 @@ $secondary-color: {{site.secondary_color}}; /* Full-width items */ .item { width: 100%; - padding-left: 70px; - padding-right: 25px; + 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: 60px; + left: 10px; border: medium solid $accent-color; border-width: 10px 10px 10px 0; border-color: transparent $accent-color transparent transparent; From bb4a27620f84bbcaf6136d2e1967feab03cb5759 Mon Sep 17 00:00:00 2001 From: Gerard Casas Saez Date: Sun, 21 Oct 2018 18:04:20 -0600 Subject: [PATCH 4/4] reduce useless css --- assets/css/timeline.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/assets/css/timeline.scss b/assets/css/timeline.scss index 68a9753..bf6062f 100644 --- a/assets/css/timeline.scss +++ b/assets/css/timeline.scss @@ -37,18 +37,6 @@ $secondary-color: {{site.secondary_color}}; width: 50%; margin-bottom: -50px; - /* The circles on the timeline */ - // &::after { - // content: ''; - // position: absolute; - // width: 29px; - // height: 29px; - // right: -14px; - // background-color: $accent-color; - // top: 15px; - // border-radius: 50%; - // z-index: 1; - // } &:nth-child(even) { left: 0; @@ -85,10 +73,6 @@ $secondary-color: {{site.secondary_color}}; border-color: transparent $accent-color transparent transparent; } - /* Fix the circle for items on the right side */ - &::after { - left: -14px; - } } }