From 533b45a6f43f58cc7f1ed1db42769df65c94ee6a Mon Sep 17 00:00:00 2001 From: Devon Date: Sun, 10 Nov 2024 03:14:08 -0800 Subject: [PATCH] Initial version of timeline --- assets/js/main.js | 31 +++++- assets/scss/custom.scss | 14 ++- content/english/seattle/index.md | 118 +++++++++++++++++++++- layouts/partials/components/features.html | 14 ++- layouts/partials/components/timeline.html | 61 +++++++++++ 5 files changed, 228 insertions(+), 10 deletions(-) create mode 100644 layouts/partials/components/timeline.html diff --git a/assets/js/main.js b/assets/js/main.js index 9b6c2c5..56e07ca 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -49,7 +49,8 @@ const modal = document.querySelector(`#${target}`); if (modal) { btn.addEventListener("click", (e) => { - toggle_modal(modal, true); + if (e.target.tagName !== 'A') + toggle_modal(modal, true); }); } }); @@ -77,10 +78,36 @@ document.addEventListener("keydown", (e) => { if (e.key === "Escape") { var modal_id = body.getAttribute("modal"); - if(modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false); + if (modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false); } }); + // timelines + // ---------------------------------------- + const updateTimeline = (timeline) => { + const day_target = timeline.getAttribute("data-day-target"); + timeline.querySelectorAll(".day-events:not(.hidden)").forEach((day_events) => { day_events.classList.toggle("hidden", true); }); + timeline.querySelector(`[data-day-title="${day_target}"]`).classList.toggle("hidden", false); + timeline.querySelectorAll(`.day_listing.active`).forEach((listing) => { + listing.classList.toggle("inactive", true); + listing.classList.toggle("active", false); + }); + var new_active = timeline.querySelector(`.day_listing[data-day-target="${day_target}"]`); + new_active.classList.toggle("active", true); + new_active.classList.toggle("inactive", false); + }; + + document.querySelectorAll(".timeline_grid_container").forEach((timeline) => { + const days = timeline.querySelector(".day-listing-container"); + days.addEventListener("click", (e) => { + const day_target = e.target.getAttribute("data-day-target"); + if (day_target) { + timeline.setAttribute("data-day-target", day_target); + updateTimeline(timeline); + } + }); + }); + // Swipers // ---------------------------------------- const swipers = document.querySelectorAll(".swiper-slider"); diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index f29d390..73b9f5c 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -50,16 +50,26 @@ } .testimonial a, -.img_grid_container a { +.img_grid_container a, +.timeline_grid_container a { color: var(--meetups-color) !important; text-decoration: none; } .testimonial a:hover, -.img_grid_container a:hover { +.img_grid_container a:hover, +.timeline_grid_container a { text-decoration: underline; } +// .day_listing.active { + +// } + +.day_listing.inactive { + color: rgb(163, 163, 163); +} + .modal-bg a { color: var(--meetups-color) !important; text-decoration: none; diff --git a/content/english/seattle/index.md b/content/english/seattle/index.md index 8fcb980..912e004 100644 --- a/content/english/seattle/index.md +++ b/content/english/seattle/index.md @@ -9,7 +9,7 @@ banner: title: "Handmade Seattle 2024" content: "We are the largest indie conferences for low-level programmers.
Proud to be __Fully Hybrid__.
" content_bottom: "**Seattle Center**
Nesholm Family Lecture Hall

