franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix drill icons on marker medias

Browse Source
This commit is contained in:
Franzz
2019-07-02 22:48:51 +02:00
parent 78febf4711
commit 456c45236c
3 changed files with 90 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
inc/media.php
View File

@@ -42,7 +42,7 @@ class Media extends PhpObject {
));
foreach($asMedias as &$asMedia) {
$asMedia['pic_path'] = self::getMediaPath($asMedia['filename']);
$asMedia['media_path'] = self::getMediaPath($asMedia['filename']);
$asMedia['thumb_path'] = $this->getMediaThumbnail($asMedia['filename']);
}
$this->asMedias = $asMedias;

21
masks/project.html
View File

@@ -130,7 +130,7 @@ function initProject(sProjectCodeName){
self.tmp('proj_tz_notice', bSameTZ?'':' ('+self.vars(['project', 'timezone_desc'])+')');
$.when(
//Markers: Spot Messages & Pictures
//Markers: Spot Messages & Medias
self.get(
'markers',
function(){},
@@ -391,15 +391,16 @@ function initSpotMessages(aoMessages, aoTracks) {
.addIcon('fa-coords', false)
.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
//Tooltip pictures
//Tooltip medias
if(oMsg.medias) {
var $Pics = $('<div>', {'class':'pics'});
var $Medias = $('<div>', {'class':'medias'});
$.each(oMsg.medias, function(iKey, asMedia) {
var bVideo = (asMedia.subtype == 'video');
$Pics
$Medias
.append($('<a>', {
href: asMedia.pic_path,
'data-lightbox': 'marker-pictures',
'class': 'drill '+(bVideo?'video':'picture'),
href: asMedia.media_path,
'data-lightbox': 'marker-medias',
'data-video': (bVideo?'true':'false'),
'data-title': (bVideo?'Vidéo':'Photo')+' prise le '+asMedia.formatted_time+self.tmp('site_tz_notice'),
'data-orientation': asMedia.rotate})
@@ -407,7 +408,7 @@ function initSpotMessages(aoMessages, aoTracks) {
});
$Tooltip
.append($('<p>').addIcon('fa-picture').append('Photos'))
.append($Pics);
.append($Medias);
}
oMarker.bindPopup($Tooltip[0], {
@@ -418,7 +419,7 @@ function initSpotMessages(aoMessages, aoTracks) {
});
//Open tooltip on latest message in mobile mode
if(iKey === 0 && self.vars(['project', 'mode']) == self.consts.modes.blog && (!oMsg.pics || oMsg.pics.length < 3) && self.tmp('mobile')) oMarker.openPopup();
if(iKey === 0 && self.vars(['project', 'mode']) == self.consts.modes.blog && (!oMsg.medias || oMsg.medias.length < 3) && self.tmp('mobile')) oMarker.openPopup();
oSpot.tmp(['markers', oMsg.id_message], oMarker);
});
@@ -514,9 +515,9 @@ function getPost(asPost) {
var $Image = $('<img>', {'src': asPost.thumb_path, title: bVideo?'Click pour voir la vidéo':'Click pour zoomer'});
$Body = $('<a>', {
'class': 'drill '+(bVideo?'video':'picture'),
href: asPost.pic_path,
href: asPost.media_path,
'data-video': (bVideo?'true':'false'),
'data-lightbox': 'post-pictures',
'data-lightbox': 'post-medias',
'data-title': (bVideo?'Vidéo':'Photo')+' ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate
}).append($Image);
break;

82
style/_mask_project.scss
View File

@@ -196,6 +196,24 @@ $legend-color: #222;
}
}
a.drill {
position: relative;
@extend .fa;
overflow: hidden;
text-decoration: none;
&:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 3em;
color: transparent;
transition: all 0.3s;
cursor: pointer;
}
}
#feed {
position: absolute;
right: 0;
@@ -299,21 +317,6 @@ $legend-color: #222;
width: 100%;
line-height: 0;
margin: 0;
position: relative;
@extend .fa;
overflow: hidden;
text-decoration: none;
&:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 3em;
color: transparent;
transition: all 0.3s;
cursor: pointer;
}
}
}
&.headerless {
@@ -331,12 +334,12 @@ $legend-color: #222;
a.drill {
&.video {
@extend .fa-drill-video;
&:hover:before {
color: rgba($media-bg, 0.75);
}
&:before {
color: rgba(255, 255, 255, 0.5);
}
&:hover:before {
color: rgba($media-bg, 0.75);
}
}
&.picture {
@@ -390,11 +393,6 @@ $legend-color: #222;
}
}
}
}
#elems {
display: none;
}
/* Info Window */
@@ -416,24 +414,48 @@ $legend-color: #222;
vertical-align: -15%;
}
.pics {
.medias {
margin-top: 0.5em;
a {
display: inline-block;
margin-right: 15px;
&.drill {
&.video {
@extend .fa-drill-video;
&:before {
color: rgba(255, 255, 255, 0.5);
}
&:hover:before {
color: rgba(255, 255, 255, 0.75);
}
}
&.picture {
@extend .fa-drill-picture;
&:before {
color: transparent;
}
&:hover:before {
color: rgba(255, 255, 255, 0.75);
}
}
}
img {
max-width: 200px;
max-height: 100px;
border-radius: 3px;
image-orientation: from-image;
transition: All 0.2s;
}
}
}
}
}
&:hover {
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
}
}
}
}
#elems {
display: none;
}