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 = $('
').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