zeus.ugent.be/layouts/eventpost.erb

<% content_for :head do %>
<% if item[:image] %>
<meta property="og:image" content="<%= item[:image] %>" />
<% end %>
<meta property="og:title" content="<%= item[:title] %>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<%= url_for(item) %>" />
<meta property="og:description" content="<%= item[:description] %>" />
<meta property="og:site_name" content="Zeus WPI" />
<meta name="twitter:label1" value="Time" />
<meta name="twitter:data1" value="<%= item[:time].strftime '%A %d %B %Y %H:%M' %>" />
<meta name="twitter:label2" value="Place" />
<meta name="twitter:data2" value="<%= item[:location] %>" />
<meta name="twitter:card" content="summary_large_image" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<% end %>

<% if item[:banner] %>
<section class="hero is-medium is-primary is-bold" style="background-image:url('<%= item[:banner] %>');background-position:center;">
<% elsif item[:color] %>
  <% gradient = if item[:gradient].nil? || item[:gradient]
                  'linear-gradient(141deg,rgba(255,255,255,0),rgba(0,0,0,.60))'
                else
                  'none'
                end %>
                <section class="hero is-medium is-primary is-bold" style="background-image: <%= gradient %>; background-color:<%= item[:color] %>;">
<% else %>
<section class="hero is-medium is-primary is-bold">
<% end %>
  <div class="hero-head">
    <%= render '/partials/_navbar.*', zeus_logo_color: :white, transparent_nav: true %>
  </div>
  <div class="hero-body">
    <div class="container">
      <div class="columns">
        <div class="column has-vertical-center">
          <div class="header-text <%= item[:header_text_background] ? 'light-background' : '' %>">
            <p class="title is-1-responsive event-title">
              <b>
                <%= item[:title] %>
              </b>
              <span class="event-social-icons">
                <% if item[:facebook] %>
                <a href="<%= item[:facebook] %>">
                  <%= fa :facebook %>
                </a>
                <% end %>
                <a href="<%= item.path rep: :ical %>">
                  <%= fa :calendar %>
                </a>
              </span>
            </p>
            <p class="subtitle is-3-responsive">
              <%= item[:description] %>
            </p>
            <ul class="fa-ul is-4-responsive">
              <li><%= fa 'clock-o', li: true %><%= item[:time].strftime '%A %d %B %Y %H:%M' %></li>
              <li><%= fa 'map-marker', li: true %><%= item[:location] %></li>
            </ul>
          </div>
        </div>

        <% if item[:image] %>
        <div class="is-narrow column banner-image">
          <img src="<%= item[:image] %>" alt="banner">
        </div>
        <% end %>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="columns">
    <div class="column is-8 is-offset-2">
      <div class="content has-text-justified is-medium-responsive">
        <%= yield %>
      </div>

      <!-- MAPS -->
      <div class="map-wrapper box">
          <div id="map-error" class="is-invisible" style="height:100%;width:100%;position:absolute;left:0;top:0;background-color:#00000066;z-index:1000;color:white;font-size:30px;display:flex;justify-content:center;align-items:center;padding:50px;">
              Could not find location. Please create an issue on github.
          </div>
          <div id="map" style="height:100%;"></div>
      </div>
    </div>
  </div>
</section>

<script>
var map = L.map('map');

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function performRequest(url, success_callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);

    request.onload = function() {
      if (this.status >= 200 && this.status < 400) {
        // Success!
        var data = JSON.parse(this.response);
        success_callback(data);
      } else {
        // We reached our target server, but it returned an error

      }
    };

    request.onerror = function() {
      // There was a connection error of some sort
    };

    request.send();
}

performRequest("https://photon.komoot.de/api/?limit=1&q=<%= URI::encode(item[:locationlink]) %>", function(data) {
    var lat, lon;
    if(data.features.length < 1) {
        lat = 51.0538286;
        lon = 3.7250121;

        var className = 'is-invisible';
        var el = document.getElementById('map-error');

        if (el.classList)
          el.classList.remove(className);
        else
          el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    } else {
        var place = data.features[0].properties;
        lat = data.features[0].geometry.coordinates[1];
        lon = data.features[0].geometry.coordinates[0];

        L.marker([lat, lon]).addTo(map)
            .bindPopup(place.name + ', ' + place.street + ' ' + place.housenumber)
            .openPopup();
    }
    map.setView([lat, lon], 18);
});
</script>

<!-- SPONSORED BY -->
<% if item[:sponsors] %>
<section class="section">
  <div class="columns">
    <div class="column is-8 is-offset-2">
      <h1 class="title is-1-responsive has-text-centered">Sponsored by</h1>
      <div class="sponsors">
        <% @item[:sponsors].each do |sp| %>
        <a href="<%= sp[:url] %>" target="_blank">
          <img src="<%= sp[:img] %>" alt="<%= sp[:name] %>">
        </a>
        <% end %>
      </div>
    </div>
  </div>
</section>
<% end %>
<!-- END SPONSORED BY -->