139 lines
6.0 KiB
Plaintext
Executable File
139 lines
6.0 KiB
Plaintext
Executable File
%section.content
|
|
.container{style: "margin-top:30px"}
|
|
.col-md-4
|
|
.box.box-body.box-profile{style: "border-top-color: #{@balloon[:user][:color]}"}
|
|
%h4.text-center
|
|
Auteur du ballon
|
|
= avatar_tag @balloon[:user], :large, {class: "profile-user-img img-responsive img-circle"}
|
|
|
|
%h3.profile-username.text-center
|
|
=@balloon[:user][:display_name]
|
|
%p.text-muted.text-center
|
|
=@balloon[:user][:about_me]
|
|
.box.box-body{style: "border-top-color: #{@balloon[:user][:color]}"}
|
|
%h4.text-center
|
|
Emplacement du ballon
|
|
%div{:style => "width: 100%;"}
|
|
#map{:style => "width: 100%; height: 300px;"}
|
|
|
|
.col-md-8
|
|
.box{style: "border-top-color: #{@balloon[:user][:color]}"}
|
|
.post
|
|
.user-block{style: "padding:20px"}
|
|
= avatar_tag @balloon[:user], :medium, {class: "img-circle img-bordered-sm"}
|
|
|
|
%span.username
|
|
= @balloon[:user][:display_name]
|
|
|
|
%span.description
|
|
Créé il y a
|
|
=time_ago_in_words(DateTime.parse(@balloon[:created_at]))
|
|
\/ Expire dans
|
|
=time_ago_in_words(DateTime.parse(@balloon[:expire_at]))
|
|
|
|
-if @balloon[:category]
|
|
%img{style:"position:absolute; right:20px; top:20px;",src: @balloon[:category][:flat_icon_url]}
|
|
|
|
%p{style:"font-size:18px; padding-left:30px;padding-right:30px;"}
|
|
= @balloon[:content]
|
|
|
|
|
|
-if @balloon[:image]
|
|
.image-content{style:"padding:30px"}
|
|
%img#balloon_image{style:"width:100%", :alt => "balloon image", :src => @balloon[:image][:original]}/
|
|
|
|
.balloon-footer{style:"position:relative;display:block;height:40px;"}
|
|
-if @balloon[:likes_count] == 1
|
|
.likes{style:"font-size:20px;position:absolute;bottom:20px;right:20px;"}
|
|
%i.fa.fa-heart{style:"color:#d9534f"}
|
|
= "Une personne aime ce ballon"
|
|
-elsif @balloon[:likes_count] > 1
|
|
.likes{style:"font-size:20px;position:absolute;bottom:20px;right:20px;"}
|
|
%i.fa.fa-heart{style:"color:#d9534f"}
|
|
= "#{@balloon[:likes_count] } personnes aiment ce ballon"
|
|
|
|
= "#{@comments.count} Commentaire(s)"
|
|
-if @comments.count > 0
|
|
.box
|
|
#chat-box.box-body.chat
|
|
- @comments.each do |comment|
|
|
.item
|
|
= avatar_tag comment[:user], :large, {style: "border-color:#{comment[:user][:color]}", class: "offline"}
|
|
|
|
%p.message
|
|
%span.name
|
|
%small.text-muted.pull-right
|
|
%i.fa.fa-clock-o
|
|
=time_ago_in_words(DateTime.parse(comment[:created_at]))
|
|
= comment[:user][:display_name]
|
|
= comment[:content]
|
|
|
|
-if comment[:image]
|
|
.image-content{style:"padding:30px"}
|
|
%img#balloon_image{style:"width:100%", :alt => "comment image", :src => comment[:image][:original]}/
|
|
%a.btn.btn-primary{style:"width:100%;", href:"http://heylium.io"}
|
|
Pour participer, téléchargez l'application Heylium sur iOS ou Android
|
|
|
|
:javascript
|
|
|
|
|
|
handler = Gmaps.build('Google');
|
|
handler.buildMap({ provider: {}, internal: {id: 'map',zoom:10}}, function(){
|
|
var shape = {
|
|
coords: [1, 1, 1, 20, 18, 20, 18, 1],
|
|
type: 'poly'
|
|
};
|
|
|
|
markers = handler.addMarkers([
|
|
{
|
|
"lat": "#{@balloon[:location][:latitude]}",
|
|
"lng": "#{@balloon[:location][:longitude]}",
|
|
"shape": shape,
|
|
"infowindow": "hello!"
|
|
}
|
|
]);
|
|
handler.bounds.extendWith(markers);
|
|
handler.fitMapToBounds();
|
|
handler.getMap().setZoom(12)
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
- content_for :javascript do
|
|
%script{:src => "//maps.google.com/maps/api/js"}
|
|
%script{:src => "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"}
|
|
%script{:src => "//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js", :type => "text/javascript"}
|
|
|
|
- content_for :header do
|
|
/ Schema.org markup for Google+
|
|
%meta{:content => "Ballon de #{@balloon[:user][:display_name]}", :itemprop => "name"}/
|
|
%meta{:content => @balloon[:content].to_s.truncate(200), :itemprop => "description"}/
|
|
-if @balloon[:image]
|
|
%meta{:content => @balloon[:image][:large], :itemprop => "image"}/
|
|
/ Twitter Card data
|
|
-if @balloon[:image]
|
|
%meta{:content => "balloon_image", :name => "twitter:card"}/
|
|
/ Twitter summary card with large image must be at least 280x150px
|
|
%meta{:content => @balloon[:image][:large], :name => "twitter:image:src"}/
|
|
%meta{:content => "@publisher_handle", :name => "twitter:site"}/
|
|
%meta{:content => "Ballon de #{@balloon[:user][:display_name]}", :name => "twitter:title"}/
|
|
%meta{:content => @balloon[:content].to_s.truncate(200), :name => "twitter:description"}/
|
|
%meta{:content => @balloon[:user][:display_name], :name => "twitter:creator"}/
|
|
/ Open Graph data
|
|
%meta{:content => "Ballon de #{@balloon[:user][:display_name]}", :property => "og:title"}/
|
|
%meta{:content => "article", :property => "og:type"}/
|
|
%meta{:content => "1675468199365503", :property => "fb:app_id"}
|
|
-if @balloon[:image]
|
|
%meta{:content => request.original_url, :property => "og:url"}/
|
|
%meta{:content => @balloon[:image][:large], :property => "og:image"}/
|
|
%meta{:content => @balloon[:content].to_s.truncate(200), :property => "og:description"}/
|
|
%meta{:content => "Heylium Webapp", :property => "og:site_name"}/
|
|
%meta{:content => DateTime.parse(@balloon[:created_at]), :property => "article:published_time"}/
|
|
-# %meta{:content => "2013-09-16T19:08:47+01:00", :property => "article:modified_time"}/
|
|
-# %meta{:content => "Article Section", :property => "article:section"}/
|
|
-# %meta{:content => "Article Tag", :property => "article:tag"}/
|
|
-# %meta{:content => "Facebook numberic ID", :property => "fb:admins"}/
|