-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- New event page - New community page - Many other changes
- Loading branch information
Showing
36 changed files
with
653 additions
and
161 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| <div class="banner-event-slides"> | ||
| <div id="poster"> | ||
| <img | ||
| src="{{ page.image }}" | ||
| alt="" | ||
| draggable="false" | ||
| style="view-transition-name: post-image-{{ page.title | slugify }};" | ||
| /> | ||
| </div> | ||
| <div id="map" data-location="{{ page.location | uri_escape }}"></div> | ||
| </div> | ||
|
|
||
| <ol class="banner-event-links"> | ||
| <li> | ||
| <a href="#poster" tabindex="-1">Poster</a> | ||
| </li> | ||
| <li> | ||
| <a href="#map" tabindex="-1">Map</a> | ||
| </li> | ||
| </ol> | ||
|
|
||
| <script> | ||
| function initMap() { | ||
| const location = { lat: -34.397, lng: 150.644 }; | ||
| const map = new google.maps.Map(document.getElementById("map"), { | ||
| zoom: 12, | ||
| center: location, | ||
| disableDefaultUI: true, | ||
| zoomControl: false, | ||
| mapTypeControl: false, | ||
| scaleControl: false, | ||
| streetViewControl: false, | ||
| rotateControl: false, | ||
| fullscreenControl: false, | ||
| }); | ||
|
|
||
| const marker = new google.maps.Marker({ | ||
| position: location, | ||
| map: map, | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
| <!-- <script> | ||
| function initMap(lat, lng) { | ||
| const location = { lat: lat, lng: lng }; | ||
| const map = new google.maps.Map(document.getElementById("map"), { | ||
| zoom: 12, | ||
| center: location, | ||
| disableDefaultUI: true, | ||
| zoomControl: false, | ||
| mapTypeControl: false, | ||
| scaleControl: false, | ||
| streetViewControl: false, | ||
| rotateControl: false, | ||
| fullscreenControl: false, | ||
| }); | ||
| const marker = new google.maps.Marker({ | ||
| position: location, | ||
| map: map, | ||
| }); | ||
| } | ||
| function geocodeAddressAndInitMap(address) { | ||
| const geocoder = new google.maps.Geocoder(); | ||
| geocoder.geocode({ address: address }, function (results, status) { | ||
| if (status === "OK") { | ||
| const lat = results[0].geometry.location.lat(); | ||
| const lng = results[0].geometry.location.lng(); | ||
| initMap(lat, lng); | ||
| } else { | ||
| alert("Geocode was not successful for the following reason: " + status); | ||
| } | ||
| }); | ||
| } | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const locationDataElement = document.getElementById("locationData"); | ||
| const locationAddress = locationDataElement.getAttribute("data-location"); | ||
| geocodeAddressAndInitMap(locationAddress); | ||
| }); | ||
| </script> --> | ||
|
|
||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const bannerEventSlides = document.querySelectorAll(".banner-event-slides"); | ||
|
|
||
| bannerEventSlides.forEach((slide) => { | ||
| const slideImage = slide.querySelector("img"); | ||
| if (slideImage) { | ||
| colorjs.average(slideImage.src).then((color) => { | ||
| const rgbColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`; | ||
| slide.style.backgroundColor = rgbColor; | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| {% for host in page.hosts %} | ||
| <li> | ||
| {% assign lowercase_host = host | slugify %} {% if lowercase_host == 'q-dance' | ||
| %} | ||
| <a href="https://www.q-dance.com" target="_blank" rel="noopener noreferrer"> | ||
| <div class="icon"> | ||
| <svg alt="{{ host }} icon" aria-hidden="true"> | ||
| <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use> | ||
| </svg> | ||
| </div> | ||
| {{ host }} | ||
| </a> | ||
| {% elsif lowercase_host == 'b2s' %} | ||
| <a href="https://www.b2s.nl" target="_blank" rel="noopener noreferrer"> | ||
| <div class="icon"> | ||
| <svg alt="{{ host }} icon" aria-hidden="true"> | ||
| <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use> | ||
| </svg> | ||
| </div> | ||
| {{ host }} | ||
| </a> | ||
| {% elsif lowercase_host == 'art-of-dance' %} | ||
| <a href="https://www.artofdance.nl" target="_blank" rel="noopener noreferrer"> | ||
| <div class="icon"> | ||
| <svg alt="{{ host }} icon" aria-hidden="true"> | ||
| <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use> | ||
| </svg> | ||
| </div> | ||
| {{ host }} | ||
| </a> | ||
| {% elsif lowercase_host == 'tomorrowland' %} | ||
| <a | ||
| href="https://www.tomorrowland.com" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <div class="icon"> | ||
| <svg alt="{{ host }} icon" aria-hidden="true"> | ||
| <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use> | ||
| </svg> | ||
| </div> | ||
| {{ host }} | ||
| </a> | ||
| {% elsif lowercase_host == 'bass-events' %} | ||
| <a href="https://www.bassevents.be" target="_blank" rel="noopener noreferrer"> | ||
| <div class="icon"> | ||
| <svg alt="{{ host }} icon" aria-hidden="true"> | ||
| <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use> | ||
| </svg> | ||
| </div> | ||
| {{ host }} | ||
| </a> | ||
| {% else %} {{ host }} {% endif %} | ||
| </li> | ||
| {% endfor %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="{{ page.lang | default: site.lang | default: 'en' }}"> | ||
| <head> | ||
| {% include head.html %} | ||
| <script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script> | ||
| </head> | ||
| <body> | ||
| {% include header.html %} | ||
| <widgetbot | ||
| server="872048962041970709" | ||
| channel="872048962041970712" | ||
| width="100%" | ||
| height="100%" | ||
| ></widgetbot> | ||
| {% include footer.html %} {% include dialog.html %} | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,46 +3,103 @@ | |
| <head> | ||
| {% include head.html %} | ||
| <script src="https://unpkg.com/[email protected]/dist/color.js"></script> | ||
| <script | ||
| async | ||
| defer | ||
| src="https://maps.googleapis.com/maps/api/js?key={{ site.google_maps_api_key }}&callback=initMap" | ||
| ></script> | ||
| </head> | ||
| <body> | ||
| {% include header.html %} | ||
|
|
||
| <div class="banner" data-variant="event" id="top"> | ||
| {% include banner-event.html %} | ||
| </div> | ||
|
|
||
| <main> | ||
| <div | ||
| class="banner event-banner" | ||
| style="background-image: url({{ page.image }});" | ||
| > | ||
| <h1>{{ page.title }}</h1> | ||
| <div class="page-title"> | ||
| <h1 | ||
| style="view-transition-name: post-title-{{ page.title | slugify }};" | ||
| > | ||
| {{ page.title }} | ||
| </h1> | ||
|
|
||
| <ul class="page-title-input-container"> | ||
| {% if page.facebook %} | ||
| <li> | ||
| <a | ||
| href="{{ page.facebook }}" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| </a> | ||
| </li> | ||
| {% endif %} {% if page.tickets %} | ||
| <li> | ||
| <a | ||
| href="{{ page.tickets }}" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Purchase | ||
| </a> | ||
| </li> | ||
| {% endif %} | ||
| </ul> | ||
| </div> | ||
|
|
||
| <iframe | ||
| width="520" | ||
| height="400" | ||
| frameborder="0" | ||
| scrolling="no" | ||
| marginheight="0" | ||
| marginwidth="0" | ||
| id="gmap_canvas" | ||
| src="https://maps.google.com/maps?width=520&height=400&hl=en&q={{ page.location | uri_escape }}+()&t=&z=12&ie=UTF8&iwloc=B&output=embed" | ||
| ></iframe> | ||
| </main> | ||
| <dl> | ||
| <dt>Date announced</dt> | ||
| <dd> | ||
| <time datetime="{{ page.date | date: '%Y-%m-%d' }}"> | ||
| {{ page.date | date: "%B %d, %Y" }} | ||
| </time> | ||
| </dd> | ||
|
|
||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| // Select all images | ||
| const images = document.querySelectorAll(".event-list-item-image"); | ||
| <dt>Date{% if page.dateend %}s{% endif %}</dt> | ||
| <dd> | ||
| <time datetime="{{ page.datestart | date: '%Y-%m-%d' }}"> | ||
| {{ page.datestart | date: "%B %d, %Y" }} | ||
| </time> | ||
| {% if page.dateend %} – | ||
| <time datetime="{{ page.dateend | date: '%Y-%m-%d' }}"> | ||
| {{ page.dateend | date: "%B %d, %Y" }} | ||
| </time> | ||
| {% endif %} | ||
| </dd> | ||
|
|
||
| {% if page.location %} | ||
| <dt>Location</dt> | ||
| <dd> | ||
| <a | ||
| href="https://www.google.com/maps/place/{{ page.location | uri_escape }}" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| {{ page.location }} | ||
| </a> | ||
| </dd> | ||
| {% endif %} {% if page.type %} | ||
| <dt>Type</dt> | ||
| <dd>{{ page.type }}</dd> | ||
| {% endif %} {% if page.genre %} | ||
| <dt>Genre</dt> | ||
| <dd>{{ page.genre }}</dd> | ||
| {% endif %} {% if page.age %} | ||
| <dt>Age</dt> | ||
| <dd>{{ page.age }}</dd> | ||
| {% endif %} {% if page.hosts %} | ||
| <dt>Host{% if page.hosts.size > 1 %}s{% endif %}</dt> | ||
| <dd> | ||
| <ul> | ||
| {% include hosts.html %} | ||
| </ul> | ||
| </dd> | ||
| {% endif %} | ||
| </dl> | ||
| </main> | ||
|
|
||
| images.forEach((img) => { | ||
| const index = img.dataset.index; // Get the index from the data attribute | ||
| colorjs.average(img.src).then((color) => { | ||
| const rgbColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`; | ||
| const listItem = document.getElementById( | ||
| `event-list-item-${index}` | ||
| ); | ||
| listItem.style.backgroundColor = rgbColor; // Apply the color to the <li> | ||
| }); | ||
| }); | ||
| }); | ||
| </script> | ||
| {% include footer.html %} {% include dialog.html %} | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.