diff --git a/inc/media.php b/inc/media.php index aeb086d..55f2fbf 100644 --- a/inc/media.php +++ b/inc/media.php @@ -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; diff --git a/masks/project.html b/masks/project.html index c056921..63261a7 100755 --- a/masks/project.html +++ b/masks/project.html @@ -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 = $('
', {'class':'pics'}); + var $Medias = $('
', {'class':'medias'}); $.each(oMsg.medias, function(iKey, asMedia) { var bVideo = (asMedia.subtype == 'video'); - $Pics + $Medias .append($('', { - 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($('

').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 = $('', {'src': asPost.thumb_path, title: bVideo?'Click pour voir la vidéo':'Click pour zoomer'}); $Body = $('', { '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; diff --git a/style/_mask_project.scss b/style/_mask_project.scss index fdbabbe..601d892 100644 --- a/style/_mask_project.scss +++ b/style/_mask_project.scss @@ -195,6 +195,24 @@ $legend-color: #222; @extend .fa-post; } } + + 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; @@ -226,7 +244,7 @@ $legend-color: #222; color: $post-color; } } - + #posts { position: absolute; transition: all 0.5s; @@ -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,50 +393,69 @@ $legend-color: #222; } } } -} -#elems { - display: none; -} + /* Info Window */ -/* Info Window */ - -.info-window { - h1 { - font-size: 1.2em; - margin: 1em 0; - } - - p { - font-size: 1.0em; - margin: 0.5em 0 0 0; - } - - i { - padding-right: 0.5em; - font-size: 1.33333333em; - line-height: 0.75em; - vertical-align: -15%; - } - - .pics { - margin-top: 0.5em; + .info-window { + h1 { + font-size: 1.2em; + margin: 1em 0; + } - a { - display: inline-block; - margin-right: 15px; + p { + font-size: 1.0em; + margin: 0.5em 0 0 0; + } + + i { + padding-right: 0.5em; + font-size: 1.33333333em; + line-height: 0.75em; + vertical-align: -15%; + } + + .medias { + margin-top: 0.5em; - img { - max-width: 200px; - max-height: 100px; - border-radius: 3px; - image-orientation: from-image; - transition: All 0.2s; + 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); + } + + } - &:hover { - box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5); + &.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; } } } } +} + +#elems { + display: none; } \ No newline at end of file