**Nov 20th - 22nd, 2024**
Private Hangouts on Friday, Nov 22nd" - content_bottom_class: "mt-20 text-white" + content_bottom_class: "mt-20 mb-20 text-white" section_class: "mb-0 pb-0" bg_img: parallax: false @@ -19,7 +19,7 @@ banner: hide_banner_img: true transition: end: "/images/transition2.svg" - end_class: "mt-20 transform -scale-y-100 -scale-x-100" + end_class: "transform -scale-y-100 -scale-x-100" end_color: "#fff" end_dark: "/images/transition2.svg" end_dark_color: "#150e31" @@ -57,6 +57,120 @@ features: end_style: "mask-size: cover;height:150px;" end_dark: "/images/transition3.svg" end_dark_color: "#150e31" + timeline: + enable: false + date_class: "" + event_class: "" + timeline_class: "mb-20 mt-12" + event_img_class: "" + time_class: "text-right text-slate-200" + event_title_class: "dark:text-white text-xl" + event_subtitle_class: "text-lg text-slate-200" + day_listing_class: "text-2xl text-white no-decoration hover:meetups-color hover:cursor-pointer hover:underline" + day_listing_inactive_class: "text-gray" + top_text: "" + top_text_class: "mb-12 text-center" + bottom_text: "All times in Pacific Time, UTC-8:00 timezone." + bottom_text_class: "text-center mt-8 text-slate-300" + day_date_class: "text-center text-white text-xl mb-4 underline" + default_day: "Day 1" + days: + - title: "Day 1" + date: "Nov 20th, 2024" + title_class: "text-dark dark:text-white" + events: + - title: "Sign In" + time: "9:30 AM" + subtitle: "Show up and sign in!" + modal_target: "" + title_class: "" + subtitle_class: "" + link: "" + - title: "game engine design and the dark arts of data plumbing" + time: "10:30 AM" + subtitle: "Devon Hall" + title_class: "" + modal_target: "" + subtitle_class: "" + link: "" + - title: "Talk about why LLVM is bad" + time: "11:30 AM" + subtitle: "Negate" + title_class: "" + subtitle_class: "" + link: "" + - title: "Lunch" + time: "12:30 PM" + subtitle: "" + title_class: "" + subtitle_class: "" + link: "" + - title: "Day 2" + date: "Nov 21st, 2024" + title_class: "text-dark dark:text-white" + top_text: "" + top_text_class: "dark:text-white" + bottom_text: "" + bottom_text_class: "" + events: + - title: "Yet another thing" + time: "9:30 AM" + subtitle: "find a friend" + title_class: "" + subtitle_class: "" + link: "" + - title: "listen to a song with a super long title" + time: "10:30 AM" + subtitle: "sign some documents in a long title" + title_class: "" + subtitle_class: "" + link: "" + - title: "Help your friend fix his vim config" + time: "11:30 AM" + subtitle: "because not everyone knows vimscript" + title_class: "" + subtitle_class: "" + link: "" + - title: "Lunch" + time: "12:30 PM" + subtitle: "" + title_class: "" + subtitle_class: "" + link: "" + - title: "Day 3" + date: "Nov 22nd, 2024 (Hangouts)" + title_class: "text-dark dark:text-white" + top_text: "" + top_text_class: "dark:text-white" + bottom_text: "" + bottom_text_class: "" + events: + - title: "MoPop Mueseum" + time: "9:30 AM" + subtitle: "" + title_class: "" + subtitle_class: "" + link: "" + - title: "Flatstick Pub" + time: "1:30 PM" + subtitle: "" + title_class: "" + subtitle_class: "" + link: "" + - title: "After Party" + time: "7:30 PM" + subtitle: "@ a location" + title_class: "" + subtitle_class: "" + link: "" + - title: "Devon" + time: "9:30 AM" + subtitle: "was here" + title_class: "" + subtitle_class: "" + link: "" + + img_grid: title: "" title_class: "text-center" diff --git a/layouts/partials/components/features.html b/layouts/partials/components/features.html index c3fe3d1..4088983 100644 --- a/layouts/partials/components/features.html +++ b/layouts/partials/components/features.html @@ -40,6 +40,12 @@ {{ partial "image" (dict "Src" .image "Alt" "Banner" "Class" "w-1/3 h-1/3" ) }} {{ end }} + + {{ if .timeline }} + {{ partial "components/timeline.html" . }} + {{ end }} + +

{{ .title | markdownify }}

@@ -72,18 +78,18 @@ {{ if .testimonials }} {{ partial "components/testimonials.html" . }} - {{ end }} + {{ end }} {{ if .img_grid }} {{ partial "components/img_grid.html" . }} {{ end }} - + + {{ if .card_grid }} {{ partial "components/card_grid.html" . }} {{ end }} - - +

{{ .content | markdownify }} diff --git a/layouts/partials/components/timeline.html b/layouts/partials/components/timeline.html new file mode 100644 index 0000000..fb90cba --- /dev/null +++ b/layouts/partials/components/timeline.html @@ -0,0 +1,61 @@ +{{ if .timeline }} +{{ if .timeline.enable }} +{{ $default_day := .timeline.default_day }} +

+ {{ if .timeline.title }}

{{ .timeline.title }}

{{ end }} + {{ if .timeline.top_text }}

{{ .timeline.top_text | markdownify }}

{{ end }} +
+ {{ $event_class := .timeline.event_title_class }} + {{ $event_title_class := .timeline.event_title_class }} + {{ $event_subtitle_class := .timeline.event_subtitle_class }} + {{ $event_time_class := .timeline.time_class }} + {{ $event_img_class := .timeline.img_class }} + {{ $day_date_class := .timeline.day_date_class }} + +
+
+ {{ $day_listing_class := .timeline.day_listing_class }} + {{ $day_listing_inactive_class := .timeline.day_listing_inactive_class }} + {{ range $i, $day := .timeline.days }} + {{ $day.title }} + {{ end }} +
+
+ +
+ {{ range $day := .timeline.days }} + + {{ end }} +
+
+

{{ .timeline.bottom_text | markdownify }}

+
+{{ end }} +{{ end }} \ No newline at end of file