Skip to content

Instantly share code, notes, and snippets.

@amandaclarck
Created October 28, 2017 21:29
Show Gist options
  • Save amandaclarck/827e5ea9f07e0404ab6acbf697d561cc to your computer and use it in GitHub Desktop.
Save amandaclarck/827e5ea9f07e0404ab6acbf697d561cc to your computer and use it in GitHub Desktop.
<%= render 'layouts/navbar' %>
<%= render 'layouts/flash' %>
<header class="l-header" style="background-image: url('<%= @where.backgrounds.first.picture.url(:large) if @where.backgrounds.any? %>')">
<nav class="b-primary-nav l-container" role="navigation">
<div class="b-logo" style="margin-top: 250px;">
<h2 class="text-color-white"><%= @where.name %></h2>
</div>
<!--
<ul class="b-primary-nav__list">
<li class="b-primary-nav__list__item"><a href="">Journals</a></li>
<li class="b-primary-nav__list__item"><a href="">Stories</a></li>
<li class="b-primary-nav__list__item"><a href="">Contact</a></li>
</ul>
-->
</nav>
</header>
<main role="main">
<header class="b-post-header l-container">
<div class="b-post-header__category"><%= @where.address %></div>
<time class="b-post-header__date" datetime="2017-02-21T13:18:13.595Z"><%= @where.updated_at %></time>
<h1 class="b-post-header__heading"><%= @where.name %></h1>
</header>
<!--
<section class="b-post-main l-container">
<div class="b-post-main__intro">
<div class="b-post-main__col">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus urna ac laoreet finibus. Etiam aliquam odio nec posuere facilisis. Curabitur aliquet quam eu nunc facilisis posuere. Nulla tincidunt lorem in tincidunt feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique, lorem ut porttitor facilisis, nibh libero rutrum dolor, dictum ultrices mi libero ac odio. Mauris consectetur lacinia elit a rutrum. Duis at molestie risus, eu suscipit augue.
</p>
</div>
<div class="b-post-main__col">
<blockquote class="b-post-main__blockquote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
</div>
</div>
<figure class="b-post-main__figure">
<img class="b-post-main__figure--full-width" src="https://source.unsplash.com/Yd_0nFop2Bg/1200x400" alt="Beautiful Landscape">
</figure>
-->
</section>
<section>
<div>
<header class="b-section-header">
<h2>Experiences</h2>
</header>
<div class="row"> <!-- Começa aqui. Quero alinhar como se fosse o /wheres/1-rio-de-janeiro -->
<% if @tours.publisheds.any? %>
<% @tours.publisheds.each do |t| %>
<% if t.organizer %>
<div class="col-xs-12 col-md-6">
<div class="card">
<%= link_to organizer_path(t.organizer) do %>
<%= render partial: 'layouts/organizer_card', locals: {organizer: t.organizer} %>
<% end %>
</div>
</div>
<% end %>
<div class="b-teaser-articles">
<article class="b-teaser-articles__article">
<% if t.picture.present? %>
<figure>
<img class="b-post-main__figure--full-width" src="<%= t.picture.url(:large) %>" alt="<%= t.title %>">
</figure>
<% end %>
<div class="b-teaser-articles__article__content">
<h3>
<%= link_to tour_path(t) do %>
<%= t.title %>
<% end %>
</h3>
<div class="b-teaser-articles__article__content__excerpt">
<%= raw t.description %>
</div>
<% if t.confirmeds.any? %>
<div class="b-favourite-list">
<span class="b-favourite-list__title">Favourited</span>
<a class="b-favourite-list__profile" href="#">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="profile image">
</a>
<a class="b-favourite-list__profile" href="#">
<img src="https://randomuser.me/api/portraits/thumb/men/4.jpg" alt="profile image">
</a>
<a class="b-favourite-list__profile" href="#">
<img src="https://randomuser.me/api/portraits/thumb/women/3.jpg" alt="profile image">
</a>
</div>
<% end %>
</div>
</article>
<% end %>
<% else %>
<article class="b-teaser-articles__article">
<div class="b-teaser-articles__article__content">
<div class="b-teaser-articles__article__content__excerpt">
<p>
<%= t('no-experience-here-label') %>
</p>
<%= link_to organizer_welcome_path, class: "btn btn-primary" do %>
<%= t('create-experience-call-to-action') %>
<% end %>
</div>
</div>
</article>
<% end %>
</div>
</div> <!-- Row que coloquei para ver se alinhava-->
</div>
</section>
<section>
<div class="show-map" id="map"></div>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 40.72, lng: -73.96}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
var placeId = "<%= @where.place_id %>";
geocoder.geocode({'placeId': placeId}, function (results, status) {
if (status === 'OK') {
if (results[0]) {
map.setZoom(11);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
window.onload = function(){
initMap();
};
</script>
</section>
</main>
@alexanmtz
Copy link

Ele pode ficar abaixo da experiência.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment